@backstage/plugin-org-react 0.1.0 → 0.1.1-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @backstage/plugin-org-react
2
2
 
3
+ ## 0.1.1-next.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+ - @backstage/core-components@0.12.1-next.1
9
+ - @backstage/core-plugin-api@1.1.1-next.1
10
+ - @backstage/plugin-catalog-react@1.2.2-next.1
11
+ - @backstage/catalog-client@1.2.0-next.1
12
+ - @backstage/catalog-model@1.1.4-next.1
13
+ - @backstage/theme@0.2.16
14
+
15
+ ## 0.1.1-next.0
16
+
17
+ ### Patch Changes
18
+
19
+ - 4cb5066828: 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
20
+ - 3280711113: Updated dependency `msw` to `^0.49.0`.
21
+ - Updated dependencies
22
+ - @backstage/catalog-client@1.2.0-next.0
23
+ - @backstage/core-components@0.12.1-next.0
24
+ - @backstage/core-plugin-api@1.1.1-next.0
25
+ - @backstage/plugin-catalog-react@1.2.2-next.0
26
+ - @backstage/catalog-model@1.1.4-next.0
27
+ - @backstage/theme@0.2.16
28
+
3
29
  ## 0.1.0
4
30
 
5
31
  ### Minor Changes
package/README.md CHANGED
@@ -18,13 +18,14 @@ To use the `GroupListPicker` component you'll need to import it and add it to yo
18
18
 
19
19
  <Grid container spacing={3}>
20
20
  <Grid item xs={12}>
21
- + <GroupListPicker groupTypes={['team']} placeholder='Search for a team' onChange={setGroup}/>
21
+ + <GroupListPicker groupTypes={['team']} placeholder='Search for a team' onChange={setGroup} defaultValue='Team A'/>
22
22
  </Grid>
23
23
  </Grid>
24
24
  ```
25
25
 
26
- The `GroupListPicker` comes with three props:
26
+ The `GroupListPicker` comes with four props:
27
27
 
28
28
  - `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;
29
29
  - `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.
30
30
  - `onChange`: a prop to help the user to give access to the selected group
31
+ - `defaultValue`: gives the user the option to define a default value that will be shown initially before making a selection
package/dist/index.d.ts CHANGED
@@ -7,6 +7,7 @@ import { GroupEntity } from '@backstage/catalog-model';
7
7
  * @public
8
8
  */
9
9
  declare type GroupListPickerProps = {
10
+ defaultValue?: string;
10
11
  placeholder?: string;
11
12
  groupTypes?: Array<string>;
12
13
  onChange: (value: GroupEntity | undefined) => void;
package/dist/index.esm.js CHANGED
@@ -12,8 +12,7 @@ import PeopleIcon from '@material-ui/icons/People';
12
12
 
13
13
  const useStyles = makeStyles((theme) => ({
14
14
  btn: {
15
- margin: 0,
16
- padding: 10,
15
+ padding: "10px",
17
16
  width: "100%",
18
17
  cursor: "pointer",
19
18
  justifyContent: "space-between"
@@ -22,10 +21,13 @@ const useStyles = makeStyles((theme) => ({
22
21
  fontSize: "1.5rem",
23
22
  fontStyle: "normal",
24
23
  fontWeight: theme.typography.fontWeightBold,
24
+ height: "32px",
25
25
  letterSpacing: "-0.25px",
26
- lineHeight: "32px",
27
26
  marginBottom: 0,
28
- textTransform: "none"
27
+ marginLeft: "4px",
28
+ textAlign: "left",
29
+ textTransform: "none",
30
+ width: "100%"
29
31
  },
30
32
  icon: {
31
33
  transform: "scale(1.5)"
@@ -34,28 +36,26 @@ const useStyles = makeStyles((theme) => ({
34
36
  const GroupListPickerButton = (props) => {
35
37
  const { handleClick, group } = props;
36
38
  const classes = useStyles();
37
- return /* @__PURE__ */ React.createElement(Button, {
38
- onClick: handleClick,
39
- "data-testid": "group-list-picker-button",
40
- "aria-describedby": "group-list-popover",
41
- startIcon: /* @__PURE__ */ React.createElement(PeopleIcon, {
42
- className: classes.icon
43
- }),
44
- className: classes.btn,
45
- size: "large",
46
- endIcon: /* @__PURE__ */ React.createElement(KeyboardArrowDownIcon, {
47
- className: classes.icon
48
- })
49
- }, /* @__PURE__ */ React.createElement(Typography, {
50
- className: classes.title
51
- }, group));
39
+ return /* @__PURE__ */ React.createElement(
40
+ Button,
41
+ {
42
+ onClick: handleClick,
43
+ "data-testid": "group-list-picker-button",
44
+ "aria-describedby": "group-list-popover",
45
+ startIcon: /* @__PURE__ */ React.createElement(PeopleIcon, { className: classes.icon }),
46
+ className: classes.btn,
47
+ size: "large",
48
+ endIcon: /* @__PURE__ */ React.createElement(KeyboardArrowDownIcon, { className: classes.icon })
49
+ },
50
+ /* @__PURE__ */ React.createElement(Typography, { className: classes.title }, group)
51
+ );
52
52
  };
53
53
 
54
54
  const GroupListPicker = (props) => {
55
55
  const catalogApi = useApi(catalogApiRef);
56
- const { onChange, groupTypes, placeholder = "" } = props;
56
+ const { onChange, groupTypes, placeholder = "", defaultValue = "" } = props;
57
57
  const [anchorEl, setAnchorEl] = React.useState(null);
58
- const [inputValue, setInputValue] = React.useState("");
58
+ const [inputValue, setInputValue] = React.useState(defaultValue);
59
59
  const handleClick = (event) => {
60
60
  setAnchorEl(event.currentTarget);
61
61
  };
@@ -79,42 +79,49 @@ const GroupListPicker = (props) => {
79
79
  const handleChange = useCallback(
80
80
  (_, v) => {
81
81
  onChange(v != null ? v : void 0);
82
+ setAnchorEl(null);
82
83
  },
83
84
  [onChange]
84
85
  );
85
86
  if (error) {
86
- return /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
87
- error
88
- });
87
+ return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error });
89
88
  }
90
89
  const getHumanEntityRef = (entity) => humanizeEntityRef(entity);
91
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Popover, {
92
- anchorEl,
93
- open,
94
- onClose: handleClose,
95
- anchorOrigin: { horizontal: "left", vertical: "bottom" }
96
- }, /* @__PURE__ */ React.createElement(Autocomplete, {
97
- "data-testid": "group-list-picker-input",
98
- loading,
99
- options: groups != null ? groups : [],
100
- groupBy: (option) => option.spec.type,
101
- getOptionLabel: (option) => {
102
- var _a, _b;
103
- return (_b = (_a = option.spec.profile) == null ? void 0 : _a.displayName) != null ? _b : getHumanEntityRef(option);
90
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
91
+ Popover,
92
+ {
93
+ anchorEl,
94
+ open,
95
+ onClose: handleClose,
96
+ anchorOrigin: { horizontal: "left", vertical: "bottom" }
104
97
  },
105
- inputValue,
106
- onInputChange: (_, value) => setInputValue(value),
107
- onChange: handleChange,
108
- style: { width: "300px" },
109
- renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
110
- ...params,
111
- placeholder,
112
- variant: "outlined"
113
- })
114
- })), /* @__PURE__ */ React.createElement(GroupListPickerButton, {
115
- handleClick,
116
- group: inputValue
117
- }));
98
+ /* @__PURE__ */ React.createElement(
99
+ Autocomplete,
100
+ {
101
+ "data-testid": "group-list-picker-input",
102
+ loading,
103
+ options: groups != null ? groups : [],
104
+ groupBy: (option) => option.spec.type,
105
+ getOptionLabel: (option) => {
106
+ var _a, _b;
107
+ return (_b = (_a = option.spec.profile) == null ? void 0 : _a.displayName) != null ? _b : getHumanEntityRef(option);
108
+ },
109
+ inputValue,
110
+ onInputChange: (_, value) => setInputValue(value),
111
+ onChange: handleChange,
112
+ style: { width: "300px" },
113
+ renderInput: (params) => /* @__PURE__ */ React.createElement(
114
+ TextField,
115
+ {
116
+ ...params,
117
+ autoFocus: true,
118
+ placeholder,
119
+ variant: "outlined"
120
+ }
121
+ )
122
+ }
123
+ )
124
+ ), /* @__PURE__ */ React.createElement(GroupListPickerButton, { handleClick, group: inputValue }));
118
125
  };
119
126
 
120
127
  export { GroupListPicker };
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../src/components/GroupListPicker/GroupListPickerButton.tsx","../src/components/GroupListPicker/GroupListPicker.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { BackstageTheme } from '@backstage/theme';\nimport { makeStyles, Typography, Button } from '@material-ui/core';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport PeopleIcon from '@material-ui/icons/People';\n\nconst useStyles = makeStyles((theme: BackstageTheme) => ({\n btn: {\n margin: 0,\n padding: 10,\n width: '100%',\n cursor: 'pointer',\n justifyContent: 'space-between',\n },\n title: {\n fontSize: '1.5rem',\n fontStyle: 'normal',\n fontWeight: theme.typography.fontWeightBold,\n letterSpacing: '-0.25px',\n lineHeight: '32px',\n marginBottom: 0,\n textTransform: 'none',\n },\n icon: {\n transform: 'scale(1.5)',\n },\n}));\n\ntype GroupListPickerButtonProps = {\n handleClick: (event: React.MouseEvent<HTMLElement>) => void;\n group: string | undefined;\n};\n\n/** @public */\nexport const GroupListPickerButton = (props: GroupListPickerButtonProps) => {\n const { handleClick, group } = props;\n const classes = useStyles();\n\n return (\n <Button\n onClick={handleClick}\n data-testid=\"group-list-picker-button\"\n aria-describedby=\"group-list-popover\"\n startIcon={<PeopleIcon className={classes.icon} />}\n className={classes.btn}\n size=\"large\"\n endIcon={<KeyboardArrowDownIcon className={classes.icon} />}\n >\n <Typography className={classes.title}>{group}</Typography>\n </Button>\n );\n};\n","/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback } from 'react';\nimport {\n catalogApiRef,\n humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport useAsync from 'react-use/lib/useAsync';\nimport Popover from '@material-ui/core/Popover';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { ResponseErrorPanel } from '@backstage/core-components';\nimport { Entity, GroupEntity } from '@backstage/catalog-model';\nimport { GroupListPickerButton } from './GroupListPickerButton';\n\n/**\n * Props for {@link GroupListPicker}.\n *\n * @public\n */\nexport type GroupListPickerProps = {\n placeholder?: string;\n groupTypes?: Array<string>;\n onChange: (value: GroupEntity | undefined) => void;\n};\n\n/** @public */\nexport const GroupListPicker = (props: GroupListPickerProps) => {\n const catalogApi = useApi(catalogApiRef);\n\n const { onChange, groupTypes, placeholder = '' } = props;\n const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);\n const [inputValue, setInputValue] = React.useState('');\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n const open = Boolean(anchorEl);\n\n const {\n loading,\n error,\n value: groups,\n } = useAsync(async () => {\n const groupsList = await catalogApi.getEntities({\n filter: {\n kind: 'Group',\n 'spec.type': groupTypes || [],\n },\n });\n\n return groupsList.items as GroupEntity[];\n }, [catalogApi, groupTypes]);\n\n const handleChange = useCallback(\n (_, v: GroupEntity | null) => {\n onChange(v ?? undefined);\n },\n [onChange],\n );\n\n if (error) {\n return <ResponseErrorPanel error={error} />;\n }\n\n const getHumanEntityRef = (entity: Entity) => humanizeEntityRef(entity);\n\n return (\n <>\n <Popover\n anchorEl={anchorEl}\n open={open}\n onClose={handleClose}\n anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}\n >\n <Autocomplete\n data-testid=\"group-list-picker-input\"\n loading={loading}\n options={groups ?? []}\n groupBy={option => option.spec.type}\n getOptionLabel={option =>\n option.spec.profile?.displayName ?? getHumanEntityRef(option)\n }\n inputValue={inputValue}\n onInputChange={(_, value) => setInputValue(value)}\n onChange={handleChange}\n style={{ width: '300px' }}\n renderInput={params => (\n <TextField\n {...params}\n placeholder={placeholder}\n variant=\"outlined\"\n />\n )}\n />\n </Popover>\n <GroupListPickerButton handleClick={handleClick} group={inputValue} />\n </>\n );\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.esm.js","sources":["../src/components/GroupListPicker/GroupListPickerButton.tsx","../src/components/GroupListPicker/GroupListPicker.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { BackstageTheme } from '@backstage/theme';\nimport { makeStyles, Typography, Button } from '@material-ui/core';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport PeopleIcon from '@material-ui/icons/People';\n\nconst useStyles = makeStyles((theme: BackstageTheme) => ({\n btn: {\n padding: '10px',\n width: '100%',\n cursor: 'pointer',\n justifyContent: 'space-between',\n },\n title: {\n fontSize: '1.5rem',\n fontStyle: 'normal',\n fontWeight: theme.typography.fontWeightBold,\n height: '32px',\n letterSpacing: '-0.25px',\n marginBottom: 0,\n marginLeft: '4px',\n textAlign: 'left',\n textTransform: 'none',\n width: '100%',\n },\n icon: {\n transform: 'scale(1.5)',\n },\n}));\n\ntype GroupListPickerButtonProps = {\n handleClick: (event: React.MouseEvent<HTMLElement>) => void;\n group: string | undefined;\n};\n\n/** @public */\nexport const GroupListPickerButton = (props: GroupListPickerButtonProps) => {\n const { handleClick, group } = props;\n const classes = useStyles();\n\n return (\n <Button\n onClick={handleClick}\n data-testid=\"group-list-picker-button\"\n aria-describedby=\"group-list-popover\"\n startIcon={<PeopleIcon className={classes.icon} />}\n className={classes.btn}\n size=\"large\"\n endIcon={<KeyboardArrowDownIcon className={classes.icon} />}\n >\n <Typography className={classes.title}>{group}</Typography>\n </Button>\n );\n};\n","/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback } from 'react';\nimport {\n catalogApiRef,\n humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport useAsync from 'react-use/lib/useAsync';\nimport Popover from '@material-ui/core/Popover';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { ResponseErrorPanel } from '@backstage/core-components';\nimport { Entity, GroupEntity } from '@backstage/catalog-model';\nimport { GroupListPickerButton } from './GroupListPickerButton';\n\n/**\n * Props for {@link GroupListPicker}.\n *\n * @public\n */\nexport type GroupListPickerProps = {\n defaultValue?: string;\n placeholder?: string;\n groupTypes?: Array<string>;\n onChange: (value: GroupEntity | undefined) => void;\n};\n\n/** @public */\nexport const GroupListPicker = (props: GroupListPickerProps) => {\n const catalogApi = useApi(catalogApiRef);\n\n const { onChange, groupTypes, placeholder = '', defaultValue = '' } = props;\n const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);\n const [inputValue, setInputValue] = React.useState(defaultValue);\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n const open = Boolean(anchorEl);\n\n const {\n loading,\n error,\n value: groups,\n } = useAsync(async () => {\n const groupsList = await catalogApi.getEntities({\n filter: {\n kind: 'Group',\n 'spec.type': groupTypes || [],\n },\n });\n\n return groupsList.items as GroupEntity[];\n }, [catalogApi, groupTypes]);\n\n const handleChange = useCallback(\n (_, v: GroupEntity | null) => {\n onChange(v ?? undefined);\n setAnchorEl(null);\n },\n [onChange],\n );\n\n if (error) {\n return <ResponseErrorPanel error={error} />;\n }\n\n const getHumanEntityRef = (entity: Entity) => humanizeEntityRef(entity);\n\n return (\n <>\n <Popover\n anchorEl={anchorEl}\n open={open}\n onClose={handleClose}\n anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}\n >\n <Autocomplete\n data-testid=\"group-list-picker-input\"\n loading={loading}\n options={groups ?? []}\n groupBy={option => option.spec.type}\n getOptionLabel={option =>\n option.spec.profile?.displayName ?? getHumanEntityRef(option)\n }\n inputValue={inputValue}\n onInputChange={(_, value) => setInputValue(value)}\n onChange={handleChange}\n style={{ width: '300px' }}\n renderInput={params => (\n <TextField\n {...params}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus\n placeholder={placeholder}\n variant=\"outlined\"\n />\n )}\n />\n </Popover>\n <GroupListPickerButton handleClick={handleClick} group={inputValue} />\n </>\n );\n};\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@backstage/plugin-org-react",
3
- "version": "0.1.0",
3
+ "version": "0.1.1-next.1",
4
4
  "main": "dist/index.esm.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "license": "Apache-2.0",
@@ -30,11 +30,11 @@
30
30
  "postpack": "backstage-cli package postpack"
31
31
  },
32
32
  "dependencies": {
33
- "@backstage/catalog-client": "^1.1.2",
34
- "@backstage/catalog-model": "^1.1.3",
35
- "@backstage/core-components": "^0.12.0",
36
- "@backstage/core-plugin-api": "^1.1.0",
37
- "@backstage/plugin-catalog-react": "^1.2.1",
33
+ "@backstage/catalog-client": "^1.2.0-next.1",
34
+ "@backstage/catalog-model": "^1.1.4-next.1",
35
+ "@backstage/core-components": "^0.12.1-next.1",
36
+ "@backstage/core-plugin-api": "^1.1.1-next.1",
37
+ "@backstage/plugin-catalog-react": "^1.2.2-next.1",
38
38
  "@backstage/theme": "^0.2.16",
39
39
  "@material-ui/core": "^4.9.13",
40
40
  "@material-ui/icons": "^4.9.1",
@@ -45,16 +45,16 @@
45
45
  "react": "^16.13.1 || ^17.0.0"
46
46
  },
47
47
  "devDependencies": {
48
- "@backstage/cli": "^0.21.0",
49
- "@backstage/core-app-api": "^1.2.0",
50
- "@backstage/dev-utils": "^1.0.8",
51
- "@backstage/test-utils": "^1.2.2",
48
+ "@backstage/cli": "^0.21.2-next.1",
49
+ "@backstage/core-app-api": "^1.2.1-next.1",
50
+ "@backstage/dev-utils": "^1.0.9-next.1",
51
+ "@backstage/test-utils": "^1.2.3-next.1",
52
52
  "@testing-library/jest-dom": "^5.10.1",
53
53
  "@testing-library/react": "^12.1.3",
54
54
  "@testing-library/user-event": "^14.0.0",
55
55
  "@types/node": "*",
56
56
  "cross-fetch": "^3.1.5",
57
- "msw": "^0.48.0"
57
+ "msw": "^0.49.0"
58
58
  },
59
59
  "files": [
60
60
  "dist"