Pass props to lists and control rendering from outside wrapper

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>
+);

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)),
   );

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>
+);

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>
   );