From 3664ef13c2752ca8c11cf388da633bb8fbd42e3f Mon Sep 17 00:00:00 2001
From: Marcus Eide <eide@spotify.com>
Date: Thu, 17 Sep 2020 13:53:57 +0200
Subject: [PATCH] Pass props to lists and control rendering from outside
 wrapper

---
 .../Sidebar/Settings/AuthProviderList.tsx     | 22 ++++--------
 .../Sidebar/Settings/FeatureFlagsItem.tsx     | 20 ++++++++---
 .../Sidebar/Settings/FeatureFlagsList.tsx     | 36 ++++++-------------
 .../Sidebar/Settings/SettingsDialog.tsx       | 25 +++++++++++--
 4 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/packages/core/src/layout/Sidebar/Settings/AuthProviderList.tsx b/packages/core/src/layout/Sidebar/Settings/AuthProviderList.tsx
index 50832da681..34cf6fb837 100644
--- a/packages/core/src/layout/Sidebar/Settings/AuthProviderList.tsx
+++ b/packages/core/src/layout/Sidebar/Settings/AuthProviderList.tsx
@@ -17,23 +17,13 @@
 import React from 'react';
 import List from '@material-ui/core/List';
 import ListSubheader from '@material-ui/core/ListSubheader';
-import { Divider } from '@material-ui/core';
 
 type Props = {
-  providerSettings?: React.ReactNode;
+  providerSettings: React.ReactNode;
 };
 
-export const AuthProvidersList = ({ providerSettings }: Props) => {
-  if (!providerSettings) {
-    return null;
-  }
-
-  return (
-    <>
-      <Divider />
-      <List subheader={<ListSubheader>Available Auth Providers</ListSubheader>}>
-        {providerSettings}
-      </List>
-    </>
-  );
-};
+export const AuthProvidersList = ({ providerSettings }: Props) => (
+  <List subheader={<ListSubheader>Available Auth Providers</ListSubheader>}>
+    {providerSettings}
+  </List>
+);
diff --git a/packages/core/src/layout/Sidebar/Settings/FeatureFlagsItem.tsx b/packages/core/src/layout/Sidebar/Settings/FeatureFlagsItem.tsx
index 21074a5153..3e40ce69cc 100644
--- a/packages/core/src/layout/Sidebar/Settings/FeatureFlagsItem.tsx
+++ b/packages/core/src/layout/Sidebar/Settings/FeatureFlagsItem.tsx
@@ -15,7 +15,11 @@
  */
 
 import React from 'react';
-import { FeatureFlagName, FeatureFlagsApi } from '@backstage/core-api';
+import {
+  FeatureFlagName,
+  useApi,
+  featureFlagsApiRef,
+} from '@backstage/core-api';
 import {
   ListItem,
   ListItemSecondaryAction,
@@ -25,12 +29,18 @@ import {
 import CheckIcon from '@material-ui/icons/CheckCircle';
 import { ToggleButton } from '@material-ui/lab';
 
-type Props = {
-  featureFlag: { name: FeatureFlagName; pluginId: string };
-  api: FeatureFlagsApi;
+export type Item = {
+  name: FeatureFlagName;
+  pluginId: string;
 };
 
-export const FlagItem = ({ featureFlag, api }: Props) => {
+type Props = {
+  featureFlag: Item;
+};
+
+export const FlagItem = ({ featureFlag }: Props) => {
+  const api = useApi(featureFlagsApiRef);
+
   const [enabled, setEnabled] = React.useState(
     Boolean(api.getFlags().get(featureFlag.name)),
   );
diff --git a/packages/core/src/layout/Sidebar/Settings/FeatureFlagsList.tsx b/packages/core/src/layout/Sidebar/Settings/FeatureFlagsList.tsx
index d74a501c13..5687446511 100644
--- a/packages/core/src/layout/Sidebar/Settings/FeatureFlagsList.tsx
+++ b/packages/core/src/layout/Sidebar/Settings/FeatureFlagsList.tsx
@@ -17,30 +17,16 @@
 import React from 'react';
 import List from '@material-ui/core/List';
 import ListSubheader from '@material-ui/core/ListSubheader';
-import { useApi, featureFlagsApiRef } from '@backstage/core-api';
-import { FlagItem } from './FeatureFlagsItem';
-import { Divider } from '@material-ui/core';
+import { FlagItem, Item } from './FeatureFlagsItem';
 
-export const FeatureFlagsList = () => {
-  const featureFlagsApi = useApi(featureFlagsApiRef);
-  const featureFlags = featureFlagsApi.getRegisteredFlags();
-
-  if (featureFlags.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      <Divider />
-      <List dense subheader={<ListSubheader>Feature Flags</ListSubheader>}>
-        {featureFlags.map(featureFlag => (
-          <FlagItem
-            key={featureFlag.name}
-            featureFlag={featureFlag}
-            api={featureFlagsApi}
-          />
-        ))}
-      </List>
-    </>
-  );
+type Props = {
+  featureFlags: Item[];
 };
+
+export const FeatureFlagsList = ({ featureFlags }: Props) => (
+  <List dense subheader={<ListSubheader>Feature Flags</ListSubheader>}>
+    {featureFlags.map(featureFlag => (
+      <FlagItem key={featureFlag.name} featureFlag={featureFlag} />
+    ))}
+  </List>
+);
diff --git a/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx b/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx
index 9c452982e3..71c4899862 100644
--- a/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx
+++ b/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx
@@ -15,13 +15,20 @@
  */
 
 import React from 'react';
-import { Card, CardContent, CardHeader, makeStyles } from '@material-ui/core';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  makeStyles,
+  Divider,
+} from '@material-ui/core';
 import { AppSettingsList } from './AppSettingsList';
 import { AuthProvidersList } from './AuthProviderList';
 import { FeatureFlagsList } from './FeatureFlagsList';
 import { SignInAvatar } from './SignInAvatar';
 import { UserSettingsMenu } from './UserSettingsMenu';
 import { useUserProfile } from './useUserProfileInfo';
+import { useApi, featureFlagsApiRef } from '@backstage/core-api';
 
 const useStyles = makeStyles({
   root: {
@@ -36,6 +43,8 @@ type Props = {
 export const SettingsDialog = ({ providerSettings }: Props) => {
   const classes = useStyles();
   const { profile, displayName } = useUserProfile();
+  const featureFlagsApi = useApi(featureFlagsApiRef);
+  const featureFlags = featureFlagsApi.getRegisteredFlags();
 
   return (
     <Card className={classes.root}>
@@ -47,8 +56,18 @@ export const SettingsDialog = ({ providerSettings }: Props) => {
       />
       <CardContent>
         <AppSettingsList />
-        <AuthProvidersList providerSettings={providerSettings} />
-        <FeatureFlagsList />
+        {providerSettings && (
+          <>
+            <Divider />
+            <AuthProvidersList providerSettings={providerSettings} />
+          </>
+        )}
+        {featureFlags.length > 0 && (
+          <>
+            <Divider />
+            <FeatureFlagsList featureFlags={featureFlags} />
+          </>
+        )}
       </CardContent>
     </Card>
   );