fix(console): copy to clipboard component should display at full width properly (#5764)

2024-12-16 20:26:19 -05:00 · 2024-04-19 18:03:17 +08:00 · 2024-04-19 18:03:17 +08:00 · 0b49f9cf83
commit 0b49f9cf83
parent 3ddf63b6a5
21 changed files with 37 additions and 60 deletions
--- a/packages/console/src/components/ConnectorForm/ConfigForm/index.module.scss
+++ b/packages/console/src/components/ConnectorForm/ConfigForm/index.module.scss
@ -1,9 +1,5 @@
@use '@/scss/underscore' as _;

-.copyToClipboard {
-  display: block;
-}
-
 .description {
  color: var(--color-text-secondary);
  font: var(--font-body-2);
--- a/packages/console/src/components/ConnectorForm/ConfigForm/index.tsx
+++ b/packages/console/src/components/ConnectorForm/ConfigForm/index.tsx
@ -56,7 +56,7 @@ function ConfigForm({
          tip={conditional(!isSamlConnector && t('connectors.guide.callback_uri_description'))}
        >
          <CopyToClipboard
-            className={styles.copyToClipboard}
+            displayType="block"
            variant="border"
            value={applyCustomDomain(displayUrl)}
          />
--- a/packages/console/src/ds-components/CopyToClipboard/index.module.scss
+++ b/packages/console/src/ds-components/CopyToClipboard/index.module.scss
@ -19,8 +19,8 @@
    border: 1px solid var(--color-border);
  }

-  &.fullWidth {
-    width: 100%;
+  &.block {
+    display: block;
  }

  .row {
--- a/packages/console/src/ds-components/CopyToClipboard/index.tsx
+++ b/packages/console/src/ds-components/CopyToClipboard/index.tsx
@ -30,8 +30,8 @@ type Props = {
  readonly variant?: 'text' | 'contained' | 'border' | 'icon';
  readonly hasVisibilityToggle?: boolean;
  readonly size?: 'default' | 'small';
+  readonly displayType?: 'block' | 'inline';
  readonly isWordWrapAllowed?: boolean;
-  readonly isFullWidth?: boolean;
 };

 type CopyState = TFuncKey<'translation', 'admin_console.general'>;
@ -46,7 +46,7 @@ function CopyToClipboard(
    variant = 'contained',
    size = 'default',
    isWordWrapAllowed = false,
-    isFullWidth = false,
+    displayType = 'inline',
  }: Props,
  ref: ForwardedRef<HTMLDivElement>
 ) {
@ -90,7 +90,7 @@ function CopyToClipboard(
        styles.container,
        styles[variant],
        styles[size],
-        isFullWidth && styles.fullWidth,
+        styles[displayType],
        className
      )}
      role="button"
--- a/packages/console/src/mdx-components/ApplicationCredentials/index.tsx
+++ b/packages/console/src/mdx-components/ApplicationCredentials/index.tsx
@ -34,12 +34,17 @@ function ApplicationCredentials() {
            </Trans>
          )}
        >
-          <CopyToClipboard isFullWidth value={id} variant="border" />
+          <CopyToClipboard displayType="block" value={id} variant="border" />
        </FormField>
      )}
      {secret && (
        <FormField title="application_details.application_secret">
-          <CopyToClipboard isFullWidth hasVisibilityToggle value={secret} variant="border" />
+          <CopyToClipboard
+            hasVisibilityToggle
+            displayType="block"
+            value={secret}
+            variant="border"
+          />
        </FormField>
      )}
    </div>
--- a/packages/console/src/mdx-components/OidcCallbackUri/index.module.scss
+++ b/packages/console/src/mdx-components/OidcCallbackUri/index.module.scss
@ -1,9 +1,5 @@
@use '@/scss/underscore' as _;

-.copyToClipboard {
-  display: block;
-}
-
 .inputField {
  margin: _.unit(4) 0;
 }
--- a/packages/console/src/mdx-components/OidcCallbackUri/index.tsx
+++ b/packages/console/src/mdx-components/OidcCallbackUri/index.tsx
@ -25,7 +25,7 @@ function OidcCallbackUri() {
      className={styles.inputField}
    >
      <CopyToClipboard
-        className={styles.copyToClipboard}
+        displayType="block"
        variant="border"
        value={applyCustomDomain(new URL(`/callback/${id}`, tenantEndpoint).toString())}
      />
--- a/packages/console/src/mdx-components/SsoSamlSpMetadata/index.module.scss
+++ b/packages/console/src/mdx-components/SsoSamlSpMetadata/index.module.scss
@ -1,9 +1,5 @@
@use '@/scss/underscore' as _;

-.copyToClipboard {
-  display: block;
-}
-
 .inputField {
  margin: _.unit(4) 0;
 }
--- a/packages/console/src/mdx-components/SsoSamlSpMetadata/index.tsx
+++ b/packages/console/src/mdx-components/SsoSamlSpMetadata/index.tsx
@ -47,7 +47,7 @@ function SsoSamlSpMetadata() {
        className={styles.inputField}
      >
        <CopyToClipboard
-          className={styles.copyToClipboard}
+          displayType="block"
          variant="border"
          value={serviceProviderMetadata?.entityId ?? ''}
        />
@ -57,7 +57,7 @@ function SsoSamlSpMetadata() {
        className={styles.inputField}
      >
        <CopyToClipboard
-          className={styles.copyToClipboard}
+          displayType="block"
          variant="border"
          value={serviceProviderMetadata?.assertionConsumerServiceUrl ?? ''}
        />
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials.tsx
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials.tsx
@ -54,7 +54,7 @@ function EndpointsAndCredentials({ app: { type, secret, id, isThirdParty }, oidc
      {tenantEndpoint && !isThirdParty && (
        <FormField title="application_details.logto_endpoint">
          <CopyToClipboard
-            isFullWidth
+            displayType="block"
            value={applyCustomDomain(tenantEndpoint.href)}
            variant="border"
          />
@ -63,7 +63,7 @@ function EndpointsAndCredentials({ app: { type, secret, id, isThirdParty }, oidc
      {tenantEndpoint && (
        <FormField title="application_details.config_endpoint">
          <CopyToClipboard
-            isFullWidth
+            displayType="block"
            value={applyCustomDomain(appendPath(tenantEndpoint, openIdProviderConfigPath).href)}
            variant="border"
          />
@ -90,21 +90,21 @@ function EndpointsAndCredentials({ app: { type, secret, id, isThirdParty }, oidc
            )}
          >
            <CopyToClipboard
-              isFullWidth
+              displayType="block"
              value={applyCustomDomain(oidcConfig.authorization_endpoint)}
              variant="border"
            />
          </FormField>
          <FormField title="application_details.token_endpoint">
            <CopyToClipboard
-              isFullWidth
+              displayType="block"
              value={applyCustomDomain(oidcConfig.token_endpoint)}
              variant="border"
            />
          </FormField>
          <FormField title="application_details.user_info_endpoint">
            <CopyToClipboard
-              isFullWidth
+              displayType="block"
              value={applyCustomDomain(oidcConfig.userinfo_endpoint)}
              variant="border"
            />
@ -137,7 +137,7 @@ function EndpointsAndCredentials({ app: { type, secret, id, isThirdParty }, oidc
        </div>
      )}
      <FormField title="application_details.application_id">
-        <CopyToClipboard isFullWidth value={id} variant="border" />
+        <CopyToClipboard displayType="block" value={id} variant="border" />
      </FormField>
      {[
        ApplicationType.Traditional,
@ -145,7 +145,12 @@ function EndpointsAndCredentials({ app: { type, secret, id, isThirdParty }, oidc
        ApplicationType.Protected,
      ].includes(type) && (
        <FormField title="application_details.application_secret">
-          <CopyToClipboard hasVisibilityToggle isFullWidth value={secret} variant="border" />
+          <CopyToClipboard
+            hasVisibilityToggle
+            displayType="block"
+            value={secret}
+            variant="border"
+          />
        </FormField>
      )}
    </FormCard>
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/OidcMetadataForm/index.module.scss
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/OidcMetadataForm/index.module.scss
@ -1,9 +1,5 @@
@use '@/scss/underscore' as _;

-.copyToClipboard {
-  display: block;
-}
-
 .oidcConfigPreview {
  margin-top: _.unit(3);
 }
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/OidcMetadataForm/index.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/OidcMetadataForm/index.tsx
@ -57,7 +57,7 @@ function OidcMetadataForm({ providerConfig, config, providerName }: Props) {
      >
        {providerName === SsoProviderName.GOOGLE_WORKSPACE ? (
          <CopyToClipboard
-            className={styles.copyToClipboard}
+            displayType="block"
            variant="border"
            // TODO: this hard-coded value should align with the `googleIssuer` value defined in `packages/core/src/sso/GoogleWorkspaceSsoConnector/index.ts`.
            value={providerConfig?.issuer ?? 'https://accounts.google.com'}
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlAttributeMapping/index.module.scss
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlAttributeMapping/index.module.scss
@ -1,9 +1,5 @@
@use '@/scss/underscore' as _;

-.copyToClipboard {
-  display: block;
-}
-
 .table {
  width: 100%;
 }
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlAttributeMapping/index.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlAttributeMapping/index.tsx
@ -38,14 +38,14 @@ function SamlAttributeMapping({ samlProviderConfig }: Props) {
          return (
            <tr key={key} className={styles.row}>
              <td>
-                <CopyToClipboard className={styles.copyToClipboard} variant="border" value={key} />
+                <CopyToClipboard displayType="block" variant="border" value={key} />
              </td>
              <td>
                {/* Show default value of `id` field to show that Logto has handled the default value. */}
                {/* Per SAML protocol, this field is not eligible to change in most cases. */}
                {key === 'id' ? (
                  <CopyToClipboard
-                    className={styles.copyToClipboard}
+                    displayType="block"
                    variant="border"
                    value={conditionalString(samlProviderConfig?.defaultAttributeMapping[key])}
                  />
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/ParsedConfigPreview/index.module.scss
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/ParsedConfigPreview/index.module.scss
@ -44,8 +44,4 @@
  .errorStatus {
    background: var(--color-on-error-container);
  }
-
-  .copyToClipboard {
-    margin-left: _.unit(1);
-  }
 }
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/ParsedConfigPreview/index.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/ParsedConfigPreview/index.tsx
@ -46,7 +46,7 @@ export function CertificatePreview({
          ),
        }}
      />
-      <CopyToClipboard className={styles.copyToClipboard} variant="icon" value={x509Certificate} />
+      <CopyToClipboard displayType="block" variant="icon" value={x509Certificate} />
    </div>
  );
 }
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/ServiceProviderInfo/OidcConnectorSpInfo.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/ServiceProviderInfo/OidcConnectorSpInfo.tsx
@ -5,8 +5,6 @@ import CopyToClipboard from '@/ds-components/CopyToClipboard';
 import FormField from '@/ds-components/FormField';
 import useCustomDomain from '@/hooks/use-custom-domain';

-import * as styles from './index.module.scss';
-
 type Props = {
  readonly ssoConnectorId: string;
 };
@ -19,7 +17,7 @@ function OidcConnectorSpInfo({ ssoConnectorId }: Props) {
    <FormField title="enterprise_sso.basic_info.oidc.redirect_uri_field_name">
      {/* Generated and passed in by Admin console. */}
      <CopyToClipboard
-        className={styles.copyToClipboard}
+        displayType="block"
        variant="border"
        value={applyCustomDomain(new URL(`/callback/${ssoConnectorId}`, tenantEndpoint).toString())}
      />
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/ServiceProviderInfo/SamlConnectorSpInfo.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/ServiceProviderInfo/SamlConnectorSpInfo.tsx
@ -6,8 +6,6 @@ import useCustomDomain from '@/hooks/use-custom-domain';

 import { type SamlProviderConfig } from '../../types/saml';

-import * as styles from './index.module.scss';
-
 type Props = {
  readonly samlProviderConfig?: SamlProviderConfig;
 };
@ -23,7 +21,7 @@ function SamlConnectorSpInfo({ samlProviderConfig }: Props) {
    <>
      <FormField title="enterprise_sso.basic_info.saml.acs_url_field_name">
        <CopyToClipboard
-          className={styles.copyToClipboard}
+          displayType="block"
          variant="border"
          value={conditionalString(
            samlProviderConfig?.serviceProvider &&
@ -33,7 +31,7 @@ function SamlConnectorSpInfo({ samlProviderConfig }: Props) {
      </FormField>
      <FormField title="enterprise_sso.basic_info.saml.audience_uri_field_name">
        <CopyToClipboard
-          className={styles.copyToClipboard}
+          displayType="block"
          variant="border"
          value={conditionalString(
            samlProviderConfig?.serviceProvider &&
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/ServiceProviderInfo/index.module.scss
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/ServiceProviderInfo/index.module.scss
@ -1,5 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.copyToClipboard {
-  display: block;
-}
--- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/index.tsx
+++ b/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/index.tsx
@ -28,7 +28,7 @@ function ProfileForm({ currentTenantId }: Props) {
  return (
    <FormCard title="tenants.settings.title" description="tenants.settings.description">
      <FormField title="tenants.settings.tenant_id">
-        <CopyToClipboard isFullWidth value={currentTenantId} variant="border" />
+        <CopyToClipboard displayType="block" value={currentTenantId} variant="border" />
      </FormField>
      <FormField isRequired title="tenants.settings.tenant_name">
        <TextInput
--- a/packages/integration-tests/src/tests/console/sso-connectors/helpers.ts
+++ b/packages/integration-tests/src/tests/console/sso-connectors/helpers.ts
@ -15,7 +15,7 @@ const getAndCheckValueByFieldName = async (page: Page, fieldName: string, expect
    { text: fieldName }
  );
  const value = await valueField.$eval(
-    [dcls('copyToClipboard'), dcls('row'), dcls('content')].join(' '),
+    [dcls('container'), dcls('row'), dcls('content')].join(' '),
    (element) => element.textContent
  );