From d8cb971216d2c1c22509f387ced6f824192370d2 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 24 Feb 2023 10:20:27 +0100 Subject: [PATCH 1/3] Remove Tabs component Signed-off-by: Philipp Hugenroth --- .../src/components/Tabs/Tab.test.tsx | 26 --- .../src/components/Tabs/Tab.tsx | 72 -------- .../src/components/Tabs/TabBar.tsx | 60 ------- .../src/components/Tabs/TabIcon.tsx | 66 ------- .../src/components/Tabs/TabPanel.tsx | 37 ---- .../src/components/Tabs/Tabs.stories.tsx | 71 -------- .../src/components/Tabs/Tabs.tsx | 170 ------------------ .../src/components/Tabs/index.ts | 22 --- .../src/components/Tabs/utils.ts | 28 --- .../core-components/src/components/index.ts | 1 - 10 files changed, 553 deletions(-) delete mode 100644 packages/core-components/src/components/Tabs/Tab.test.tsx delete mode 100644 packages/core-components/src/components/Tabs/Tab.tsx delete mode 100644 packages/core-components/src/components/Tabs/TabBar.tsx delete mode 100644 packages/core-components/src/components/Tabs/TabIcon.tsx delete mode 100644 packages/core-components/src/components/Tabs/TabPanel.tsx delete mode 100644 packages/core-components/src/components/Tabs/Tabs.stories.tsx delete mode 100644 packages/core-components/src/components/Tabs/Tabs.tsx delete mode 100644 packages/core-components/src/components/Tabs/index.ts delete mode 100644 packages/core-components/src/components/Tabs/utils.ts diff --git a/packages/core-components/src/components/Tabs/Tab.test.tsx b/packages/core-components/src/components/Tabs/Tab.test.tsx deleted file mode 100644 index d30420ebb6..0000000000 --- a/packages/core-components/src/components/Tabs/Tab.test.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * 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 { renderInTestApp } from '@backstage/test-utils'; -import { StyledTab } from './Tab'; - -describe('', () => { - it('renders without exploding', async () => { - const rendered = await renderInTestApp(); - expect(rendered.getByText('test')).toBeInTheDocument(); - }); -}); diff --git a/packages/core-components/src/components/Tabs/Tab.tsx b/packages/core-components/src/components/Tabs/Tab.tsx deleted file mode 100644 index 2922bd9651..0000000000 --- a/packages/core-components/src/components/Tabs/Tab.tsx +++ /dev/null @@ -1,72 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * 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 } from '@material-ui/core/styles'; -import Tab from '@material-ui/core/Tab'; -import { BackstageTheme } from '@backstage/theme'; - -interface StyledTabProps { - label?: string; - icon?: any; // TODO: define type for material-ui icons - isFirstNav?: boolean; - isFirstIndex?: boolean; - value?: any; -} - -const tabMarginLeft = (isFirstNav: boolean, isFirstIndex: boolean) => { - if (isFirstIndex) { - if (isFirstNav) { - return '20px'; - } - return '0'; - } - return '40px'; -}; - -/** @public */ -export type TabClassKey = 'root' | 'selected'; - -const useStyles = makeStyles( - theme => ({ - root: { - textTransform: 'none', - height: '64px', - fontWeight: theme.typography.fontWeightBold, - fontSize: theme.typography.pxToRem(13), - color: theme.palette.textSubtle, - marginLeft: props => - tabMarginLeft( - props.isFirstNav as boolean, - props.isFirstIndex as boolean, - ), - width: '130px', - minWidth: '130px', - '&:hover': { - outline: 'none', - backgroundColor: 'transparent', - color: theme.palette.textSubtle, - }, - }, - }), - { name: 'BackstageTab' }, -); - -export const StyledTab = (props: StyledTabProps) => { - const classes = useStyles(props); - const { isFirstNav, isFirstIndex, ...rest } = props; - return ; -}; diff --git a/packages/core-components/src/components/Tabs/TabBar.tsx b/packages/core-components/src/components/Tabs/TabBar.tsx deleted file mode 100644 index 99be9a7d1d..0000000000 --- a/packages/core-components/src/components/Tabs/TabBar.tsx +++ /dev/null @@ -1,60 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * 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, { PropsWithChildren } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Tabs from '@material-ui/core/Tabs'; -import Typography from '@material-ui/core/Typography'; -import { BackstageTheme } from '@backstage/theme'; - -interface StyledTabsProps { - value: number | boolean; - selectionFollowsFocus: boolean; - onChange: (event: React.ChangeEvent<{}>, newValue: number) => void; -} - -export type TabBarClassKey = 'indicator' | 'flexContainer' | 'root'; - -const useStyles = makeStyles( - theme => ({ - indicator: { - display: 'flex', - justifyContent: 'center', - backgroundColor: theme.palette.tabbar.indicator, - height: theme.spacing(0.5), - }, - flexContainer: { - alignItems: 'center', - }, - root: { - '&:last-child': { - marginLeft: 'auto', - }, - }, - }), - { name: 'BackstageTabBar' }, -); - -export const StyledTabs = (props: PropsWithChildren) => { - const classes = useStyles(props); - return ( - }} - /> - ); -}; diff --git a/packages/core-components/src/components/Tabs/TabIcon.tsx b/packages/core-components/src/components/Tabs/TabIcon.tsx deleted file mode 100644 index 0e93924de9..0000000000 --- a/packages/core-components/src/components/Tabs/TabIcon.tsx +++ /dev/null @@ -1,66 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * 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 } from '@material-ui/core/styles'; -import IconButton from '@material-ui/core/IconButton'; -import { BackstageTheme } from '@backstage/theme'; - -interface StyledIconProps { - ariaLabel: string; - children: any; - isNext?: boolean; - onClick: any; -} - -export type TabIconClassKey = 'root'; - -const useStyles = makeStyles( - theme => ({ - root: { - color: '#6E6E6E', - overflow: 'visible', - fontSize: theme.typography.h5.fontSize, - textAlign: 'center', - borderRadius: '50%', - backgroundColor: '#E6E6E6', - marginLeft: props => (props.isNext ? 'auto' : '0'), - marginRight: props => (props.isNext ? '0' : theme.spacing(1.25)), - '&:hover': { - backgroundColor: '#E6E6E6', - opacity: '1', - }, - }, - }), - { name: 'BackstageTabIcon' }, -); - -export const StyledIcon = (props: StyledIconProps) => { - const classes = useStyles(props); - const { ariaLabel, onClick } = props; - return ( - - {props.children} - - ); -}; diff --git a/packages/core-components/src/components/Tabs/TabPanel.tsx b/packages/core-components/src/components/Tabs/TabPanel.tsx deleted file mode 100644 index 3ecc1ba046..0000000000 --- a/packages/core-components/src/components/Tabs/TabPanel.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * 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 Box from '@material-ui/core/Box'; -import React, { PropsWithChildren } from 'react'; - -export interface TabPanelProps { - value?: any; - index?: number; -} - -export const TabPanel = (props: PropsWithChildren) => { - const { children, value, index, ...other } = props; - - return ( - - ); -}; diff --git a/packages/core-components/src/components/Tabs/Tabs.stories.tsx b/packages/core-components/src/components/Tabs/Tabs.stories.tsx deleted file mode 100644 index 4d4cad8757..0000000000 --- a/packages/core-components/src/components/Tabs/Tabs.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * 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 { Tabs } from './Tabs'; -import AccessAlarmIcon from '@material-ui/icons/AccessAlarm'; - -export default { - title: 'Navigation/Tabs', - component: Tabs, -}; - -const containerStyle = {}; - -export const Default = () => ( -
- ({ - label: `ANOTHER TAB`, - content:
Content {index}
, - }))} - /> -
-); - -export const Expandable = () => ( -
- ({ - label: `ANOTHER TAB`, - content:
Content {index}
, - }))} - /> -
-); - -export const Icons = () => ( -
- ({ - icon: , - content:
Content {index}
, - }))} - /> -
-); - -export const IconsAndLabels = () => ( -
- ({ - icon: , - label: `ANOTHER TAB`, - content:
Content {index}
, - }))} - /> -
-); diff --git a/packages/core-components/src/components/Tabs/Tabs.tsx b/packages/core-components/src/components/Tabs/Tabs.tsx deleted file mode 100644 index 420263f576..0000000000 --- a/packages/core-components/src/components/Tabs/Tabs.tsx +++ /dev/null @@ -1,170 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * 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, { useRef, useEffect, MutableRefObject, useState } from 'react'; -import { BackstageTheme } from '@backstage/theme'; -import AppBar from '@material-ui/core/AppBar'; -import { makeStyles } from '@material-ui/core/styles'; -import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; -import NavigateNextIcon from '@material-ui/icons/NavigateNext'; -import { chunkArray } from './utils'; -import useWindowSize from 'react-use/lib/useWindowSize'; - -/* Import Components */ - -import { TabPanel } from './TabPanel'; -import { StyledIcon } from './TabIcon'; -import { StyledTab } from './Tab'; -import { StyledTabs } from './TabBar'; -import Box from '@material-ui/core/Box'; - -/* Props Types */ - -export interface TabProps { - content: any; - label?: string; - icon?: any; // TODO: define type for material-ui icons -} - -export interface TabsProps { - tabs: TabProps[]; -} - -export type TabsClassKey = 'root' | 'styledTabs' | 'appbar'; - -const useStyles = makeStyles( - theme => ({ - root: { - flexGrow: 1, - width: '100%', - }, - styledTabs: { - backgroundColor: theme.palette.background.paper, - }, - appbar: { - boxShadow: 'none', - backgroundColor: theme.palette.background.paper, - paddingLeft: theme.spacing(1.25), - paddingRight: theme.spacing(1.25), - }, - }), - { name: 'BackstageTabs' }, -); - -export function Tabs(props: TabsProps) { - const { tabs } = props; - const classes = useStyles(); - const [value, setValue] = useState([0, 0]); // [selectedChunkedNavIndex, selectedIndex] - const [navIndex, setNavIndex] = useState(0); - const [numberOfChunkedElement, setNumberOfChunkedElement] = useState(0); - const [chunkedTabs, setChunkedTabs] = useState([[]]); - const wrapper = useRef() as MutableRefObject; - - const { width } = useWindowSize(); - - const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => { - setValue([navIndex, newValue]); - }; - - const navigateToPrevChunk = () => { - setNavIndex(navIndex - 1); - }; - - const navigateToNextChunk = () => { - setNavIndex(navIndex + 1); - }; - - const hasNextNavIndex = () => navIndex + 1 < chunkedTabs.length; - - useEffect(() => { - // Each time the window is resized we calculate how many tabs we can render given the window width - const padding = 20; // The AppBar padding - - const numberOfTabIcons = navIndex === 0 ? 1 : 2; - const wrapperWidth = - wrapper.current.offsetWidth - padding - numberOfTabIcons * 30; - const flattenIndex = value[0] * numberOfChunkedElement + value[1]; - const newChunkedElementSize = Math.floor(wrapperWidth / 170); - - setNumberOfChunkedElement(newChunkedElementSize); - setChunkedTabs(chunkArray(tabs, newChunkedElementSize)); - setValue([ - Math.floor(flattenIndex / newChunkedElementSize), - flattenIndex % newChunkedElementSize, - ]); - // eslint-disable-next-line - }, [width, tabs]); - - const currentIndex = navIndex === value[0] ? value[1] : false; - - return ( - - - - - {navIndex !== 0 && ( - - - - )} - {chunkedTabs[navIndex].map((tab, index) => ( - - ))} - {hasNextNavIndex() && ( - - - - )} - - - - {currentIndex !== false ? ( - chunkedTabs[navIndex].map((tab, index) => ( - - {tab.content} - - )) - ) : ( - // Render if the selected tab index is outside the current rendered chunked array - - {chunkedTabs[value[0]][value[1]].content} - - )} - - ); -} diff --git a/packages/core-components/src/components/Tabs/index.ts b/packages/core-components/src/components/Tabs/index.ts deleted file mode 100644 index 9702c39a48..0000000000 --- a/packages/core-components/src/components/Tabs/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * 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. - */ - -export { Tabs } from './Tabs'; -export type { TabsClassKey } from './Tabs'; -export type { TabClassKey } from './Tab'; - -export type { TabBarClassKey } from './TabBar'; -export type { TabIconClassKey } from './TabIcon'; diff --git a/packages/core-components/src/components/Tabs/utils.ts b/packages/core-components/src/components/Tabs/utils.ts deleted file mode 100644 index 80705fdfc0..0000000000 --- a/packages/core-components/src/components/Tabs/utils.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * 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. - */ - -export function chunkArray(array: T[], chunkSize: number): T[][] { - if (chunkSize <= 0) { - return [array]; - } - - const result: T[][] = []; - for (let i = 0; i < array.length; i += chunkSize) { - result.push(array.slice(i, i + chunkSize)); - } - - return result; -} diff --git a/packages/core-components/src/components/index.ts b/packages/core-components/src/components/index.ts index 0057847754..0222b82aa4 100644 --- a/packages/core-components/src/components/index.ts +++ b/packages/core-components/src/components/index.ts @@ -44,6 +44,5 @@ export * from './StructuredMetadataTable'; export * from './SupportButton'; export * from './TabbedLayout'; export * from './Table'; -export * from './Tabs'; export * from './TrendLine'; export * from './WarningPanel'; From 2466406b15977e5d7b883c1e0bdaaa4af04f275e Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 24 Feb 2023 10:37:12 +0100 Subject: [PATCH 2/3] Generate API Report Signed-off-by: Philipp Hugenroth --- packages/core-components/api-report.md | 24 ------------------- .../src/overridableComponents.ts | 8 ------- 2 files changed, 32 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 6439be23a7..1e5fa77ed3 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -1318,11 +1318,6 @@ export type Tab = { >; }; -// Warning: (ae-missing-release-tag) "TabBarClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export type TabBarClassKey = 'indicator' | 'flexContainer' | 'root'; - // Warning: (ae-forgotten-export) The symbol "Props_18" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "TabbedCard" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1348,14 +1343,6 @@ export namespace TabbedLayout { Route: (props: SubRoute) => null; } -// @public (undocumented) -export type TabClassKey = 'root' | 'selected'; - -// Warning: (ae-missing-release-tag) "TabIconClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export type TabIconClassKey = 'root'; - // Warning: (ae-missing-release-tag) "Table" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) @@ -1438,17 +1425,6 @@ export type TableState = { // @public (undocumented) export type TableToolbarClassKey = 'root' | 'title' | 'searchField'; -// Warning: (ae-forgotten-export) The symbol "TabsProps" needs to be exported by the entry point index.d.ts -// Warning: (ae-missing-release-tag) "Tabs" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export function Tabs(props: TabsProps): JSX.Element; - -// Warning: (ae-missing-release-tag) "TabsClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export type TabsClassKey = 'root' | 'styledTabs' | 'appbar'; - // Warning: (ae-missing-release-tag) "TrendLine" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) diff --git a/packages/core-components/src/overridableComponents.ts b/packages/core-components/src/overridableComponents.ts index 49bc162951..c872317049 100644 --- a/packages/core-components/src/overridableComponents.ts +++ b/packages/core-components/src/overridableComponents.ts @@ -60,10 +60,6 @@ import { TableToolbarClassKey, FiltersContainerClassKey, TableClassKey, - TabBarClassKey, - TabIconClassKey, - TabsClassKey, - TabClassKey, WarningPanelClassKey, } from './components'; @@ -141,10 +137,6 @@ type BackstageComponentsNameToClassKey = { BackstageTableToolbar: TableToolbarClassKey; BackstageTableFiltersContainer: FiltersContainerClassKey; BackstageTable: TableClassKey; - BackstageTabBar: TabBarClassKey; - BackstageTabIcon: TabIconClassKey; - BackstageTabs: TabsClassKey; - BackstageTab: TabClassKey; BackstageWarningPanel: WarningPanelClassKey; BackstageBottomLink: BottomLinkClassKey; BackstageBreadcrumbsClickableText: BreadcrumbsClickableTextClassKey; From 01cd4e2575463bf0ab6ae399067e8e91262e9c4a Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Sat, 1 Apr 2023 18:36:59 +0200 Subject: [PATCH 3/3] Add changeset Signed-off-by: Philipp Hugenroth --- .changeset/yellow-candles-kiss.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 .changeset/yellow-candles-kiss.md diff --git a/.changeset/yellow-candles-kiss.md b/.changeset/yellow-candles-kiss.md new file mode 100644 index 0000000000..e365be2a0a --- /dev/null +++ b/.changeset/yellow-candles-kiss.md @@ -0,0 +1,21 @@ +--- +'@backstage/core-components': minor +--- + +**BREAKING:** Removing `Tabs` component from `core-components` as it is neither used in the core Backstage app nor in the monorepo plugins. If you are using this component in your instance please consider replacing it with the [Material UI `Tabs`](https://v4.mui.com/components/tabs/#tabs) component like the following: + +```diff +- , +- content:
Label
, +- }]} +- /> + ++ ++ } ++ /> ++ +```