Handle empty sections

packages/core/src/layout/Sidebar/Settings/AuthProviderList.tsx

@@ -17,13 +17,23 @@
 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;
 };
 
-export const AuthProvidersList = ({ providerSettings }: Props) => (
-  <List subheader={<ListSubheader>Available Auth Providers</ListSubheader>}>
-    {providerSettings}
-  </List>
-);
+export const AuthProvidersList = ({ providerSettings }: Props) => {
+  if (!providerSettings) {
+    return null;
+  }
+
+  return (
+    <>
+      <Divider />
+      <List subheader={<ListSubheader>Available Auth Providers</ListSubheader>}>
+        {providerSettings}
+      </List>
+    </>
+  );
+};

packages/core/src/layout/Sidebar/Settings/FeatureFlagsList.tsx

@@ -19,20 +19,28 @@ 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';
 
 export const FeatureFlagsList = () => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
   const featureFlags = featureFlagsApi.getRegisteredFlags();
 
+  if (featureFlags.length === 0) {
+    return null;
+  }
+
   return (
-    <List dense subheader={<ListSubheader>Feature Flags</ListSubheader>}>
-      {featureFlags.map(featureFlag => (
-        <FlagItem
-          key={featureFlag.name}
-          featureFlag={featureFlag}
-          api={featureFlagsApi}
-        />
-      ))}
-    </List>
+    <>
+      <Divider />
+      <List dense subheader={<ListSubheader>Feature Flags</ListSubheader>}>
+        {featureFlags.map(featureFlag => (
+          <FlagItem
+            key={featureFlag.name}
+            featureFlag={featureFlag}
+            api={featureFlagsApi}
+          />
+        ))}
+      </List>
+    </>
   );
 };

packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx

@@ -15,13 +15,7 @@
  */
 
 import React from 'react';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Divider,
-  makeStyles,
-} from '@material-ui/core';
+import { Card, CardContent, CardHeader, makeStyles } from '@material-ui/core';
 import { AppSettingsList } from './AppSettingsList';
 import { AuthProvidersList } from './AuthProviderList';
 import { FeatureFlagsList } from './FeatureFlagsList';
@@ -52,11 +46,8 @@ export const SettingsDialog = ({ providerSettings }: Props) => {
         subheader={profile.email}
       />
       <CardContent>
-        <Divider />
         <AppSettingsList />
-        <Divider />
         <AuthProvidersList providerSettings={providerSettings} />
-        <Divider />
         <FeatureFlagsList />
       </CardContent>
     </Card>