From 7ebc6028d6bfc02667fdcf7d60059a48ac2200ee Mon Sep 17 00:00:00 2001 From: Keran Yang Date: Wed, 13 Dec 2023 21:11:33 -0500 Subject: [PATCH 01/32] Update installation.md Signed-off-by: Keran Yang --- docs/features/kubernetes/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/features/kubernetes/installation.md b/docs/features/kubernetes/installation.md index 216c4db3f4..5111b5ad2e 100644 --- a/docs/features/kubernetes/installation.md +++ b/docs/features/kubernetes/installation.md @@ -130,7 +130,7 @@ export class CustomClustersSupplier implements KubernetesClustersSupplier { static create(refreshInterval: Duration) { const clusterSupplier = new CustomClustersSupplier(); - // setup refresh, e.g. using a copy of https://github.com/backstage/backstage/blob/master/plugins/search-backend-node/src/runPeriodically.ts + // setup refresh, e.g. using a copy of https://github.com/backstage/backstage/blob/master/plugins/kubernetes-backend/src/service/runPeriodically.ts runPeriodically( () => clusterSupplier.refreshClusters(), refreshInterval.toMillis(), From 6f68649e47fa55a6d266f057b48b22f50c1baeea Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Sun, 3 Dec 2023 18:22:58 -0600 Subject: [PATCH 02/32] Getting started corrections Signed-off-by: Andre Wanlin --- docs/getting-started/configuration.md | 6 +++--- docs/getting-started/index.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/getting-started/configuration.md b/docs/getting-started/configuration.md index b7bf7d448d..2105df5e0a 100644 --- a/docs/getting-started/configuration.md +++ b/docs/getting-started/configuration.md @@ -275,8 +275,8 @@ otherwise something went terribly wrong. ![Software template main screen, with a blue button to add an existing component](../assets/getting-started/b-existing-1.png) -- As URL use `https://github.com/backstage/demo/blob/master/catalog-info.yaml`. - This is used by our [demo site](https://demo.backstage.io). +- As URL use `https://github.com/backstage/backstage/blob/master/catalog-info.yaml`. + This is used in our [demo site](https://demo.backstage.io) catalog. ![Register a new component wizard, asking for an URL to the existing component YAML file](../assets/getting-started/b-existing-2.png) @@ -285,7 +285,7 @@ otherwise something went terribly wrong. ![Register a new component wizard, showing the metadata for the component YAML we use in this tutorial](../assets/getting-started/b-existing-3.png) - You should receive a message that your entities have been added. -- If you go back to `Home`, you should be able to find `demo`. You should be +- If you go back to `Home`, you should be able to find `backstage`. You should be able to click it and see the details ## Create a new component using a software template diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md index cd5a1725c9..11de12feb9 100644 --- a/docs/getting-started/index.md +++ b/docs/getting-started/index.md @@ -26,7 +26,7 @@ you to use the [Contributors](https://github.com/backstage/backstage/blob/master On MacOS, you will want to have run `xcode-select --install` to get the XCode command line build tooling in place. - An account with elevated rights to install the dependencies - `curl` or `wget` installed -- Node.js [Active LTS Release](https://nodejs.org/en/blog/release/) installed using one of these +- Node.js [Active LTS Release](https://nodejs.org/en/about/previous-releases) installed using one of these methods: - Using `nvm` (recommended) - [Installing nvm](https://github.com/nvm-sh/nvm#install--update-script) From 56b2fb0726810589a7c686e831d37da6310965dc Mon Sep 17 00:00:00 2001 From: Stan Lewis Date: Mon, 4 Dec 2023 13:00:45 -0500 Subject: [PATCH 03/32] feat: Use a Select control for the language select This change updates the language selector in the user settings component to use a Select control instead of a list of buttons. The select control will try and display the native language name instead of the language code. Fixes #21626 Signed-off-by: Stan Lewis --- .changeset/happy-forks-jam.md | 5 ++ .../UserSettingsLanguageToggle.test.tsx | 5 +- .../General/UserSettingsLanguageToggle.tsx | 68 ++++++------------- 3 files changed, 31 insertions(+), 47 deletions(-) create mode 100644 .changeset/happy-forks-jam.md diff --git a/.changeset/happy-forks-jam.md b/.changeset/happy-forks-jam.md new file mode 100644 index 0000000000..3f48853311 --- /dev/null +++ b/.changeset/happy-forks-jam.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-user-settings': minor +--- + +Updated the user settings selector to use a select component that displays native language names instead of language codes if possible. diff --git a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx index 6e3a01c3c5..88b257c833 100644 --- a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.test.tsx @@ -74,7 +74,10 @@ describe('UserSettingsLanguageToggle', () => { await renderInTestApp(); - fireEvent.click(screen.getByText('de')); + // open the select control + fireEvent.mouseDown(screen.getByText('English')); + // select the new language + fireEvent.click(screen.getByText('Deutsch')); expect(mockLanguageApi.setLanguage).toHaveBeenCalledWith('de'); }); diff --git a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx index 67519d24ae..15c6e9ea9c 100644 --- a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx @@ -19,24 +19,16 @@ import { useTranslationRef, appLanguageApiRef, } from '@backstage/core-plugin-api/alpha'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; import { ListItem, ListItemText, ListItemSecondaryAction, - Tooltip, makeStyles, } from '@material-ui/core'; import { userSettingsTranslationRef } from '../../translation'; import { useApi } from '@backstage/core-plugin-api'; import useObservable from 'react-use/lib/useObservable'; - -type TooltipToggleButtonProps = { - children: JSX.Element; - title: string; - value: string; -}; +import { Select } from '@backstage/core-components'; const useStyles = makeStyles(theme => ({ container: { @@ -71,21 +63,6 @@ const useStyles = makeStyles(theme => ({ }, })); -// ToggleButtonGroup uses React.children.map instead of context -// so wrapping with Tooltip breaks ToggleButton functionality. -const TooltipToggleButton = ({ - children, - title, - value, - ...props -}: TooltipToggleButtonProps) => ( - - - {children} - - -); - /** @public */ export const UserSettingsLanguageToggle = () => { const classes = useStyles(); @@ -104,13 +81,21 @@ export const UserSettingsLanguageToggle = () => { return null; } - const handleSetLanguage = ( - _event: React.MouseEvent, - newLanguage: string | undefined, - ) => { + const handleSetLanguage = (newLanguage: string | undefined) => { languageApi.setLanguage(newLanguage); }; + const getLanguageDisplayName = (language: string) => { + try { + const names = new Intl.DisplayNames([language], { + type: 'language', + }); + return names.of(language) || language; + } catch (err) { + return language; + } + }; + return ( { secondary={t('languageToggle.description')} /> - - {languages.map(language => { - return ( - - <>{language} - - ); - })} - +