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) => (
- Available Auth Providers}>
- {providerSettings}
-
-);
+export const AuthProvidersList = ({ providerSettings }: Props) => {
+ if (!providerSettings) {
+ return null;
+ }
+
+ return (
+ <>
+
+ Available Auth Providers}>
+ {providerSettings}
+
+ >
+ );
+};
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 (
- Feature Flags}>
- {featureFlags.map(featureFlag => (
-
- ))}
-
+ <>
+
+ Feature Flags}>
+ {featureFlags.map(featureFlag => (
+
+ ))}
+
+ >
);
};
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}
/>
-
-
-