fix(console): copy to clipboard component should display at full widt…

…h properly (#5764)
logto-io · Apr 19, 2024 · 0b49f9c · 0b49f9c
1 parent 3ddf63b
commit 0b49f9c
Show file tree

Hide file tree

Showing 21 changed files with 37 additions and 60 deletions.
diff --git 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);

diff --git 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)}
           />

diff --git 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 {

diff --git 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"

diff --git 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>

diff --git 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;
 }
diff --git 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())}
       />

diff --git 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;
 }
diff --git 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 ?? ''}
         />

diff --git a/...onsole/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials.tsx b/...onsole/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,15 +137,20 @@ 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,
         ApplicationType.MachineToMachine,
         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>

diff --git a/...ages/console/src/pages/EnterpriseSsoDetails/Connection/OidcMetadataForm/index.module.scss b/...ages/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);
 }
diff --git 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'}

diff --git a/.../console/src/pages/EnterpriseSsoDetails/Connection/SamlAttributeMapping/index.module.scss b/.../console/src/pages/EnterpriseSsoDetails/Connection/SamlAttributeMapping/index.module.scss
@@ -1,9 +1,5 @@
 @use '@/scss/underscore' as _;
 
-.copyToClipboard {
-  display: block;
-}
-
 .table {
   width: 100%;
 }

diff --git 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])}
                   />

diff --git a/...es/EnterpriseSsoDetails/Connection/SamlMetadataForm/ParsedConfigPreview/index.module.scss b/...es/EnterpriseSsoDetails/Connection/SamlMetadataForm/ParsedConfigPreview/index.module.scss
@@ -44,8 +44,4 @@
   .errorStatus {
     background: var(--color-on-error-container);
   }
-
-  .copyToClipboard {
-    margin-left: _.unit(1);
-  }
 }
diff --git a/.../src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/ParsedConfigPreview/index.tsx b/.../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>
   );
 }

diff --git a/...ole/src/pages/EnterpriseSsoDetails/Connection/ServiceProviderInfo/OidcConnectorSpInfo.tsx b/...ole/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())}
       />

diff --git a/...ole/src/pages/EnterpriseSsoDetails/Connection/ServiceProviderInfo/SamlConnectorSpInfo.tsx b/...ole/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 &&

diff --git a/...s/console/src/pages/EnterpriseSsoDetails/Connection/ServiceProviderInfo/index.module.scss b/...s/console/src/pages/EnterpriseSsoDetails/Connection/ServiceProviderInfo/index.module.scss
diff --git 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

diff --git 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
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ export function CertificatePreview({ @@
               ),
             }}
           />
-          <CopyToClipboard className={styles.copyToClipboard} variant="icon" value={x509Certificate} />
+          <CopyToClipboard displayType="block" variant="icon" value={x509Certificate} />
         </div>
       );
     }
@@ Expand Down @@