From 88fa72f91f7c8e9da2b92e5e04caeb6f775c6c95 Mon Sep 17 00:00:00 2001
From: Marcus Eide <eide@spotify.com>
Date: Fri, 11 Sep 2020 10:58:37 +0200
Subject: [PATCH] Handle empty sections

---
 .../Sidebar/Settings/AuthProviderList.tsx     | 20 ++++++++++----
 .../Sidebar/Settings/FeatureFlagsList.tsx     | 26 ++++++++++++-------
 .../Sidebar/Settings/SettingsDialog.tsx       | 11 +-------
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/layout/Sidebar/Settings/AuthProviderList.tsx b/packages/core/src/layout/Sidebar/Settings/AuthProviderList.tsx
index 5d13d61148..50832da681 100644
--- a/packages/core/src/layout/Sidebar/Settings/AuthProviderList.tsx
+++ b/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>
+    </>
+  );
+};
diff --git a/packages/core/src/layout/Sidebar/Settings/FeatureFlagsList.tsx b/packages/core/src/layout/Sidebar/Settings/FeatureFlagsList.tsx
index 13e3a28c35..d74a501c13 100644
--- a/packages/core/src/layout/Sidebar/Settings/FeatureFlagsList.tsx
+++ b/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>
+    </>
   );
 };
diff --git a/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx b/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx
index ee2f0bdfb4..9c452982e3 100644
--- a/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx
+++ b/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>