From 241dc49797c3801782f56848a607da37e1b6a441 Mon Sep 17 00:00:00 2001 From: blam Date: Fri, 5 Jun 2020 14:05:01 +0200 Subject: [PATCH 1/4] chore(Catalog/Navigation): Added some basic tabs to the subheader grid area --- packages/core/src/layout/HeaderTabs/index.tsx | 48 +++++++++++++ .../components/CatalogFilter/StarredCount.tsx | 22 ++++++ .../components/CatalogPage/CatalogPage.tsx | 13 +++- yarn.lock | 69 ------------------- 4 files changed, 82 insertions(+), 70 deletions(-) create mode 100644 packages/core/src/layout/HeaderTabs/index.tsx create mode 100644 plugins/catalog/src/components/CatalogFilter/StarredCount.tsx diff --git a/packages/core/src/layout/HeaderTabs/index.tsx b/packages/core/src/layout/HeaderTabs/index.tsx new file mode 100644 index 0000000000..cdef267f95 --- /dev/null +++ b/packages/core/src/layout/HeaderTabs/index.tsx @@ -0,0 +1,48 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; + +import { makeStyles, Tabs, Tab } from '@material-ui/core'; + +const useStyles = makeStyles({ + wrapper: { + gridArea: 'pageSubheader', + }, +}); + +export const HeaderTabs: React.FC<{}> = () => { + const styles = useStyles(); + return ( +
+ + + + + + + + + +
+ ); +}; diff --git a/plugins/catalog/src/components/CatalogFilter/StarredCount.tsx b/plugins/catalog/src/components/CatalogFilter/StarredCount.tsx new file mode 100644 index 0000000000..20e1be1a9a --- /dev/null +++ b/plugins/catalog/src/components/CatalogFilter/StarredCount.tsx @@ -0,0 +1,22 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { useStarredEntities } from '../../hooks/useStarredEntites'; + +export const StarredCount: React.FC<{}> = () => { + const { starredEntities } = useStarredEntities(); + return {starredEntities.size}; +}; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 779bcc7693..ef19e728e5 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -32,7 +32,15 @@ import { CatalogFilter, CatalogFilterItem, } from '../CatalogFilter/CatalogFilter'; -import { Button, makeStyles, Typography, Link } from '@material-ui/core'; +import { + Button, + makeStyles, + Typography, + Link, + AppBar, + Tabs, + Tab, +} from '@material-ui/core'; import { filterGroups, defaultFilter } from '../../data/filters'; import { Link as RouterLink } from 'react-router-dom'; import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder'; @@ -51,6 +59,7 @@ const useStyles = makeStyles(theme => ({ import { catalogApiRef } from '../..'; import { envelopeToComponent } from '../../data/utils'; import { Component } from '../../data/component'; +import { HeaderTabs } from '@backstage/core/src/layout/HeaderTabs'; const CatalogPage: FC<{}> = () => { const catalogApi = useApi(catalogApiRef); @@ -113,6 +122,7 @@ const CatalogPage: FC<{}> = () => {
+ = () => { } /> +