diff --git a/plugins/org-react/README.md b/plugins/org-react/README.md index 832e41bddd..91c7ebf48a 100644 --- a/plugins/org-react/README.md +++ b/plugins/org-react/README.md @@ -23,7 +23,7 @@ To use the `GroupListPicker` component you'll need to import it and add it to yo ``` -The `GroupListPicker` comes with three optional props: +The `GroupListPicker` comes with three props: - `groupTypes`: gives the user the option which group types the component should load. If no value is provided all group types will be loaded in; - `placeholder`: the placeholder that the select box in the component should display. This might be helpful in informing your users what the functionality of the component is. diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.test.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.test.tsx index a011e35333..b8a499b8fe 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.test.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.test.tsx @@ -64,7 +64,7 @@ const apis = TestApiRegistry.from([catalogApiRef, mockCatalogApi]); describe('', () => { it('can choose a group', async () => { - const { getByText, queryByText, getByTestId } = render( + const { getByText, getByTestId } = render( ', () => { const input = getByTestId('group-list-picker-input').querySelector('input'); fireEvent.change(input as HTMLElement, { target: { value: 'GR' } }); - await waitFor(() => { - expect(queryByText('Group A')).toBeInTheDocument(); + await waitFor(async () => { + expect(getByText('Group A')).toBeInTheDocument(); fireEvent.click(getByText('Group A')); expect(getByText('Group A')).toBeInTheDocument(); }); diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx index f08565fbfa..1296c520c3 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx @@ -83,8 +83,7 @@ export const GroupListPicker = (props: GroupListPickerProps) => { return ; } - const getHumanEntityRef = (entity: Entity) => - humanizeEntityRef(entity, { defaultNamespace: false }); + const getHumanEntityRef = (entity: Entity) => humanizeEntityRef(entity); return ( <> diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx index 63fc9a983e..149bf778b1 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx @@ -16,18 +16,17 @@ import React from 'react'; import { BackstageTheme } from '@backstage/theme'; -import { Box, makeStyles, Typography } from '@material-ui/core'; +import { makeStyles, Typography, Button } from '@material-ui/core'; import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; import PeopleIcon from '@material-ui/icons/People'; const useStyles = makeStyles((theme: BackstageTheme) => ({ btn: { - backgroundColor: 'transparent', - border: 'none', margin: 0, - padding: 0, + padding: 10, width: '100%', cursor: 'pointer', + justifyContent: 'space-between', }, title: { fontSize: '1.5rem', @@ -36,12 +35,10 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ letterSpacing: '-0.25px', lineHeight: '32px', marginBottom: 0, + textTransform: 'none', }, - peopleIcon: { - marginRight: theme.spacing(1), - }, - arrowDownIcon: { - marginLeft: 'auto', + icon: { + transform: 'scale(1.5)', }, })); @@ -56,22 +53,16 @@ export const GroupListPickerButton = (props: GroupListPickerButtonProps) => { const classes = useStyles(); return ( - + {group} + ); }; diff --git a/plugins/org-react/src/routes.ts b/plugins/org-react/src/routes.ts deleted file mode 100644 index 80acc0eb48..0000000000 --- a/plugins/org-react/src/routes.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* - * Copyright 2022 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 { createRouteRef } from '@backstage/core-plugin-api'; - -export const rootRouteRef = createRouteRef({ - id: 'org-react', -});