@backstage/plugin-org-react 0.0.0-nightly-20221105024614

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @backstage/plugin-org-react
+
+## 0.0.0-nightly-20221105024614
+
+### Minor Changes
+
+- e96274f1fe: Implemented the org-react plugin, with it's first component being: a `GroupListPicker` component that will give the user the ability to choose a group
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/plugin-catalog-react@0.0.0-nightly-20221105024614
+  - @backstage/core-components@0.0.0-nightly-20221105024614
+  - @backstage/core-plugin-api@0.0.0-nightly-20221105024614
+  - @backstage/catalog-model@0.0.0-nightly-20221105024614
+  - @backstage/catalog-client@0.0.0-nightly-20221105024614
+  - @backstage/theme@0.2.16

package/README.md

@@ -0,0 +1,30 @@
+# org-react
+
+## features
+
+- Group list picker component
+
+### GroupListPicker
+
+The `GroupListPicker` component displays a select box which also has autocomplete functionality.
+
+To use the `GroupListPicker` component you'll need to import it and add it to your desired place.
+
+```diff
++ import { GroupListPicker } from '@backstage/plugin-org-react';
++ import React, { useState } from 'react';
+
++ const [group, setGroup] = useState<GroupEntity | undefined>();
+
+ <Grid container spacing={3}>
+    <Grid item xs={12}>
++     <GroupListPicker groupTypes={['team']} placeholder='Search for a team' onChange={setGroup}/>
+    </Grid>
+ </Grid>
+```
+
+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.
+- `onChange`: a prop to help the user to give access to the selected group

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { GroupEntity } from '@backstage/catalog-model';
+
+/**
+ * Props for {@link GroupListPicker}.
+ *
+ * @public
+ */
+declare type GroupListPickerProps = {
+    placeholder?: string;
+    groupTypes?: Array<string>;
+    onChange: (value: GroupEntity | undefined) => void;
+};
+/** @public */
+declare const GroupListPicker: (props: GroupListPickerProps) => JSX.Element;
+
+export { GroupListPicker, GroupListPickerProps };

package/dist/index.esm.js

@@ -0,0 +1,121 @@
+import React, { useCallback } from 'react';
+import { catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import useAsync from 'react-use/lib/useAsync';
+import Popover from '@material-ui/core/Popover';
+import { useApi } from '@backstage/core-plugin-api';
+import { ResponseErrorPanel } from '@backstage/core-components';
+import { makeStyles, Button, Typography } from '@material-ui/core';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import PeopleIcon from '@material-ui/icons/People';
+
+const useStyles = makeStyles((theme) => ({
+  btn: {
+    margin: 0,
+    padding: 10,
+    width: "100%",
+    cursor: "pointer",
+    justifyContent: "space-between"
+  },
+  title: {
+    fontSize: "1.5rem",
+    fontStyle: "normal",
+    fontWeight: theme.typography.fontWeightBold,
+    letterSpacing: "-0.25px",
+    lineHeight: "32px",
+    marginBottom: 0,
+    textTransform: "none"
+  },
+  icon: {
+    transform: "scale(1.5)"
+  }
+}));
+const GroupListPickerButton = (props) => {
+  const { handleClick, group } = props;
+  const classes = useStyles();
+  return /* @__PURE__ */ React.createElement(Button, {
+    onClick: handleClick,
+    "data-testid": "group-list-picker-button",
+    "aria-describedby": "group-list-popover",
+    startIcon: /* @__PURE__ */ React.createElement(PeopleIcon, {
+      className: classes.icon
+    }),
+    className: classes.btn,
+    size: "large",
+    endIcon: /* @__PURE__ */ React.createElement(KeyboardArrowDownIcon, {
+      className: classes.icon
+    })
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    className: classes.title
+  }, group));
+};
+
+const GroupListPicker = (props) => {
+  const catalogApi = useApi(catalogApiRef);
+  const { onChange, groupTypes, placeholder = "" } = props;
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [inputValue, setInputValue] = React.useState("");
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  const {
+    loading,
+    error,
+    value: groups
+  } = useAsync(async () => {
+    const groupsList = await catalogApi.getEntities({
+      filter: {
+        kind: "Group",
+        "spec.type": groupTypes || []
+      }
+    });
+    return groupsList.items;
+  }, [catalogApi, groupTypes]);
+  const handleChange = useCallback(
+    (_, v) => {
+      onChange(v != null ? v : void 0);
+    },
+    [onChange]
+  );
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
+      error
+    });
+  }
+  const getHumanEntityRef = (entity) => humanizeEntityRef(entity);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Popover, {
+    anchorEl,
+    open,
+    onClose: handleClose,
+    anchorOrigin: { horizontal: "left", vertical: "bottom" }
+  }, /* @__PURE__ */ React.createElement(Autocomplete, {
+    "data-testid": "group-list-picker-input",
+    loading,
+    options: groups != null ? groups : [],
+    groupBy: (option) => option.spec.type,
+    getOptionLabel: (option) => {
+      var _a, _b;
+      return (_b = (_a = option.spec.profile) == null ? void 0 : _a.displayName) != null ? _b : getHumanEntityRef(option);
+    },
+    inputValue,
+    onInputChange: (_, value) => setInputValue(value),
+    onChange: handleChange,
+    style: { width: "300px" },
+    renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
+      ...params,
+      placeholder,
+      variant: "outlined"
+    })
+  })), /* @__PURE__ */ React.createElement(GroupListPickerButton, {
+    handleClick,
+    group: inputValue
+  }));
+};
+
+export { GroupListPicker };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +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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"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@backstage/plugin-org-react",
+  "version": "0.0.0-nightly-20221105024614",
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "web-library"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/backstage",
+    "directory": "plugins/org-react"
+  },
+  "keywords": [
+    "backstage"
+  ],
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/catalog-client": "^0.0.0-nightly-20221105024614",
+    "@backstage/catalog-model": "^0.0.0-nightly-20221105024614",
+    "@backstage/core-components": "^0.0.0-nightly-20221105024614",
+    "@backstage/core-plugin-api": "^0.0.0-nightly-20221105024614",
+    "@backstage/plugin-catalog-react": "^0.0.0-nightly-20221105024614",
+    "@backstage/theme": "^0.2.16",
+    "@material-ui/core": "^4.9.13",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "react-use": "^17.2.4"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.0.0-nightly-20221105024614",
+    "@backstage/core-app-api": "^0.0.0-nightly-20221105024614",
+    "@backstage/dev-utils": "^0.0.0-nightly-20221105024614",
+    "@backstage/test-utils": "^0.0.0-nightly-20221105024614",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/node": "*",
+    "cross-fetch": "^3.1.5",
+    "msw": "^0.47.0"
+  },
+  "files": [
+    "dist"
+  ]
+}