Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

refactor(console): support isFullWidth for CopyToClipboard component (#5172)

Browse source
This commit is contained in:
Xiao Yijun 2023-12-28 10:59:52 +08:00 committed by GitHub
parent acb7fd3fea
commit 7e2016d20e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 22 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/ds-components/CopyToClipboard/index.module.scss
View file

@ -19,6 +19,10 @@
border: 1px solid var(--color-border);
}
&.fullWidth {
width: 100%;
}
.row {
display: flex;
align-items: center;

10
packages/console/src/ds-components/CopyToClipboard/index.tsx
View file

@ -31,6 +31,7 @@ type Props = {
hasVisibilityToggle?: boolean;
size?: 'default' | 'small';
isWordWrapAllowed?: boolean;
isFullWidth?: boolean;
};
type CopyState = TFuncKey<'translation', 'admin_console.general'>;
@ -45,6 +46,7 @@ function CopyToClipboard(
variant = 'contained',
size = 'default',
isWordWrapAllowed = false,
isFullWidth = false,
}: Props,
ref: ForwardedRef<HTMLDivElement>
) {
@ -80,7 +82,13 @@ function CopyToClipboard(
return (
<div
ref={ref}
className={classNames(styles.container, styles[variant], styles[size], className)}
className={classNames(
styles.container,
styles[variant],
styles[size],
isFullWidth && styles.fullWidth,
className
)}
role="button"
tabIndex={0}
style={style}

4
packages/console/src/mdx-components/ApplicationCredentials/index.module.scss
View file

@ -1,9 +1,5 @@
@use '@/scss/underscore' as _;
.textField {
@include _.form-text-field;
}
.container {
margin: _.unit(6) 0;
}

9
packages/console/src/mdx-components/ApplicationCredentials/index.tsx
View file

@ -34,17 +34,12 @@ function ApplicationCredentials() {
</Trans>
)}
>
<CopyToClipboard value={id} variant="border" className={styles.textField} />
<CopyToClipboard isFullWidth value={id} variant="border" />
</FormField>
)}
{secret && (
<FormField title="application_details.application_secret">
<CopyToClipboard
hasVisibilityToggle
value={secret}
variant="border"
className={styles.textField}
/>
<CopyToClipboard isFullWidth hasVisibilityToggle value={secret} variant="border" />
</FormField>
)}
</div>

8
packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx
View file

@ -57,7 +57,7 @@ function AdvancedSettings({ app: { type }, oidcConfig }: Props) {
{tenantEndpoint && (
<FormField title="application_details.config_endpoint">
<CopyToClipboard
className={styles.textField}
isFullWidth
value={applyCustomDomain(appendPath(tenantEndpoint, openIdProviderConfigPath).href)}
variant="border"
/>
@ -82,21 +82,21 @@ function AdvancedSettings({ app: { type }, oidcConfig }: Props) {
)}
>
<CopyToClipboard
className={styles.textField}
isFullWidth
value={applyCustomDomain(oidcConfig.authorization_endpoint)}
variant="border"
/>
</FormField>
<FormField title="application_details.token_endpoint">
<CopyToClipboard
className={styles.textField}
isFullWidth
value={applyCustomDomain(oidcConfig.token_endpoint)}
variant="border"
/>
</FormField>
<FormField title="application_details.user_info_endpoint">
<CopyToClipboard
className={styles.textField}
isFullWidth
value={applyCustomDomain(oidcConfig.userinfo_endpoint)}
variant="border"
/>

11
packages/console/src/pages/ApplicationDetails/components/Settings.tsx
View file

@ -20,8 +20,6 @@ import TextLink from '@/ds-components/TextLink';
import useCustomDomain from '@/hooks/use-custom-domain';
import useDocumentationUrl from '@/hooks/use-documentation-url';
import * as styles from '../index.module.scss';
type Props = {
data: Application;
};
@ -67,9 +65,9 @@ function Settings({ data }: Props) {
{tenantEndpoint && (
<FormField title="application_details.logto_endpoint">
<CopyToClipboard
isFullWidth
value={applyCustomDomain(tenantEndpoint.href)}
variant="border"
className={styles.textField}
/>
</FormField>
)}
@ -83,12 +81,7 @@ function Settings({ data }: Props) {
applicationType
) && (
<FormField title="application_details.application_secret">
<CopyToClipboard
hasVisibilityToggle
value={secret}
variant="border"
className={styles.textField}
/>
<CopyToClipboard hasVisibilityToggle isFullWidth value={secret} variant="border" />
</FormField>
)}
{applicationType !== ApplicationType.MachineToMachine && (

4
packages/console/src/pages/ApplicationDetails/index.module.scss
View file

@ -14,10 +14,6 @@
}
}
.textField {
@include _.form-text-field;
}
.customEndpointNotes {
margin-top: _.unit(6);
font: var(--font-body-2);

4
packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/index.module.scss
View file

@ -1,9 +1,5 @@
@use '@/scss/underscore' as _;
.textField {
@include _.form-text-field;
}
.description {
color: var(--color-text-secondary);
font: var(--font-body-2);

3
packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/index.tsx
View file

@ -12,7 +12,6 @@ import { type TenantSettingsForm } from '../types.js';
import TenantEnvironment from './TenantEnvironment/index.js';
import TenantRegion from './TenantRegion/index.js';
import * as styles from './index.module.scss';
type Props = {
currentTenantId: string;
@ -48,7 +47,7 @@ function ProfileForm({ currentTenantId }: Props) {
return (
<FormCard title="tenants.settings.title" description="tenants.settings.description">
<FormField title="tenants.settings.tenant_id">
<CopyToClipboard value={currentTenantId} variant="border" className={styles.textField} />
<CopyToClipboard isFullWidth value={currentTenantId} variant="border" />
</FormField>
<FormField isRequired title="tenants.settings.tenant_name">
<TextInput

1
packages/console/src/scss/_dimensions.scss
View file

@ -5,7 +5,6 @@ $modal-layout-width-small: 352px;
$modal-layout-grid-large: 850px;
$modal-layout-grid-medium: 668px;
$modal-layout-grid-small: 500px;
$form-text-field-width: 556px;
// Guide related dimensions
$guide-main-content-max-width: 858px;