From 42469cf14ecddafb27a5453ea1a54b3a98a7c0cf Mon Sep 17 00:00:00 2001 From: Mathias Bronner Date: Thu, 17 Nov 2022 11:57:38 +0100 Subject: [PATCH 1/6] chore: Bug fixes and adding the possibility to add a default value Signed-off-by: Mathias Bronner Signed-off-by: Mathias Bronner --- .changeset/nasty-pens-march.md | 5 +++++ plugins/org-react/README.md | 5 +++-- .../src/components/GroupListPicker/GroupListPicker.tsx | 8 ++++++-- .../components/GroupListPicker/GroupListPickerButton.tsx | 7 ++++++- 4 files changed, 20 insertions(+), 5 deletions(-) create mode 100644 .changeset/nasty-pens-march.md diff --git a/.changeset/nasty-pens-march.md b/.changeset/nasty-pens-march.md new file mode 100644 index 0000000000..feee28fad4 --- /dev/null +++ b/.changeset/nasty-pens-march.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org-react': patch +--- + +Bug fixes and adding the possibility to add a default value. Fixes: Vertical size jump on text entry, left align for text, selecting a value closes the popup, autofocus on the popup when opening diff --git a/plugins/org-react/README.md b/plugins/org-react/README.md index 91c7ebf48a..1f87a5e7e6 100644 --- a/plugins/org-react/README.md +++ b/plugins/org-react/README.md @@ -18,13 +18,14 @@ To use the `GroupListPicker` component you'll need to import it and add it to yo -+ ++ ``` -The `GroupListPicker` comes with three props: +The `GroupListPicker` comes with four 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. - `onChange`: a prop to help the user to give access to the selected group +- `defaultValue`: gives the user the option to define a default value that will be shown initially before making a selection diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx index 1296c520c3..a47c346390 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx @@ -34,6 +34,7 @@ import { GroupListPickerButton } from './GroupListPickerButton'; * @public */ export type GroupListPickerProps = { + defaultValue?: string; placeholder?: string; groupTypes?: Array; onChange: (value: GroupEntity | undefined) => void; @@ -43,9 +44,9 @@ export type GroupListPickerProps = { export const GroupListPicker = (props: GroupListPickerProps) => { const catalogApi = useApi(catalogApiRef); - const { onChange, groupTypes, placeholder = '' } = props; + const { onChange, groupTypes, placeholder = '', defaultValue = '' } = props; const [anchorEl, setAnchorEl] = React.useState(null); - const [inputValue, setInputValue] = React.useState(''); + const [inputValue, setInputValue] = React.useState(defaultValue); const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); @@ -75,6 +76,7 @@ export const GroupListPicker = (props: GroupListPickerProps) => { const handleChange = useCallback( (_, v: GroupEntity | null) => { onChange(v ?? undefined); + setAnchorEl(null); }, [onChange], ); @@ -108,6 +110,8 @@ export const GroupListPicker = (props: GroupListPickerProps) => { renderInput={params => ( diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx index 149bf778b1..3f9528b9bd 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx @@ -27,13 +27,18 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ width: '100%', cursor: 'pointer', justifyContent: 'space-between', + '& p': { + width: '100%', + textAlign: 'left', + marginLeft: 4, + }, }, title: { fontSize: '1.5rem', fontStyle: 'normal', fontWeight: theme.typography.fontWeightBold, letterSpacing: '-0.25px', - lineHeight: '32px', + height: '32px', marginBottom: 0, textTransform: 'none', }, From 4cb5066828163c7b91e855cd4760ffbdc5c7d23b Mon Sep 17 00:00:00 2001 From: Mathias Bronner Date: Thu, 17 Nov 2022 16:31:43 +0100 Subject: [PATCH 2/6] chore: Fix changeset spelling and generate api reports Signed-off-by: Mathias Bronner --- .changeset/fair-walls-talk.md | 5 +++++ plugins/org-react/api-report.md | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/fair-walls-talk.md diff --git a/.changeset/fair-walls-talk.md b/.changeset/fair-walls-talk.md new file mode 100644 index 0000000000..3e3ee26160 --- /dev/null +++ b/.changeset/fair-walls-talk.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org-react': patch +--- + +Bug fixes and adding the possibility to add a default value for the `GroupListPicker`. Fixes: Vertical size jump on text entry, left align for text, selecting a value closes the popup, auto focus on the popup when opening diff --git a/plugins/org-react/api-report.md b/plugins/org-react/api-report.md index 60cd6944d0..48bd090f64 100644 --- a/plugins/org-react/api-report.md +++ b/plugins/org-react/api-report.md @@ -12,6 +12,7 @@ export const GroupListPicker: (props: GroupListPickerProps) => JSX.Element; // @public export type GroupListPickerProps = { + defaultValue?: string; placeholder?: string; groupTypes?: Array; onChange: (value: GroupEntity | undefined) => void; From e4a838e78226196da10be092b4307d67504023cd Mon Sep 17 00:00:00 2001 From: Mathias Bronner Date: Thu, 17 Nov 2022 16:38:05 +0100 Subject: [PATCH 3/6] chore: Fix changeset spelling again Signed-off-by: Mathias Bronner Signed-off-by: Mathias Bronner --- .changeset/nasty-pens-march.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/nasty-pens-march.md b/.changeset/nasty-pens-march.md index feee28fad4..ca11e26874 100644 --- a/.changeset/nasty-pens-march.md +++ b/.changeset/nasty-pens-march.md @@ -2,4 +2,4 @@ '@backstage/plugin-org-react': patch --- -Bug fixes and adding the possibility to add a default value. Fixes: Vertical size jump on text entry, left align for text, selecting a value closes the popup, autofocus on the popup when opening +Bug fixes and adding the possibility to add a default value. Fixes: Vertical size jump on text entry, left align for text, selecting a value closes the popup, auto focus on the popup when opening From 6ae775870c19f53d4c735e3e8f3c7ce6d3bb9364 Mon Sep 17 00:00:00 2001 From: Mathias Bronner Date: Thu, 17 Nov 2022 17:05:32 +0100 Subject: [PATCH 4/6] add GroupListPicker to the changeset text Signed-off-by: Mathias Bronner Signed-off-by: Mathias Bronner --- .changeset/nasty-pens-march.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/nasty-pens-march.md b/.changeset/nasty-pens-march.md index ca11e26874..ae2aab3afc 100644 --- a/.changeset/nasty-pens-march.md +++ b/.changeset/nasty-pens-march.md @@ -2,4 +2,4 @@ '@backstage/plugin-org-react': patch --- -Bug fixes and adding the possibility to add a default value. Fixes: Vertical size jump on text entry, left align for text, selecting a value closes the popup, auto focus on the popup when opening +Bug fixes and adding the possibility to add a default value for `GroupListPicker`. Fixes: Vertical size jump on text entry, left align for text, selecting a value closes the popup, auto focus on the popup when opening From 27959107680c41120c269c57d237b54612e6c3fb Mon Sep 17 00:00:00 2001 From: Mathias Bronner Date: Thu, 17 Nov 2022 16:48:10 +0100 Subject: [PATCH 5/6] Delete nasty-pens-march.md Signed-off-by: Mathias Bronner --- .changeset/nasty-pens-march.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/nasty-pens-march.md diff --git a/.changeset/nasty-pens-march.md b/.changeset/nasty-pens-march.md deleted file mode 100644 index ae2aab3afc..0000000000 --- a/.changeset/nasty-pens-march.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/plugin-org-react': patch ---- - -Bug fixes and adding the possibility to add a default value for `GroupListPicker`. Fixes: Vertical size jump on text entry, left align for text, selecting a value closes the popup, auto focus on the popup when opening From 3b39a1209a0184f85bfffce2eac668bae84d6bb4 Mon Sep 17 00:00:00 2001 From: Mathias Bronner Date: Mon, 21 Nov 2022 16:48:01 +0100 Subject: [PATCH 6/6] chore: fix PR feedback Signed-off-by: Mathias Bronner --- .../GroupListPicker/GroupListPickerButton.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx index 3f9528b9bd..01ffe7e58b 100644 --- a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx +++ b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx @@ -22,25 +22,22 @@ import PeopleIcon from '@material-ui/icons/People'; const useStyles = makeStyles((theme: BackstageTheme) => ({ btn: { - margin: 0, - padding: 10, + padding: '10px', width: '100%', cursor: 'pointer', justifyContent: 'space-between', - '& p': { - width: '100%', - textAlign: 'left', - marginLeft: 4, - }, }, title: { fontSize: '1.5rem', fontStyle: 'normal', fontWeight: theme.typography.fontWeightBold, - letterSpacing: '-0.25px', height: '32px', + letterSpacing: '-0.25px', marginBottom: 0, + marginLeft: '4px', + textAlign: 'left', textTransform: 'none', + width: '100%', }, icon: { transform: 'scale(1.5)',