Move story into this plugin

packages/core/src/layout/Sidebar/Sidebar.stories.tsx

@@ -26,8 +26,6 @@ import {
 import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
 import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import { MemoryRouter } from 'react-router-dom';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { Settings as SidebarSettings } from '@backstage/plugin-user-settings';
 
 export default {
   title: 'Sidebar',
@@ -56,18 +54,3 @@ export const SampleSidebar = () => (
     <SidebarSpace />
   </Sidebar>
 );
-
-export const WithUserSettingsPlugin = () => (
-  <Sidebar>
-    <SidebarSearchField onSearch={handleSearch} />
-    <SidebarDivider />
-    <SidebarItem icon={HomeOutlinedIcon} to="#" text="Home" />
-    <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
-    <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
-    <SidebarDivider />
-    <SidebarIntro />
-    <SidebarSpace />
-    <SidebarDivider />
-    <SidebarSettings />
-  </Sidebar>
-);

packages/storybook/.storybook/main.js

@@ -5,6 +5,7 @@ module.exports = {
   stories: [
     '../../core/src/layout/**/*.stories.tsx',
     '../../core/src/components/**/*.stories.tsx',
+    '../../../plugins/**/src/**/*.stories.tsx',
   ],
   addons: [
     '@storybook/addon-actions',

plugins/user-settings/src/components/SidebarWithSettings.stories.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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 {
+  ApiProvider,
+  ApiRegistry,
+  appThemeApiRef,
+  AppThemeSelector,
+  configApiRef,
+  ConfigReader,
+  FeatureFlags,
+  featureFlagsApiRef,
+  Sidebar,
+  SidebarDivider,
+  SidebarSpace,
+} from '@backstage/core';
+import { MemoryRouter } from 'react-router';
+import { Settings } from './Settings';
+import { SettingsPage } from './SettingsPage';
+
+export default {
+  title: 'Settings',
+  component: Settings,
+  decorators: [
+    (storyFn: () => JSX.Element) => (
+      <MemoryRouter initialEntries={['/']}>{storyFn()}</MemoryRouter>
+    ),
+  ],
+};
+
+export const SidebarItem = () => (
+  <Sidebar>
+    <SidebarSpace />
+    <SidebarDivider />
+    <Settings />
+  </Sidebar>
+);
+
+const createConfig = () =>
+  ConfigReader.fromConfigs([
+    {
+      context: '',
+      data: {
+        auth: {
+          providers: {
+            // google: { development: {} },
+          },
+        },
+      },
+    },
+  ]);
+
+const config = createConfig();
+
+const apis = ApiRegistry.from([
+  [configApiRef, config],
+  [featureFlagsApiRef, new FeatureFlags()],
+  [appThemeApiRef, AppThemeSelector.createWithStorage([])],
+]);
+
+export const TheSettingsPage = () => (
+  <div style={{ border: '1px solid #ddd' }}>
+    <ApiProvider apis={apis}>
+      <SettingsPage />
+    </ApiProvider>
+  </div>
+);