feat: create new plugin called org-react

Signed-off-by: djamaile <rdjamaile@gmail.com>

plugins/org-react/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

plugins/org-react/README.md

@@ -0,0 +1,13 @@
+# org-react
+
+Welcome to the org-react plugin!
+
+_This plugin was created through the Backstage CLI_
+
+## Getting started
+
+Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/org-react](http://localhost:3000/org-react).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
+It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.

plugins/org-react/api-report.md

@@ -0,0 +1,15 @@
+## API Report File for "@backstage/plugin-org-react"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+// Warning: (ae-forgotten-export) The symbol "GroupListPickerProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-missing-release-tag) "GroupListPicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const GroupListPicker: (props: GroupListPickerProps) => JSX.Element;
+
+// (No @packageDocumentation comment for this package)
+```

plugins/org-react/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@backstage/plugin-org-react",
+  "version": "0.0.0",
+  "main": "src/index.ts",
+  "types": "src/index.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": "workspace:^",
+    "@backstage/catalog-model": "workspace:^",
+    "@backstage/core-components": "workspace:^",
+    "@backstage/core-plugin-api": "workspace:^",
+    "@backstage/plugin-catalog-react": "workspace:^",
+    "@backstage/theme": "workspace:^",
+    "@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": "workspace:^",
+    "@backstage/core-app-api": "workspace:^",
+    "@backstage/dev-utils": "workspace:^",
+    "@backstage/test-utils": "workspace:^",
+    "@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"
+  ]
+}

plugins/org-react/src/components/GroupListPicker/GroupListPicker.test.tsx

@@ -0,0 +1,100 @@
+/*
+ * 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 React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { ApiProvider } from '@backstage/core-app-api';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { CatalogApi } from '@backstage/catalog-client';
+import { GroupListPicker } from '../GroupListPicker';
+import { GroupEntity } from '@backstage/catalog-model';
+import { TestApiRegistry } from '@backstage/test-utils';
+
+const mockGroups: GroupEntity[] = [
+  {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Group',
+    metadata: {
+      namespace: 'default',
+      name: 'group-a',
+    },
+    spec: {
+      type: 'org',
+      profile: {
+        displayName: 'Group A',
+      },
+      children: [],
+    },
+  },
+  {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Group',
+    metadata: {
+      namespace: 'default',
+      name: 'group-b',
+    },
+    spec: {
+      type: 'department',
+      profile: {
+        displayName: 'Group B',
+      },
+      children: [],
+    },
+  },
+];
+
+const mockCatalogApi = {
+  getEntities: () => Promise.resolve({ items: mockGroups }),
+} as Partial<CatalogApi>;
+
+const apis = TestApiRegistry.from([catalogApiRef, mockCatalogApi]);
+
+describe('<GroupListPicker />', () => {
+  it('renders group list picker', () => {
+    const { queryByText } = render(
+      <ApiProvider apis={apis}>
+        <GroupListPicker
+          placeholder="Search"
+          groupTypes={['org', 'department']}
+          defaultGroup="test"
+        />
+      </ApiProvider>,
+    );
+
+    expect(queryByText('test')).toBeInTheDocument();
+  });
+
+  it('can choose a group', async () => {
+    const { getByText, queryByText, getByTestId } = render(
+      <ApiProvider apis={apis}>
+        <GroupListPicker
+          placeholder="Search"
+          groupTypes={['org', 'department']}
+        />
+      </ApiProvider>,
+    );
+
+    fireEvent.click(getByTestId('group-list-picker-button'));
+    const input = getByTestId('group-list-picker-input').querySelector('input');
+    fireEvent.change(input as HTMLElement, { target: { value: 'GR' } });
+
+    await waitFor(() => {
+      expect(queryByText('Group A')).toBeInTheDocument();
+      fireEvent.click(getByText('Group A'));
+      expect(getByText('Group A')).toBeInTheDocument();
+    });
+  });
+});

plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx

@@ -0,0 +1,123 @@
+/*
+ * 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 React 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 { Entity, GroupEntity } from '@backstage/catalog-model';
+import { GroupListPickerButton } from './GroupListPickerButton';
+
+/**
+ * Props for {@link GroupListPicker}.
+ *
+ * @public
+ */
+export type GroupListPickerProps = {
+  placeholder?: string;
+  groupTypes?: Array<string>;
+  defaultGroup?: string;
+};
+
+/** @public */
+export const GroupListPicker = (props: GroupListPickerProps) => {
+  const catalogApi = useApi(catalogApiRef);
+
+  const { groupTypes, defaultGroup = '', placeholder = '' } = props;
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+  const [inputValue, setInputValue] = React.useState('');
+  const [group, setGroup] = React.useState(defaultGroup);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    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 as GroupEntity[];
+  }, [catalogApi]);
+
+  if (error) {
+    return <ResponseErrorPanel error={error} />;
+  }
+
+  const getHumanEntityRef = (entity: Entity) =>
+    humanizeEntityRef(entity, { defaultNamespace: false });
+
+  return (
+    <>
+      <Popover
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+      >
+        <Autocomplete
+          data-testid="group-list-picker-input"
+          loading={loading}
+          options={groups ?? []}
+          groupBy={option => option.spec.type}
+          getOptionLabel={option =>
+            option.spec.profile?.displayName ?? getHumanEntityRef(option)
+          }
+          inputValue={inputValue}
+          onInputChange={(_, value) => setInputValue(value)}
+          onChange={(_, newValue) => {
+            if (newValue) {
+              setGroup(
+                newValue.spec.profile?.displayName ??
+                  getHumanEntityRef(newValue),
+              );
+            }
+            setInputValue('');
+          }}
+          style={{ width: '300px' }}
+          renderInput={params => (
+            <TextField
+              {...params}
+              placeholder={placeholder}
+              variant="outlined"
+            />
+          )}
+        />
+      </Popover>
+      <GroupListPickerButton handleClick={handleClick} group={group} />
+    </>
+  );
+};

plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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 React from 'react';
+import { BackstageTheme } from '@backstage/theme';
+import { Box, makeStyles, Typography } 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,
+    width: '100%',
+    cursor: 'pointer',
+  },
+  title: {
+    fontSize: '1.5rem',
+    fontStyle: 'normal',
+    fontWeight: theme.typography.fontWeightBold,
+    letterSpacing: '-0.25px',
+    lineHeight: '32px',
+    marginBottom: 0,
+  },
+  peopleIcon: {
+    marginRight: theme.spacing(1),
+  },
+  arrowDownIcon: {
+    marginLeft: 'auto',
+  },
+}));
+
+type GroupListPickerButtonProps = {
+  handleClick: (event: React.MouseEvent<HTMLElement>) => void;
+  group: string;
+};
+
+/** @public */
+export const GroupListPickerButton = (props: GroupListPickerButtonProps) => {
+  const { handleClick, group } = props;
+  const classes = useStyles();
+
+  return (
+    <button
+      onClick={handleClick}
+      className={classes.btn}
+      data-testid="group-list-picker-button"
+      aria-describedby="group-list-popover"
+    >
+      <Box display="flex" flexDirection="row" alignItems="center">
+        <PeopleIcon fontSize="large" className={classes.peopleIcon} />
+        <Typography variant="h3" className={classes.title}>
+          {group}
+        </Typography>
+        <KeyboardArrowDownIcon
+          fontSize="large"
+          className={classes.arrowDownIcon}
+        />
+      </Box>
+    </button>
+  );
+};

plugins/org-react/src/components/GroupListPicker/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export { GroupListPicker } from './GroupListPicker';
+export type { GroupListPickerProps } from './GroupListPicker';

plugins/org-react/src/index.ts

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+export { GroupListPicker } from './plugin';

plugins/org-react/src/plugin.test.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { orgReactPlugin } from './plugin';
+
+describe('org-react', () => {
+  it('should export plugin', () => {
+    expect(orgReactPlugin).toBeDefined();
+  });
+});

plugins/org-react/src/plugin.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 {
+  createPlugin,
+  createRoutableExtension,
+} from '@backstage/core-plugin-api';
+
+import { rootRouteRef } from './routes';
+
+export const orgReactPlugin = createPlugin({
+  id: 'org-react',
+  routes: {
+    root: rootRouteRef,
+  },
+});
+
+export const GroupListPicker = orgReactPlugin.provide(
+  createRoutableExtension({
+    name: 'GroupListPicker',
+    component: () =>
+      import('./components/GroupListPicker').then(m => m.GroupListPicker),
+    mountPoint: rootRouteRef,
+  }),
+);

plugins/org-react/src/routes.ts

@@ -0,0 +1,20 @@
+/*
+ * 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',
+});

plugins/org-react/src/setupTests.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 '@testing-library/jest-dom';
+import 'cross-fetch/polyfill';