refactor(console): make guide related components more generic (#4731)

packages/console/src/components/ActionBar/index.tsx

@@ -6,12 +6,11 @@ import * as styles from './index.module.scss';
 
 type Props = {
   step: number;
+  totalSteps: number;
   children: ReactNode;
 };
 
-const totalSteps = 2;
-
-function ActionBar({ step, children }: Props) {
+function ActionBar({ step, totalSteps, children }: Props) {
   return (
     <div className={styles.container}>
       <ProgressBar currentStep={step} totalSteps={totalSteps} />

packages/console/src/components/Guide/ModalHeader/index.module.scss

@@ -1,45 +1,11 @@
 @use '@/scss/underscore' as _;
 
-.header {
-  display: flex;
-  align-items: center;
-  background-color: var(--color-base);
-  width: 100%;
-  height: 64px;
-  padding: 0 _.unit(6);
-  flex-shrink: 0;
-
-  .separator {
-    @include _.vertical-bar;
-    height: 20px;
-    margin: 0 _.unit(5) 0 _.unit(4);
-  }
-
-  .closeIcon {
-    color: var(--color-text-secondary);
-  }
-
-  .githubToolTipAnchor {
-    margin-right: _.unit(4);
-  }
-
-  .githubIcon {
-    div {
-      display: flex;
-    }
-
-    svg {
-      color: var(--color-text);
-    }
-  }
-
-  .requestSdkButton {
-    margin-right: _.unit(15);
-  }
+.requestSdkButton {
+  margin-right: _.unit(15);
 }
 
 @media screen and (max-width: 918px) {
-  .header .requestSdkButton {
+  .requestSdkButton {
     margin-right: 0;
   }
 }

packages/console/src/components/Guide/ModalHeader/index.tsx

@@ -2,13 +2,10 @@ import { type AdminConsoleKey } from '@logto/phrases';
 import { useCallback, useState } from 'react';
 
 import Box from '@/assets/icons/box.svg';
-import Close from '@/assets/icons/close.svg';
 import { githubIssuesLink } from '@/consts';
 import { isCloud } from '@/consts/env';
 import Button from '@/ds-components/Button';
-import CardTitle from '@/ds-components/CardTitle';
-import IconButton from '@/ds-components/IconButton';
-import Spacer from '@/ds-components/Spacer';
+import DsModalHeader from '@/ds-components/ModalHeader';
 
 import RequestForm from './RequestForm';
 import * as styles from './index.module.scss';
@@ -40,25 +37,26 @@ function ModalHeader({
   }, []);
 
   return (
-    <div className={styles.header}>
-      <IconButton size="large" onClick={onClose}>
-        <Close className={styles.closeIcon} />
-      </IconButton>
-      <div className={styles.separator} />
-      <CardTitle size="small" title={title} subtitle={subtitle} />
-      <Spacer />
-      <Button
-        className={styles.requestSdkButton}
-        type="outline"
-        icon={<Box />}
-        title={buttonText}
-        onClick={() => {
-          if (isCloud) {
-            setIsRequestGuideOpen(true);
-          } else {
-            window.open(githubIssuesLink, '_blank');
-          }
-        }}
+    <>
+      <DsModalHeader
+        title={title}
+        subtitle={subtitle}
+        actionButton={
+          <Button
+            className={styles.requestSdkButton}
+            type="outline"
+            icon={<Box />}
+            title={buttonText}
+            onClick={() => {
+              if (isCloud) {
+                setIsRequestGuideOpen(true);
+              } else {
+                window.open(githubIssuesLink, '_blank');
+              }
+            }}
+          />
+        }
+        onClose={onClose}
       />
       {isCloud && (
         <RequestForm
@@ -70,7 +68,7 @@ function ModalHeader({
           onClose={onRequestGuideClose}
         />
       )}
-    </div>
+    </>
   );
 }
 

packages/console/src/ds-components/ModalHeader/index.module.scss

@@ -0,0 +1,21 @@
+@use '@/scss/underscore' as _;
+
+.header {
+  display: flex;
+  align-items: center;
+  background-color: var(--color-base);
+  width: 100%;
+  height: 64px;
+  padding: 0 _.unit(6);
+  flex-shrink: 0;
+
+  .separator {
+    @include _.vertical-bar;
+    height: 20px;
+    margin: 0 _.unit(5) 0 _.unit(4);
+  }
+
+  .closeIcon {
+    color: var(--color-text-secondary);
+  }
+}

packages/console/src/ds-components/ModalHeader/index.tsx

@@ -0,0 +1,33 @@
+import { type AdminConsoleKey } from '@logto/phrases';
+import { type ReactNode } from 'react';
+
+import Close from '@/assets/icons/close.svg';
+
+import CardTitle from '../CardTitle';
+import IconButton from '../IconButton';
+import Spacer from '../Spacer';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  title: AdminConsoleKey;
+  subtitle: AdminConsoleKey;
+  actionButton?: ReactNode;
+  onClose: () => void;
+};
+
+function ModalHeader({ title, subtitle, actionButton, onClose }: Props) {
+  return (
+    <div className={styles.header}>
+      <IconButton size="large" onClick={onClose}>
+        <Close className={styles.closeIcon} />
+      </IconButton>
+      <div className={styles.separator} />
+      <CardTitle size="small" title={title} subtitle={subtitle} />
+      <Spacer />
+      {actionButton}
+    </div>
+  );
+}
+
+export default ModalHeader;

packages/console/src/onboarding/pages/SignInExperience/index.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
 import Tools from '@/assets/icons/tools.svg';
+import ActionBar from '@/components/ActionBar';
 import PageMeta from '@/components/PageMeta';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
@@ -20,7 +21,6 @@ import useApi from '@/hooks/use-api';
 import type { RequestError } from '@/hooks/use-api';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 import useUserAssetsService from '@/hooks/use-user-assets-service';
-import ActionBar from '@/onboarding/components/ActionBar';
 import { CardSelector, MultiCardSelector } from '@/onboarding/components/CardSelector';
 import useUserOnboardingData from '@/onboarding/hooks/use-user-onboarding-data';
 import * as pageLayout from '@/onboarding/scss/layout.module.scss';
@@ -237,7 +237,7 @@ function SignInExperience() {
           <Preview className={styles.preview} signInExperience={previewSieConfig} />
         </div>
       </OverlayScrollbar>
-      <ActionBar step={2}>
+      <ActionBar step={2} totalSteps={2}>
         <div className={styles.continueActions}>
           <Button
             type="primary"

packages/console/src/onboarding/pages/Welcome/index.tsx

@@ -5,6 +5,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import Case from '@/assets/icons/case.svg';
+import ActionBar from '@/components/ActionBar';
 import PageMeta from '@/components/PageMeta';
 import Button from '@/ds-components/Button';
 import FormField from '@/ds-components/FormField';
@@ -15,7 +16,6 @@ import useUserOnboardingData from '@/onboarding/hooks/use-user-onboarding-data';
 import * as pageLayout from '@/onboarding/scss/layout.module.scss';
 import { trySubmitSafe } from '@/utils/form';
 
-import ActionBar from '../../components/ActionBar';
 import { CardSelector, MultiCardSelector } from '../../components/CardSelector';
 import type { Questionnaire } from '../../types';
 import { OnboardingPage, Project } from '../../types';
@@ -138,7 +138,7 @@ function Welcome() {
           </form>
         </div>
       </OverlayScrollbar>
-      <ActionBar step={1}>
+      <ActionBar step={1} totalSteps={2}>
         <Button title="general.next" type="primary" onClick={onNext} />
       </ActionBar>
     </div>