paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 41 Packages Projects Releases Wiki Activity

chore(Catalog/Navigation): Added some basic tabs to the subheader grid area

Browse Source
This commit is contained in:
blam
2020-06-05 14:05:01 +02:00
parent e396996792
commit 241dc49797
4 changed files with 82 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/layout/HeaderTabs/index.tsx
+48
View File
@@ -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 (
<div className={styles.wrapper}>
<Tabs
indicatorColor="primary"
textColor="primary"
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
value={0}
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
<Tab label="Item Four" />
<Tab label="Item Five" />
<Tab label="Item Six" />
<Tab label="Item Seven" />
</Tabs>
</div>
);
};
plugins/catalog/src/components/CatalogFilter/StarredCount.tsx
+22
View File
@@ -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 <span>{starredEntities.size}</span>;
};
plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+12 -1
View File
@@ -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<{}> = () => {
<Header title="Service Catalog" subtitle="Keep track of your software">
<HomepageTimer />
</Header>
<HeaderTabs />
<Content>
<DismissableBanner
variant="info"
@@ -130,6 +140,7 @@ const CatalogPage: FC<{}> = () => {
</Typography>
}
/>
<ContentHeader title="Services">
<Button
component={RouterLink}
yarn.lock
-69
View File
@@ -2665,17 +2665,6 @@
telejson "^3.2.0"
util-deprecate "^1.0.2"
"@storybook/channel-postmessage@5.3.18":
version "5.3.18"
resolved "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-5.3.18.tgz#93d46740b5cc9b36ddd073f0715b54c4959953bf"
integrity sha512-awxBW/aVfNtY9QvYZgsPaMXgUpC2+W3vEyQcl/w4ce0YVH+7yWx3wt3Ku49lQwxZwDrxP3QoC0U+mkPc9hBJwA==
dependencies:
"@storybook/channels" "5.3.18"
"@storybook/client-logger" "5.3.18"
core-js "^3.0.1"
global "^4.3.2"
telejson "^3.2.0"
"@storybook/channel-postmessage@5.3.19":
version "5.3.19"
resolved "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-5.3.19.tgz#ef9fe974c2a529d89ce342ff7acf5cc22805bae9"
@@ -2701,29 +2690,6 @@
dependencies:
core-js "^3.0.1"
"@storybook/client-api@5.3.18":
version "5.3.18"
resolved "https://registry.npmjs.org/@storybook/client-api/-/client-api-5.3.18.tgz#e71041796f95888de0e4524734418e6b120b060a"
integrity sha512-QiXTDUpjdyW19BlocLw07DrkOnEzVaWGJcRze2nSs29IKKuq1Ncv2LOAZt6ySSq0PmIKsjBou3bmS1/aXmDMdw==
dependencies:
"@storybook/addons" "5.3.18"
"@storybook/channel-postmessage" "5.3.18"
"@storybook/channels" "5.3.18"
"@storybook/client-logger" "5.3.18"
"@storybook/core-events" "5.3.18"
"@storybook/csf" "0.0.1"
"@types/webpack-env" "^1.15.0"
core-js "^3.0.1"
eventemitter3 "^4.0.0"
global "^4.3.2"
is-plain-object "^3.0.0"
lodash "^4.17.15"
memoizerific "^1.11.3"
qs "^6.6.0"
stable "^0.1.8"
ts-dedent "^1.1.0"
util-deprecate "^1.0.2"
"@storybook/client-api@5.3.19":
version "5.3.19"
resolved "https://registry.npmjs.org/@storybook/client-api/-/client-api-5.3.19.tgz#7a5630bb8fffb92742b1773881e9004ee7fdf8e0"
@@ -2761,33 +2727,6 @@
dependencies:
core-js "^3.0.1"
"@storybook/components@5.3.18":
version "5.3.18"
resolved "https://registry.npmjs.org/@storybook/components/-/components-5.3.18.tgz#528f6ab1660981e948993a04b407a6fad7751589"
integrity sha512-LIN4aVCCDY7klOwtuqQhfYz4tHaMADhXEzZpij+3r8N68Inck6IJ1oo9A9umXQPsTioQi8e6FLobH1im90j/2A==
dependencies:
"@storybook/client-logger" "5.3.18"
"@storybook/theming" "5.3.18"
"@types/react-syntax-highlighter" "11.0.4"
"@types/react-textarea-autosize" "^4.3.3"
core-js "^3.0.1"
global "^4.3.2"
lodash "^4.17.15"
markdown-to-jsx "^6.9.1"
memoizerific "^1.11.3"
polished "^3.3.1"
popper.js "^1.14.7"
prop-types "^15.7.2"
react "^16.8.3"
react-dom "^16.8.3"
react-focus-lock "^2.1.0"
react-helmet-async "^1.0.2"
react-popper-tooltip "^2.8.3"
react-syntax-highlighter "^11.0.2"
react-textarea-autosize "^7.1.0"
simplebar-react "^1.0.0-alpha.6"
ts-dedent "^1.1.0"
"@storybook/components@5.3.19":
version "5.3.19"
resolved "https://registry.npmjs.org/@storybook/components/-/components-5.3.19.tgz#aac1f9eea1247cc85bd93b10fca803876fb84a6b"
@@ -12674,14 +12613,6 @@ markdown-to-jsx@^6.11.4:
prop-types "^15.6.2"
unquote "^1.1.0"
markdown-to-jsx@^6.9.1:
version "6.11.0"
resolved "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.0.tgz#a2e3f2bc781c3402d8bb0f8e0a12a186474623b0"
integrity sha512-RH7LCJQ4RFmPqVeZEesKaO1biRzB/k4utoofmTCp3Eiw6D7qfvK8fzZq/2bjEJAtVkfPrM5SMt5APGf2rnaKMg==
dependencies:
prop-types "^15.6.2"
unquote "^1.1.0"
material-table@^1.58.0:
version "1.58.2"
resolved "https://registry.npmjs.org/material-table/-/material-table-1.58.2.tgz#dc0d19652848e6bb92f747d122bd7d4681cca6dc"