Cleanup and breaking out into more components

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

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { List, ListSubheader } from '@material-ui/core';
+import { SidebarThemeToggle } from './ThemeToggle';
+import { SidebarPinButton } from './PinButton';
+
+export const AppSettingsList = () => (
+  <List dense subheader={<ListSubheader>App Settings</ListSubheader>}>
+    <SidebarThemeToggle />
+    <SidebarPinButton />
+  </List>
+);

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

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
+
+type Props = {
+  providerSettings?: React.ReactNode;
+};
+
+export const AuthProvidersList = ({ providerSettings }: Props) => (
+  <List subheader={<ListSubheader>Available Auth Providers</ListSubheader>}>
+    {providerSettings}
+  </List>
+);

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

@@ -50,7 +50,7 @@ export const SidebarPinButton = () => {
       <ListItemSecondaryAction>
         <ToggleButton
           size="small"
-          value="check"
+          value="pin"
           selected={isPinned}
           onChange={() => {
             toggleSidebarPinState();

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

@@ -22,11 +22,10 @@ import {
   Divider,
   makeStyles,
 } from '@material-ui/core';
-import List from '@material-ui/core/List';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import { SidebarPinButton } from './PinButton';
+import { AppSettingsList } from './AppSettingsList';
+import { AuthProvidersList } from './AuthProviderList';
+import { FeatureFlagsList } from './FeatureFlagsList';
 import { SignInAvatar } from './SignInAvatar';
-import { SidebarThemeToggle } from './ThemeToggle';
 import { UserSettingsMenu } from './UserSettingsMenu';
 import { useUserProfile } from './useUserProfileInfo';
 
@@ -36,11 +35,11 @@ const useStyles = makeStyles({
   },
 });
 
-export const SettingsDialog = ({
-  providerSettings,
-}: {
+type Props = {
   providerSettings?: React.ReactNode;
-}) => {
+};
+
+export const SettingsDialog = ({ providerSettings }: Props) => {
   const classes = useStyles();
   const { profile, displayName } = useUserProfile();
 
@@ -54,16 +53,11 @@ export const SettingsDialog = ({
       />
       <CardContent>
         <Divider />
-        <List dense subheader={<ListSubheader>App Settings</ListSubheader>}>
-          <SidebarThemeToggle />
-          <SidebarPinButton />
-        </List>
+        <AppSettingsList />
         <Divider />
-        <List
-          subheader={<ListSubheader>Available Auth Providers</ListSubheader>}
-        >
-          {providerSettings}
-        </List>
+        <AuthProvidersList providerSettings={providerSettings} />
+        <Divider />
+        <FeatureFlagsList />
       </CardContent>
     </Card>
   );

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

@@ -27,7 +27,9 @@ const useStyles = makeStyles<BackstageTheme, { size: number }>({
   },
 });
 
-export const SignInAvatar = ({ size }: { size?: number }) => {
+type Props = { size?: number };
+
+export const SignInAvatar = ({ size }: Props) => {
   const { iconSize } = sidebarConfig;
   const classes = useStyles(size ? { size } : { size: iconSize });
   const { profile, displayName } = useUserProfile();

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

@@ -37,7 +37,7 @@ export const SidebarThemeToggle = () => {
   );
 
   const themeIds = appThemeApi.getInstalledThemes();
-  // TODO: can these be put on the theme itself?
+  // TODO(marcuseide): can these be put on the theme itself?
   const themeIcons = {
     dark: <DarkIcon />,
     light: <LightIcon />,

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

@@ -22,11 +22,11 @@ import { SidebarItem } from '../Items';
 import { useUserProfile } from './useUserProfileInfo';
 import { SidebarContext } from '../config';
 
-export const SidebarUserSettings = ({
-  providerSettings,
-}: {
+type Props = {
   providerSettings?: React.ReactNode;
-}) => {
+};
+
+export const SidebarUserSettings = ({ providerSettings }: Props) => {
   const { isOpen: sidebarOpen } = useContext(SidebarContext);
   const { displayName } = useUserProfile();
   const [open, setOpen] = React.useState(false);
@@ -44,7 +44,6 @@ export const SidebarUserSettings = ({
     setOpen(false);
   };
 
-  // Close the provider list when sidebar collapse
   useEffect(() => {
     if (!sidebarOpen && open) setOpen(false);
   }, [open, sidebarOpen]);