paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 19 Packages Projects Releases Wiki Activity

Fix merge conflicts

Browse Source
This commit is contained in:
Marcus Eide
2020-09-29 09:26:57 +02:00
parent 790cd5ac49
commit d33fa314cd
8 changed files with 80 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/layout/Sidebar/Sidebar.stories.tsx
-5
View File
@@ -22,11 +22,6 @@ import {
SidebarDivider,
SidebarSearchField,
SidebarSpace,
<<<<<<< HEAD
SidebarUserSettings,
ProviderSettingsItem,
=======
>>>>>>> a4e66bae0... Update storybook for Sidebar
} from '.';
import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
plugins/user-settings/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-user-settings",
"version": "0.1.1-alpha.21",
"version": "0.1.1-alpha.23",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "Apache-2.0",
plugins/user-settings/src/components/ConfiguredProviderSettings.test.tsx → plugins/user-settings/src/components/DefaultProviderSettings.test.tsx
+4 -5
View File
@@ -24,7 +24,7 @@ import {
import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
import { fireEvent } from '@testing-library/react';
import * as React from 'react';
import { ConfiguredProviderSettings } from './ConfiguredProviderSettings';
import { DefaultProviderSettings } from './DefaultProviderSettings';
const mockSignInHandler = jest.fn().mockReturnValue('');
const mockGoogleAuth = {
@@ -33,7 +33,7 @@ const mockGoogleAuth = {
unsubscribe: () => null,
}),
}),
getIdToken: mockSignInHandler,
signIn: mockSignInHandler,
};
const createConfig = () =>
@@ -62,7 +62,7 @@ describe('<ConfiguredProviderSettings />', () => {
const rendered = await renderWithEffects(
wrapInTestApp(
<ApiProvider apis={apiRegistry}>
<ConfiguredProviderSettings />
<DefaultProviderSettings />
</ApiProvider>,
),
);
@@ -73,8 +73,7 @@ describe('<ConfiguredProviderSettings />', () => {
).toBeInTheDocument();
const button = rendered.getByTitle('Sign in to Google');
expect(mockSignInHandler).toHaveBeenCalledTimes(1);
fireEvent.click(button);
expect(mockSignInHandler).toHaveBeenCalledTimes(2);
expect(mockSignInHandler).toHaveBeenCalledTimes(1);
});
});
plugins/user-settings/src/components/ConfiguredProviderSettings.tsx → plugins/user-settings/src/components/DefaultProviderSettings.tsx
+8 -11
View File
@@ -21,15 +21,13 @@ import {
oauth2ApiRef,
oktaAuthApiRef,
microsoftAuthApiRef,
samlAuthApiRef,
useApi,
} from '@backstage/core';
import Star from '@material-ui/icons/Star';
import React from 'react';
import { OAuthProviderSettings } from './OAuthProviderSettings';
import { OIDCProviderSettings } from './OIDCProviderSettings';
import { ProviderSettingsItem } from './ProviderSettingsItem';
export const ConfiguredProviderSettings = () => {
export const DefaultProviderSettings = () => {
const configApi = useApi(configApiRef);
const providersConfig = configApi.getOptionalConfig('auth.providers');
const providers = providersConfig?.keys() ?? [];
@@ -39,6 +37,7 @@ export const ConfiguredProviderSettings = () => {
{providers.includes('google') && (
<ProviderSettingsItem
title="Google"
description={googleAuthApiRef.description}
apiRef={googleAuthApiRef}
icon={Star}
/>
@@ -46,6 +45,7 @@ export const ConfiguredProviderSettings = () => {
{providers.includes('microsoft') && (
<ProviderSettingsItem
title="Microsoft"
description={microsoftAuthApiRef.description}
apiRef={microsoftAuthApiRef}
icon={Star}
/>
@@ -53,6 +53,7 @@ export const ConfiguredProviderSettings = () => {
{providers.includes('github') && (
<ProviderSettingsItem
title="Github"
description={githubAuthApiRef.description}
apiRef={githubAuthApiRef}
icon={Star}
/>
@@ -60,6 +61,7 @@ export const ConfiguredProviderSettings = () => {
{providers.includes('gitlab') && (
<ProviderSettingsItem
title="Gitlab"
description={gitlabAuthApiRef.description}
apiRef={gitlabAuthApiRef}
icon={Star}
/>
@@ -67,20 +69,15 @@ export const ConfiguredProviderSettings = () => {
{providers.includes('okta') && (
<ProviderSettingsItem
title="Okta"
description={oktaAuthApiRef.description}
apiRef={oktaAuthApiRef}
icon={Star}
/>
)}
{providers.includes('saml') && (
<ProviderSettingsItem
title="SAML"
apiRef={samlAuthApiRef}
icon={Star}
/>
)}
{providers.includes('oauth2') && (
<ProviderSettingsItem
title="YourOrg"
description={oauth2ApiRef.description}
apiRef={oauth2ApiRef}
icon={Star}
/>
plugins/user-settings/src/components/OAuthProviderSettings.tsx
-81
View File
@@ -1,81 +0,0 @@
/*
* 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}
description={apiRef.description}
icon={icon}
signedIn={signedIn}
api={api}
signInHandler={() => api.getAccessToken()}
/>
);
};
plugins/user-settings/src/components/OIDCProviderSettings.tsx
-82
View File
@@ -1,82 +0,0 @@
/*
* 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}
description={apiRef.description}
icon={icon}
signedIn={signedIn}
api={api}
signInHandler={() => api.getIdToken()}
/>
);
};
plugins/user-settings/src/components/ProviderSettingsItem.tsx
+64 -46
View File
@@ -13,9 +13,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { IconComponent, OAuthApi, OpenIdConnectApi } from '@backstage/core';
import React, { useEffect, useState } from 'react';
import {
ApiRef,
SessionApi,
useApi,
IconComponent,
SessionState,
} from '@backstage/core';
import {
ListItem,
ListItemIcon,
@@ -25,57 +30,70 @@ import {
} from '@material-ui/core';
import PowerButton from '@material-ui/icons/PowerSettingsNew';
import { ToggleButton } from '@material-ui/lab';
import {
ApiRef,
SessionApi,
useApi,
IconComponent,
SessionState,
} from '@backstage/core-api';
type OAuthProviderSidebarProps = {
type Props = {
title: string;
description: string;
icon: IconComponent;
apiRef: ApiRef<SessionApi>;
};
export const ProviderSettingsItem: FC<OAuthProviderSidebarProps> = ({
export const ProviderSettingsItem = ({
title,
description,
icon: Icon,
signedIn,
api,
signInHandler,
}: Props) => (
<ListItem>
<ListItemIcon>
<Icon />
</ListItemIcon>
<ListItemText
primary={title}
secondary={
<Tooltip placement="top" arrow title={description}>
<span>{description}</span>
</Tooltip>
}
secondaryTypographyProps={{ noWrap: true, style: { width: '80%' } }}
/>
<ListItemSecondaryAction>
<Tooltip
placement="top"
arrow
title={signedIn ? `Sign out from ${title}` : `Sign in to ${title}`}
>
<ToggleButton
size="small"
value={title}
selected={signedIn}
onChange={() => (signedIn ? api.logout() : signInHandler())}
apiRef,
}: Props) => {
const api = useApi(apiRef);
const [signedIn, setSignedIn] = useState(false);
useEffect(() => {
let didCancel = false;
const subscription = api
.sessionState$()
.subscribe((sessionState: SessionState) => {
if (!didCancel) {
setSignedIn(sessionState === SessionState.SignedIn);
}
});
return () => {
didCancel = true;
subscription.unsubscribe();
};
}, [api]);
return (
<ListItem>
<ListItemIcon>
<Icon />
</ListItemIcon>
<ListItemText
primary={title}
secondary={
<Tooltip placement="top" arrow title={description}>
<span>{description}</span>
</Tooltip>
}
secondaryTypographyProps={{ noWrap: true, style: { width: '80%' } }}
/>
<ListItemSecondaryAction>
<Tooltip
placement="top"
arrow
title={signedIn ? `Sign out from ${title}` : `Sign in to ${title}`}
>
<PowerButton color={signedIn ? 'primary' : undefined} />
</ToggleButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
<ToggleButton
size="small"
value={title}
selected={signedIn}
onChange={() => (signedIn ? api.signOut() : api.signIn())}
>
<PowerButton color={signedIn ? 'primary' : undefined} />
</ToggleButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
};
plugins/user-settings/src/components/SettingsDialog.tsx
+3 -3
View File
@@ -35,7 +35,7 @@ import {
CardTab,
InfoCard,
} from '@backstage/core';
import { ConfiguredProviderSettings } from './ConfiguredProviderSettings';
import { DefaultProviderSettings } from './DefaultProviderSettings';
import { ProviderSettings } from './UserSettings';
import { Alert } from '@material-ui/lab';
@@ -61,7 +61,7 @@ export const SettingsDialog = ({
const featureFlags = featureFlagsApi.getRegisteredFlags();
const [selectedTab, setSelectedTab] = useState<string | number>('auth');
const providers = providerSettings ?? <ConfiguredProviderSettings />;
const providers = providerSettings ?? <DefaultProviderSettings />;
const handleChange = (
_ev: ChangeEvent<{}>,
@@ -107,7 +107,7 @@ export const SettingsDialog = ({
{featureFlags.length > 0 ? (
<FeatureFlagsList featureFlags={featureFlags} />
) : (
// TODO(marcuseide): Replace with empty state component
// TODO(marcuseide): Replace with empty state component?
<Alert severity="info">No registered Feature Flags found</Alert>
)}
</CardTab>