Merge branch 'master' into feature/techdocs-e2e

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/user-settings/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @backstage/plugin-user-settings
 
+## 0.3.6
+
+### Patch Changes
+
+- 038b9763d1: Add search to FeatureFlags
+- Updated dependencies
+  - @backstage/core-components@0.5.0
+
+## 0.3.5
+
+### Patch Changes
+
+- 6082b9178c: Fix import for `createPlugin` in example snippet
+- 9f1362dcc1: Upgrade `@material-ui/lab` to `4.0.0-alpha.57`.
+- Updated dependencies
+  - @backstage/core-components@0.4.2
+  - @backstage/core-plugin-api@0.1.8
+
+## 0.3.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.4.0
+
+## 0.3.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.3.0
+  - @backstage/core-plugin-api@0.1.5
+
+## 0.3.2
+
+### Patch Changes
+
+- 9d40fcb1e: - Bumping `material-ui/core` version to at least `4.12.2` as they made some breaking changes in later versions which broke `Pagination` of the `Table`.
+  - Switching out `material-table` to `@material-table/core` for support for the later versions of `material-ui/core`
+  - This causes a minor API change to `@backstage/core-components` as the interface for `Table` re-exports the `prop` from the underlying `Table` components.
+  - `onChangeRowsPerPage` has been renamed to `onRowsPerPageChange`
+  - `onChangePage` has been renamed to `onPageChange`
+  - Migration guide is here: https://material-table-core.com/docs/breaking-changes
+- Updated dependencies
+  - @backstage/core-components@0.2.0
+  - @backstage/core-plugin-api@0.1.4
+  - @backstage/theme@0.2.9
+
+## 0.3.1
+
+### Patch Changes
+
+- b5953c1df: Aligns switch left and allows clicking on rows
+- Updated dependencies
+  - @backstage/core-components@0.1.6
+
 ## 0.3.0
 
 ### Minor Changes

plugins/user-settings/api-report.md

@@ -119,6 +119,4 @@ export const useUserProfile: () => {
   profile: ProfileInfo;
   displayName: string;
 };
-
-// (No @packageDocumentation comment for this package)
 ```

plugins/user-settings/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@backstage/plugin-user-settings",
-  "version": "0.3.0",
+  "description": "A Backstage plugin that provides a settings page",
+  "version": "0.3.6",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -30,23 +31,23 @@
     "clean": "backstage-cli clean"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.1.5",
-    "@backstage/core-plugin-api": "^0.1.3",
-    "@backstage/theme": "^0.2.8",
-    "@material-ui/core": "^4.11.0",
+    "@backstage/core-components": "^0.5.0",
+    "@backstage/core-plugin-api": "^0.1.8",
+    "@backstage/theme": "^0.2.10",
+    "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.45",
+    "@material-ui/lab": "4.0.0-alpha.57",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "6.0.0-beta.0",
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.7.4",
-    "@backstage/core-app-api": "^0.1.4",
-    "@backstage/core-plugin-api": "^0.1.3",
-    "@backstage/dev-utils": "^0.2.2",
-    "@backstage/test-utils": "^0.1.14",
+    "@backstage/cli": "^0.7.13",
+    "@backstage/core-app-api": "^0.1.14",
+    "@backstage/core-plugin-api": "^0.1.8",
+    "@backstage/dev-utils": "^0.2.10",
+    "@backstage/test-utils": "^0.1.17",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.8",

plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { Button, Typography } from '@material-ui/core';
 import { CodeSnippet, EmptyState } from '@backstage/core-components';
 
-const EXAMPLE = `import { createPlugin } from '@backstage/core';
+const EXAMPLE = `import { createPlugin } from '@backstage/core-plugin-api';
 
 export default createPlugin({
   id: 'plugin-name',

plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx

@@ -17,8 +17,8 @@
 import React from 'react';
 import {
   ListItem,
-  ListItemSecondaryAction,
   ListItemText,
+  ListItemIcon,
   Switch,
   Tooltip,
 } from '@material-ui/core';
@@ -31,20 +31,15 @@ type Props = {
 };
 
 export const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (
-  <ListItem>
+  <ListItem divider button onClick={() => toggleHandler(flag.name)}>
+    <ListItemIcon>
+      <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
+        <Switch color="primary" checked={enabled} name={flag.name} />
+      </Tooltip>
+    </ListItemIcon>
     <ListItemText
       primary={flag.name}
       secondary={`Registered in ${flag.pluginId} plugin`}
     />
-    <ListItemSecondaryAction>
-      <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
-        <Switch
-          color="primary"
-          checked={enabled}
-          onChange={() => toggleHandler(flag.name)}
-          name={flag.name}
-        />
-      </Tooltip>
-    </ListItemSecondaryAction>
   </ListItem>
 );

plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx

@@ -15,7 +15,13 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import { List } from '@material-ui/core';
+import {
+  List,
+  TextField,
+  IconButton,
+  Grid,
+  Typography,
+} from '@material-ui/core';
 import { EmptyFlags } from './EmptyFlags';
 import { FlagItem } from './FeatureFlagsItem';
 
@@ -25,6 +31,7 @@ import {
   useApi,
 } from '@backstage/core-plugin-api';
 import { InfoCard } from '@backstage/core-components';
+import ClearIcon from '@material-ui/icons/Clear';
 
 export const UserSettingsFeatureFlags = () => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
@@ -35,6 +42,8 @@ export const UserSettingsFeatureFlags = () => {
   );
 
   const [state, setState] = useState<Record<string, boolean>>(initialFlagState);
+  const [filterInput, setFilterInput] = useState<string>('');
+  const inputRef = React.useRef<HTMLElement>();
 
   const toggleFlag = useCallback(
     (flagName: string) => {
@@ -59,10 +68,60 @@ export const UserSettingsFeatureFlags = () => {
     return <EmptyFlags />;
   }
 
+  const clearFilterInput = () => {
+    setFilterInput('');
+    inputRef?.current?.focus();
+  };
+
+  let filteredFeatureFlags = Array.from(featureFlags);
+
+  const filterInputParts = filterInput
+    .split(/\s/)
+    .map(part => part.trim().toLowerCase());
+
+  filterInputParts.forEach(
+    part =>
+      (filteredFeatureFlags = filteredFeatureFlags.filter(featureFlag =>
+        featureFlag.name.toLowerCase().includes(part),
+      )),
+  );
+
+  const Header = () => (
+    <Grid container style={{ justifyContent: 'space-between' }}>
+      <Grid item xs={6} md={8}>
+        <Typography variant="h5">Feature Flags</Typography>
+      </Grid>
+      {featureFlags.length >= 10 && (
+        <Grid item xs={6} md={4}>
+          <TextField
+            label="Filter"
+            style={{ display: 'flex', justifyContent: 'flex-end' }}
+            inputRef={ref => ref && ref.focus()}
+            InputProps={{
+              ...(filterInput.length && {
+                endAdornment: (
+                  <IconButton
+                    aria-label="Clear filter"
+                    onClick={clearFilterInput}
+                    edge="end"
+                  >
+                    <ClearIcon />
+                  </IconButton>
+                ),
+              }),
+            }}
+            onChange={e => setFilterInput(e.target.value)}
+            value={filterInput}
+          />
+        </Grid>
+      )}
+    </Grid>
+  );
+
   return (
-    <InfoCard title="Feature Flags">
+    <InfoCard title={<Header />}>
       <List dense>
-        {featureFlags.map(featureFlag => {
+        {filteredFeatureFlags.map(featureFlag => {
           const enabled = Boolean(state[featureFlag.name]);
 
           return (

plugins/user-settings/src/index.ts

@@ -14,6 +14,12 @@
  * limitations under the License.
  */
 
+/**
+ * A Backstage plugin that provides a settings page
+ *
+ * @packageDocumentation
+ */
+
 export {
   userSettingsPlugin,
   userSettingsPlugin as plugin,