Move <UserSettings/> to a user-settings plugin

packages/app/package.json

@@ -10,7 +10,6 @@
     "@backstage/plugin-api-docs": "^0.1.1-alpha.24",
     "@backstage/plugin-catalog": "^0.1.1-alpha.24",
     "@backstage/plugin-circleci": "^0.1.1-alpha.24",
-    "@backstage/plugin-cloudbuild": "^0.1.1-alpha.24",
     "@backstage/plugin-cost-insights": "^0.1.1-alpha.24",
     "@backstage/plugin-explore": "^0.1.1-alpha.24",
     "@backstage/plugin-gcp-projects": "^0.1.1-alpha.24",
@@ -28,6 +27,7 @@
     "@backstage/plugin-tech-radar": "^0.1.1-alpha.24",
     "@backstage/plugin-techdocs": "^0.1.1-alpha.24",
     "@backstage/plugin-welcome": "^0.1.1-alpha.24",
+    "@backstage/plugin-user-settings": "^0.1.1-alpha.24",
     "@backstage/test-utils": "^0.1.1-alpha.24",
     "@backstage/theme": "^0.1.1-alpha.24",
     "@material-ui/core": "^4.11.0",

packages/app/src/components/Root/Root.tsx

@@ -35,11 +35,10 @@ import {
   SidebarDivider,
   SidebarSearchField,
   SidebarSpace,
-  SidebarUserSettings,
-  DefaultProviderSettings,
 } from '@backstage/core';
 import { NavLink } from 'react-router-dom';
 import { graphiQLRouteRef } from '@backstage/plugin-graphiql';
+import { UserSettings } from '@backstage/plugin-user-settings';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -103,7 +102,7 @@ const Root: FC<{}> = ({ children }) => (
       />
       <SidebarSpace />
       <SidebarDivider />
-      <SidebarUserSettings providerSettings={<DefaultProviderSettings />} />
+      <UserSettings />
     </Sidebar>
     {children}
   </SidebarPage>

packages/app/src/plugins.ts

@@ -36,3 +36,4 @@ export { plugin as GcpProjects } from '@backstage/plugin-gcp-projects';
 export { plugin as Kubernetes } from '@backstage/plugin-kubernetes';
 export { plugin as Cloudbuild } from '@backstage/plugin-cloudbuild';
 export { plugin as CostInsights } from '@backstage/plugin-cost-insights';
+export { plugin as UserSettings } from '@backstage/plugin-user-settings';

packages/core/src/layout/Sidebar/index.ts

@@ -31,5 +31,3 @@ export {
   sidebarConfig,
 } from './config';
 export type { SidebarContextType } from './config';
-export { DefaultProviderSettings } from './DefaultProviderSettings';
-export * from './Settings';

plugins/user-settings/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint')],
+};

plugins/user-settings/README.md

@@ -0,0 +1,13 @@
+# user-settings
+
+Welcome to the user-settings plugin!
+
+_This plugin was created through the Backstage CLI_
+
+## Getting started
+
+Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/user-settings](http://localhost:3000/user-settings).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
+It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.

plugins/user-settings/dev/index.tsx

@@ -0,0 +1,19 @@
+/*
+ * 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 { createDevApp } from '@backstage/dev-utils';
+import { plugin } from '../src/plugin';
+
+createDevApp().registerPlugin(plugin).render();

plugins/user-settings/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@backstage/plugin-user-settings",
+  "version": "0.1.1-alpha.21",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "scripts": {
+    "build": "backstage-cli plugin:build",
+    "start": "backstage-cli plugin:serve",
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test",
+    "diff": "backstage-cli plugin:diff",
+    "prepack": "backstage-cli prepack",
+    "postpack": "backstage-cli postpack",
+    "clean": "backstage-cli clean"
+  },
+  "dependencies": {
+    "@backstage/core": "^0.1.1-alpha.21",
+    "@backstage/theme": "^0.1.1-alpha.21",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.45",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-use": "^15.3.3"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.1.1-alpha.21",
+    "@backstage/dev-utils": "^0.1.1-alpha.21",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^10.4.1",
+    "@testing-library/user-event": "^12.0.7",
+    "@types/jest": "^26.0.7",
+    "@types/node": "^12.0.0",
+    "jest-fetch-mock": "^3.0.3"
+  },
+  "files": [
+    "dist"
+  ]
+}

plugins/user-settings/src/components/AuthProviderList.tsx

@@ -15,8 +15,7 @@
  */
 
 import React from 'react';
-import List from '@material-ui/core/List';
-import ListSubheader from '@material-ui/core/ListSubheader';
+import { List, ListSubheader } from '@material-ui/core';
 
 type Props = {
   providerSettings: React.ReactNode;

plugins/user-settings/src/components/DefaultProviderSettings.tsx

@@ -23,10 +23,11 @@ import {
   microsoftAuthApiRef,
   samlAuthApiRef,
   useApi,
-} from '@backstage/core-api';
+} from '@backstage/core';
 import Star from '@material-ui/icons/Star';
 import React from 'react';
-import { ProviderSettingsItem } from './Settings';
+import { OAuthProviderSettings } from './OAuthProviderSettings';
+import { OIDCProviderSettings } from './OIDCProviderSettings';
 
 export const DefaultProviderSettings = () => {
   const configApi = useApi(configApiRef);

plugins/user-settings/src/components/FeatureFlagsItem.tsx

@@ -15,11 +15,7 @@
  */
 
 import React from 'react';
-import {
-  FeatureFlagName,
-  useApi,
-  featureFlagsApiRef,
-} from '@backstage/core-api';
+import { FeatureFlagName, useApi, featureFlagsApiRef } from '@backstage/core';
 import {
   ListItem,
   ListItemSecondaryAction,

plugins/user-settings/src/components/OAuthProviderSettings.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 {
+  ApiRef,
+  OAuthApi,
+  SessionStateApi,
+  useApi,
+  Subscription,
+  IconComponent,
+  SessionState,
+} from '@backstage/core';
+import React, { FC, useState, useEffect } from 'react';
+import { ProviderSettingsItem } from './ProviderSettingsItem';
+
+type OAuthProviderSidebarProps = {
+  title: string;
+  icon: IconComponent;
+  apiRef: ApiRef<OAuthApi & SessionStateApi>;
+};
+
+export const OAuthProviderSettings: FC<OAuthProviderSidebarProps> = ({
+  title,
+  icon,
+  apiRef,
+}) => {
+  const api = useApi(apiRef);
+  const [signedIn, setSignedIn] = useState(false);
+
+  useEffect(() => {
+    let didCancel = false;
+
+    const checkSession = async () => {
+      const session = await api.getAccessToken('', { optional: true });
+      if (!didCancel) {
+        setSignedIn(!!session);
+      }
+    };
+    let subscription: Subscription;
+    const observeSession = () => {
+      subscription = api
+        .sessionState$()
+        .subscribe((sessionState: SessionState) => {
+          if (!didCancel) {
+            setSignedIn(sessionState === SessionState.SignedIn);
+          }
+        });
+    };
+
+    checkSession();
+    observeSession();
+    return () => {
+      didCancel = true;
+      subscription.unsubscribe();
+    };
+  }, [api]);
+
+  return (
+    <ProviderSettingsItem
+      title={title}
+      icon={icon}
+      signedIn={signedIn}
+      api={api}
+      signInHandler={() => api.getAccessToken()}
+    />
+  );
+};

plugins/user-settings/src/components/OIDCProviderSettings.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 {
+  ApiRef,
+  OpenIdConnectApi,
+  SessionStateApi,
+  useApi,
+  Subscription,
+  IconComponent,
+  SessionState,
+} from '@backstage/core';
+import React, { FC, useState, useEffect } from 'react';
+import { ProviderSettingsItem } from './ProviderSettingsItem';
+
+export type OIDCProviderSidebarProps = {
+  title: string;
+  icon: IconComponent;
+  apiRef: ApiRef<OpenIdConnectApi & SessionStateApi>;
+};
+
+export const OIDCProviderSettings: FC<OIDCProviderSidebarProps> = ({
+  title,
+  icon,
+  apiRef,
+}) => {
+  const api = useApi(apiRef);
+  const [signedIn, setSignedIn] = useState(false);
+
+  useEffect(() => {
+    let didCancel = false;
+
+    const checkSession = async () => {
+      const session = await api.getIdToken({ optional: true });
+      if (!didCancel) {
+        setSignedIn(!!session);
+      }
+    };
+
+    let subscription: Subscription;
+    const observeSession = () => {
+      subscription = api
+        .sessionState$()
+        .subscribe((sessionState: SessionState) => {
+          if (!didCancel) {
+            setSignedIn(sessionState === SessionState.SignedIn);
+          }
+        });
+    };
+
+    checkSession();
+    observeSession();
+    return () => {
+      didCancel = true;
+      subscription.unsubscribe();
+    };
+  }, [api]);
+
+  return (
+    <ProviderSettingsItem
+      title={title}
+      icon={icon}
+      signedIn={signedIn}
+      api={api}
+      signInHandler={() => api.getIdToken()}
+    />
+  );
+};

plugins/user-settings/src/components/PinButton.tsx

@@ -24,7 +24,7 @@ import {
 import LockIcon from '@material-ui/icons/Lock';
 import LockOpenIcon from '@material-ui/icons/LockOpen';
 import { ToggleButton } from '@material-ui/lab';
-import { SidebarPinStateContext } from '../Page';
+import { SidebarPinStateContext } from '@backstage/core';
 
 export const SidebarPinButton = () => {
   const { isPinned, toggleSidebarPinState } = useContext(

plugins/user-settings/src/components/ProviderSettingsItem.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import React, { FC, useState, useEffect } from 'react';
+import React from 'react';
+import { IconComponent, OAuthApi, OpenIdConnectApi } from '@backstage/core';
 import {
   ListItem,
   ListItemIcon,

plugins/user-settings/src/components/SettingsDialog.tsx

@@ -28,7 +28,7 @@ import { FeatureFlagsList } from './FeatureFlagsList';
 import { SignInAvatar } from './SignInAvatar';
 import { UserSettingsMenu } from './UserSettingsMenu';
 import { useUserProfile } from './useUserProfileInfo';
-import { useApi, featureFlagsApiRef } from '@backstage/core-api';
+import { useApi, featureFlagsApiRef } from '@backstage/core';
 
 const useStyles = makeStyles({
   root: {

plugins/user-settings/src/components/SignInAvatar.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, Avatar } from '@material-ui/core';
 import { useUserProfile } from './useUserProfileInfo';
-import { sidebarConfig } from '../config';
+import { sidebarConfig } from '@backstage/core';
 
 const useStyles = makeStyles<BackstageTheme, { size: number }>({
   avatar: {

plugins/user-settings/src/components/ThemeToggle.tsx

@@ -19,7 +19,7 @@ import { useObservable } from 'react-use';
 import LightIcon from '@material-ui/icons/WbSunny';
 import DarkIcon from '@material-ui/icons/Brightness2';
 import AutoIcon from '@material-ui/icons/BrightnessAuto';
-import { appThemeApiRef, useApi } from '@backstage/core-api';
+import { appThemeApiRef, useApi } from '@backstage/core';
 import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import {

plugins/user-settings/src/components/UserSettings.tsx

@@ -18,15 +18,14 @@ import React, { useEffect, useContext } from 'react';
 import { Popover } from '@material-ui/core';
 import { SignInAvatar } from './SignInAvatar';
 import { SettingsDialog } from './SettingsDialog';
-import { SidebarItem } from '../Items';
+import { SidebarItem, SidebarContext } from '@backstage/core';
 import { useUserProfile } from './useUserProfileInfo';
-import { SidebarContext } from '../config';
 
 type Props = {
   providerSettings?: React.ReactNode;
 };
 
-export const SidebarUserSettings = ({ providerSettings }: Props) => {
+export const UserSettings = ({ providerSettings }: Props) => {
   const { isOpen: sidebarOpen } = useContext(SidebarContext);
   const { displayName } = useUserProfile();
   const [open, setOpen] = React.useState(false);

plugins/user-settings/src/components/UserSettingsMenu.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { identityApiRef, useApi } from '@backstage/core-api';
+import { identityApiRef, useApi } from '@backstage/core';
 import { IconButton, ListItemIcon, Menu, MenuItem } from '@material-ui/core';
 import SignOutIcon from '@material-ui/icons/MeetingRoom';
 import MoreVertIcon from '@material-ui/icons/MoreVert';

plugins/user-settings/src/components/index.ts

@@ -14,5 +14,4 @@
  * limitations under the License.
  */
 
-export { ProviderSettingsItem } from './ProviderSettingsItem';
-export { SidebarUserSettings } from './UserSettings';
+export { UserSettings } from './UserSettings';

plugins/user-settings/src/components/useUserProfileInfo.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useApi, identityApiRef } from '@backstage/core-api';
+import { useApi, identityApiRef } from '@backstage/core';
 
 export const useUserProfile = () => {
   const identityApi = useApi(identityApiRef);

plugins/user-settings/src/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+export { plugin } from './plugin';
+export { UserSettings } from './components/UserSettings';

plugins/user-settings/src/plugin.test.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { plugin } from './plugin';
+
+describe('user-settings', () => {
+  it('should export plugin', () => {
+    expect(plugin).toBeDefined();
+  });
+});

plugins/user-settings/src/plugin.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 { createPlugin } from '@backstage/core';
+// import ExampleComponent from './components/ExampleComponent';
+
+// export const rootRouteRef = createRouteRef({
+//   path: '/user-settings',
+//   title: 'user-settings',
+// });
+
+export const plugin = createPlugin({
+  id: 'user-settings',
+  // apis: [createApiFactory(GCPApiRef, new GCPClient())],
+  // register({ router }) {
+  //   router.addRoute(rootRouteRef, ExampleComponent);
+  // },
+});

plugins/user-settings/src/setupTests.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 '@testing-library/jest-dom';
+
+require('jest-fetch-mock').enableMocks();