From d03a7646f575cf6d8905e92b652067f82d98393f Mon Sep 17 00:00:00 2001 From: Marcus Eide Date: Tue, 6 Oct 2020 15:00:41 +0200 Subject: [PATCH] Handle empties --- packages/app/package.json | 1 + .../AuthProviders/AuthProviders.tsx | 29 +++-- .../AuthProviders/DefaultProviderSettings.tsx | 114 +++++++++--------- .../AuthProviders/EmptyProviders.tsx | 59 +++++++++ .../components/FeatureFlags/EmptyFlags.tsx | 59 +++++++++ .../components/FeatureFlags/FeatureFlags.tsx | 30 +++-- .../src/components/SettingsPage.tsx | 19 +-- 7 files changed, 217 insertions(+), 94 deletions(-) create mode 100644 plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx create mode 100644 plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx diff --git a/packages/app/package.json b/packages/app/package.json index 07814cdb0d..0815f00e3a 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -10,6 +10,7 @@ "@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", diff --git a/plugins/user-settings/src/components/AuthProviders/AuthProviders.tsx b/plugins/user-settings/src/components/AuthProviders/AuthProviders.tsx index 917e70b067..563bf44150 100644 --- a/plugins/user-settings/src/components/AuthProviders/AuthProviders.tsx +++ b/plugins/user-settings/src/components/AuthProviders/AuthProviders.tsx @@ -16,14 +16,29 @@ import React from 'react'; import { List } from '@material-ui/core'; -import { InfoCard } from '@backstage/core'; +import { configApiRef, InfoCard, useApi } from '@backstage/core'; +import { EmptyProviders } from './EmptyProviders'; +import { DefaultProviderSettings } from './DefaultProviderSettings'; type Props = { - providers: React.ReactNode; + providerSettings?: JSX.Element; }; -export const AuthProviders = ({ providers }: Props) => ( - - {providers} - -); +export const AuthProviders = ({ providerSettings }: Props) => { + const configApi = useApi(configApiRef); + const providersConfig = configApi.getOptionalConfig('auth.providers'); + const configuredProviders = providersConfig?.keys() || []; + const providers = providerSettings ?? ( + + ); + + if (!providerSettings && !configuredProviders?.length) { + return ; + } + + return ( + + {providers} + + ); +}; diff --git a/plugins/user-settings/src/components/AuthProviders/DefaultProviderSettings.tsx b/plugins/user-settings/src/components/AuthProviders/DefaultProviderSettings.tsx index e6e5c21d86..a1dab1e7d4 100644 --- a/plugins/user-settings/src/components/AuthProviders/DefaultProviderSettings.tsx +++ b/plugins/user-settings/src/components/AuthProviders/DefaultProviderSettings.tsx @@ -14,74 +14,70 @@ * limitations under the License. */ import { - configApiRef, githubAuthApiRef, gitlabAuthApiRef, googleAuthApiRef, oauth2ApiRef, oktaAuthApiRef, microsoftAuthApiRef, - useApi, } from '@backstage/core'; import Star from '@material-ui/icons/Star'; import React from 'react'; import { ProviderSettingsItem } from './ProviderSettingsItem'; -export const DefaultProviderSettings = () => { - const configApi = useApi(configApiRef); - const providersConfig = configApi.getOptionalConfig('auth.providers'); - const providers = providersConfig?.keys() ?? []; - - return ( - <> - {providers.includes('google') && ( - - )} - {providers.includes('microsoft') && ( - - )} - {providers.includes('github') && ( - - )} - {providers.includes('gitlab') && ( - - )} - {providers.includes('okta') && ( - - )} - {providers.includes('oauth2') && ( - - )} - - ); +type Props = { + configuredProviders: string[]; }; + +export const DefaultProviderSettings = ({ configuredProviders }: Props) => ( + <> + {configuredProviders.includes('google') && ( + + )} + {configuredProviders.includes('microsoft') && ( + + )} + {configuredProviders.includes('github') && ( + + )} + {configuredProviders.includes('gitlab') && ( + + )} + {configuredProviders.includes('okta') && ( + + )} + {configuredProviders.includes('oauth2') && ( + + )} + +); diff --git a/plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx b/plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx new file mode 100644 index 0000000000..864efb9cd5 --- /dev/null +++ b/plugins/user-settings/src/components/AuthProviders/EmptyProviders.tsx @@ -0,0 +1,59 @@ +/* + * 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 { CodeSnippet, EmptyState } from '@backstage/core'; +import { Button, Typography } from '@material-ui/core'; + +const EXAMPLE = ` +import { createPlugin } from '@backstage/core'; + +export default createPlugin({ + id: 'welcome', + register({ router, featureFlags }) { + featureFlags.register('enable-example-feature'); + }, +}); +`; + +export const EmptyProviders = () => ( + + + An example how how to add a feature flags is highlighted below: + + + + + } + /> +); diff --git a/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx b/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx new file mode 100644 index 0000000000..438cb8b2a2 --- /dev/null +++ b/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx @@ -0,0 +1,59 @@ +/* + * 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 { CodeSnippet, EmptyState } from '@backstage/core'; +import { Button, Typography } from '@material-ui/core'; + +const EXAMPLE = ` +import { createPlugin } from '@backstage/core'; + +export default createPlugin({ + id: 'welcome', + register({ router, featureFlags }) { + featureFlags.register('enable-example-feature'); + }, +}); +`; + +export const EmptyFlags = () => ( + + + An example how how to add a feature flags is highlighted below: + + + + + } + /> +); diff --git a/plugins/user-settings/src/components/FeatureFlags/FeatureFlags.tsx b/plugins/user-settings/src/components/FeatureFlags/FeatureFlags.tsx index d3f21a7c6e..71f59c52b8 100644 --- a/plugins/user-settings/src/components/FeatureFlags/FeatureFlags.tsx +++ b/plugins/user-settings/src/components/FeatureFlags/FeatureFlags.tsx @@ -14,25 +14,25 @@ * limitations under the License. */ -import React, { useState, useCallback } from 'react'; -import { List } from '@material-ui/core'; +import React, { useCallback, useState } from 'react'; import { - useApi, - featureFlagsApiRef, FeatureFlagName, - FeatureFlagState, + featureFlagsApiRef, FeatureFlagsRegistryItem, + FeatureFlagState, InfoCard, + useApi, } from '@backstage/core'; +import { List } from '@material-ui/core'; +import { EmptyFlags } from './EmptyFlags'; import { FlagItem } from './FeatureFlagsItem'; -type Props = { featureFlags: FeatureFlagsRegistryItem[] }; - -export const FeatureFlags = ({ featureFlags }: Props) => { - const featureFlagApi = useApi(featureFlagsApiRef); +export const FeatureFlags = () => { + const featureFlagsApi = useApi(featureFlagsApiRef); + const featureFlags = featureFlagsApi.getRegisteredFlags(); const initialFlagState = featureFlags.reduce( (result, featureFlag: FeatureFlagsRegistryItem) => { - const state = featureFlagApi.getFlags().get(featureFlag.name); + const state = featureFlagsApi.getFlags().get(featureFlag.name); result[featureFlag.name] = state; return result; @@ -46,17 +46,21 @@ export const FeatureFlags = ({ featureFlags }: Props) => { const toggleFlag = useCallback( (flagName: FeatureFlagName) => { - const newState = featureFlagApi.getFlags().toggle(flagName); + const newState = featureFlagsApi.getFlags().toggle(flagName); setState(prevState => ({ ...prevState, [flagName]: newState, })); - featureFlagApi.getFlags().save(); + featureFlagsApi.getFlags().save(); }, - [featureFlagApi], + [featureFlagsApi], ); + if (!featureFlags.length) { + return ; + } + return ( diff --git a/plugins/user-settings/src/components/SettingsPage.tsx b/plugins/user-settings/src/components/SettingsPage.tsx index 6ed8e33670..86096e9a1f 100644 --- a/plugins/user-settings/src/components/SettingsPage.tsx +++ b/plugins/user-settings/src/components/SettingsPage.tsx @@ -15,17 +15,9 @@ */ import React, { useState } from 'react'; -import { - Content, - featureFlagsApiRef, - Header, - HeaderTabs, - Page, - pageTheme, - useApi, -} from '@backstage/core'; +import { Content, Header, HeaderTabs, Page, pageTheme } from '@backstage/core'; import { General } from './General'; -import { AuthProviders, DefaultProviderSettings } from './AuthProviders'; +import { AuthProviders } from './AuthProviders'; import { FeatureFlags } from './FeatureFlags'; type Props = { @@ -37,9 +29,6 @@ export const SettingsPage = ({ providerSettings }: Props) => { const onTabChange = (index: number) => { setActiveTab(index); }; - const featureFlagsApi = useApi(featureFlagsApiRef); - const featureFlags = featureFlagsApi.getRegisteredFlags(); - const providers = providerSettings ?? ; const tabs = [ { id: 'general', label: 'General' }, @@ -49,8 +38,8 @@ export const SettingsPage = ({ providerSettings }: Props) => { const content = [ , - , - , + , + , ]; return (