refactor(console): reorg connector-related files (#4071)

packages/console/src/components/ConnectorForm/BasicForm/index.tsx

@@ -12,12 +12,11 @@ import Select from '@/ds-components/Select';
 import TextInput from '@/ds-components/TextInput';
 import TextLink from '@/ds-components/TextLink';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
+import type { ConnectorFormType } from '@/types/connector';
+import { SyncProfileMode } from '@/types/connector';
 import { uriValidator } from '@/utils/validator';
 
-import type { ConnectorFormType } from '../../types';
-import { SyncProfileMode } from '../../types';
-
-import * as styles from './BasicForm.module.scss';
+import * as styles from './index.module.scss';
 
 type Props = {
   isAllowEditTarget?: boolean;

packages/console/src/components/ConnectorForm/ConfigForm/ConfigFormFields/index.tsx

@@ -11,17 +11,16 @@ import Select from '@/ds-components/Select';
 import Switch from '@/ds-components/Switch';
 import TextInput from '@/ds-components/TextInput';
 import Textarea from '@/ds-components/Textarea';
+import type { ConnectorFormType } from '@/types/connector';
 import { jsonValidator } from '@/utils/validator';
 
-import type { ConnectorFormType } from '../../types';
-
-import * as styles from './ConfigForm.module.scss';
+import * as styles from './index.module.scss';
 
 type Props = {
   formItems: ConnectorConfigFormItem[];
 };
 
-function ConfigForm({ formItems }: Props) {
+function ConfigFormFields({ formItems }: Props) {
   const {
     watch,
     register,
@@ -163,4 +162,4 @@ function ConfigForm({ formItems }: Props) {
   );
 }
 
-export default ConfigForm;
+export default ConfigFormFields;

packages/console/src/components/ConnectorForm/ConfigForm/index.tsx

@@ -11,13 +11,12 @@ import CopyToClipboard from '@/ds-components/CopyToClipboard';
 import DynamicT from '@/ds-components/DynamicT';
 import FormField from '@/ds-components/FormField';
 import useCustomDomain from '@/hooks/use-custom-domain';
+import type { ConnectorFormType } from '@/types/connector';
 import { applyDomain } from '@/utils/domain';
 import { jsonValidator } from '@/utils/validator';
 
-import type { ConnectorFormType } from '../../types';
-import ConfigFormItems from '../ConfigForm';
-
-import * as styles from './ConfigForm.module.scss';
+import ConfigFormFields from './ConfigFormFields';
+import * as styles from './index.module.scss';
 
 type Props = {
   formItems?: ConnectorConfigFormItem[];
@@ -66,7 +65,7 @@ function ConfigForm({ formItems, className, connectorId, connectorType }: Props)
         </FormField>
       )}
       {formItems ? (
-        <ConfigFormItems formItems={formItems} />
+        <ConfigFormFields formItems={formItems} />
       ) : (
         <FormField title="connectors.guide.config">
           <Controller

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

@@ -27,7 +27,7 @@ type FormData = {
   sendTo: string;
 };
 
-function SenderTester({ connectorFactoryId, connectorType, className, parse }: Props) {
+function ConnectorTester({ connectorFactoryId, connectorType, className, parse }: Props) {
   const [showTooltip, setShowTooltip] = useState(false);
   const {
     handleSubmit,
@@ -116,4 +116,4 @@ function SenderTester({ connectorFactoryId, connectorType, className, parse }: P
   );
 }
 
-export default SenderTester;
+export default ConnectorTester;

packages/console/src/hooks/use-connector-form-config-parser.tsx

@@ -2,8 +2,8 @@ import type { ConnectorResponse } from '@logto/schemas';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 
-import { parseFormConfig } from '@/pages/Connectors/components/ConnectorForm/utils';
-import type { ConnectorFormType } from '@/pages/Connectors/types';
+import type { ConnectorFormType } from '@/types/connector';
+import { parseFormConfig } from '@/utils/connector-form';
 import { safeParseJson } from '@/utils/json';
 
 const useJsonStringConfigParser = () => {

packages/console/src/pages/ConnectorDetails/ConnectorContent/index.tsx

@@ -7,21 +7,20 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 
+import BasicForm from '@/components/ConnectorForm/BasicForm';
+import ConfigForm from '@/components/ConnectorForm/ConfigForm';
+import ConnectorTester from '@/components/ConnectorTester';
 import DetailsForm from '@/components/DetailsForm';
 import FormCard from '@/components/FormCard';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
 import useApi from '@/hooks/use-api';
+import { useConnectorFormConfigParser } from '@/hooks/use-connector-form-config-parser';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
-import BasicForm from '@/pages/Connectors/components/ConnectorForm/BasicForm';
-import ConfigForm from '@/pages/Connectors/components/ConnectorForm/ConfigForm';
-import { useConnectorFormConfigParser } from '@/pages/Connectors/components/ConnectorForm/hooks';
-import { initFormData } from '@/pages/Connectors/components/ConnectorForm/utils';
-import type { ConnectorFormType } from '@/pages/Connectors/types';
-import { SyncProfileMode } from '@/pages/Connectors/types';
+import { SyncProfileMode } from '@/types/connector';
+import type { ConnectorFormType } from '@/types/connector';
+import { initFormData } from '@/utils/connector-form';
 import { trySubmitSafe } from '@/utils/form';
 
-import SenderTester from './SenderTester';
-
 type Props = {
   isDeleted: boolean;
   connectorData: ConnectorResponse;
@@ -139,7 +138,7 @@ function ConnectorContent({ isDeleted, connectorData, onConnectorUpdated }: Prop
         {/* Tell typescript that the connectorType is Email or Sms */}
         {connectorData.type !== ConnectorType.Social && (
           <FormCard title="connector_details.test_connection">
-            <SenderTester
+            <ConnectorTester
               connectorFactoryId={connectorData.connectorId}
               connectorType={connectorData.type}
               parse={() => configParser(watch(), connectorData.formItems)}

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -11,6 +11,7 @@ import Delete from '@/assets/icons/delete.svg';
 import More from '@/assets/icons/more.svg';
 import Reset from '@/assets/icons/reset.svg';
 import ConnectorLogo from '@/components/ConnectorLogo';
+import DeleteConnectorConfirmModal from '@/components/DeleteConnectorConfirmModal';
 import DetailsPage from '@/components/DetailsPage';
 import Drawer from '@/components/Drawer';
 import Markdown from '@/components/Markdown';
@@ -27,12 +28,11 @@ import type { RequestError } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
 import useConnectorInUse from '@/hooks/use-connector-in-use';
 
-import CreateForm from '../Connectors/components/CreateForm';
+import CreateForm from '../Connectors/CreateForm';
 
-import ConnectorContent from './components/ConnectorContent';
-import ConnectorTabs from './components/ConnectorTabs';
-import ConnectorTypeName from './components/ConnectorTypeName';
-import DeleteConnectorConfirmModal from './components/DeleteConnectorConfirmModal';
+import ConnectorContent from './ConnectorContent';
+import ConnectorTabs from './ConnectorTabs';
+import ConnectorTypeName from './ConnectorTypeName';
 import * as styles from './index.module.scss';
 
 // TODO: refactor path-related operation utils in both Connectors and ConnectorDetails page

packages/console/src/pages/Connectors/ConnectorDeleteButton/index.tsx

@@ -5,11 +5,11 @@ import { useTranslation } from 'react-i18next';
 import { useSWRConfig } from 'swr';
 
 import Delete from '@/assets/icons/delete.svg';
+import DeleteConnectorConfirmModal from '@/components/DeleteConnectorConfirmModal';
 import IconButton from '@/ds-components/IconButton';
 import { Tooltip } from '@/ds-components/Tip';
 import useApi from '@/hooks/use-api';
 import useConnectorInUse from '@/hooks/use-connector-in-use';
-import DeleteConnectorConfirmModal from '@/pages/ConnectorDetails/components/DeleteConnectorConfirmModal';
 import type { ConnectorGroup } from '@/types/connector';
 
 type Props = {

packages/console/src/pages/Connectors/CreateForm/PlatformSelector/index.tsx

@@ -6,7 +6,7 @@ import { connectorPlatformLabel } from '@/consts/connectors';
 import RadioGroup, { Radio } from '@/ds-components/RadioGroup';
 import type { ConnectorGroup } from '@/types/connector';
 
-import * as styles from './PlatformSelector.module.scss';
+import * as styles from './index.module.scss';
 
 type Props = {
   connectorGroup: ConnectorGroup<ConnectorFactoryResponse & { added: boolean }>;

packages/console/src/pages/Connectors/CreateForm/Skeleton/index.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 
-import * as styles from './Skeleton.module.scss';
-import * as layout from './index.module.scss';
+import * as layout from '../index.module.scss';
+
+import * as styles from './index.module.scss';
 
 function Skeleton() {
   return (

packages/console/src/pages/Connectors/CreateForm/index.tsx

@@ -13,7 +13,7 @@ import RadioGroup, { Radio } from '@/ds-components/RadioGroup';
 import type { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
 
-import { getConnectorGroups } from '../../utils';
+import { getConnectorGroups } from '../utils';
 
 import PlatformSelector from './PlatformSelector';
 import Skeleton from './Skeleton';

packages/console/src/pages/Connectors/Guide/index.tsx

@@ -13,6 +13,9 @@ import Modal from 'react-modal';
 import { useNavigate } from 'react-router-dom';
 
 import Close from '@/assets/icons/close.svg';
+import BasicForm from '@/components/ConnectorForm/BasicForm';
+import ConfigForm from '@/components/ConnectorForm/ConfigForm';
+import ConnectorTester from '@/components/ConnectorTester';
 import Markdown from '@/components/Markdown';
 import { ConnectorsTabs } from '@/consts/page-tabs';
 import Button from '@/ds-components/Button';
@@ -22,17 +25,14 @@ import IconButton from '@/ds-components/IconButton';
 import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
 import useApi from '@/hooks/use-api';
 import useConfigs from '@/hooks/use-configs';
-import SenderTester from '@/pages/ConnectorDetails/components/SenderTester';
+import { useConnectorFormConfigParser } from '@/hooks/use-connector-form-config-parser';
 import * as modalStyles from '@/scss/modal.module.scss';
+import type { ConnectorFormType } from '@/types/connector';
+import { SyncProfileMode } from '@/types/connector';
+import { initFormData } from '@/utils/connector-form';
 import { trySubmitSafe } from '@/utils/form';
 
-import type { ConnectorFormType } from '../../types';
-import { SyncProfileMode } from '../../types';
-import { splitMarkdownByTitle } from '../../utils';
-import BasicForm from '../ConnectorForm/BasicForm';
-import ConfigForm from '../ConnectorForm/ConfigForm';
-import { useConnectorFormConfigParser } from '../ConnectorForm/hooks';
-import { initFormData } from '../ConnectorForm/utils';
+import { splitMarkdownByTitle } from '../utils';
 
 import * as styles from './index.module.scss';
 
@@ -220,7 +220,7 @@ function Guide({ connector, onClose }: Props) {
                       <div className={styles.number}>2</div>
                       <div>{t('connectors.guide.test_connection')}</div>
                     </div>
-                    <SenderTester
+                    <ConnectorTester
                       connectorFactoryId={connectorId}
                       connectorType={connectorType}
                       parse={() => configParser(watch(), formItems)}

packages/console/src/pages/Connectors/components/ConnectorName/DemoTag.module.scss

@@ -1,9 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.tag {
-  font: var(--font-label-3);
-  background-color: var(--color-alert-container);
-  padding: _.unit(0.5) _.unit(1.5);
-  border-radius: 10px;
-  user-select: none;
-}

packages/console/src/pages/Connectors/index.tsx

@@ -21,14 +21,14 @@ import useConnectorGroups from '@/hooks/use-connector-groups';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import DemoConnectorNotice from '@/onboarding/components/DemoConnectorNotice';
 
-import ConnectorDeleteButton from './components/ConnectorDeleteButton';
-import ConnectorName from './components/ConnectorName';
-import ConnectorStatus from './components/ConnectorStatus';
-import ConnectorStatusField from './components/ConnectorStatusField';
-import ConnectorTypeColumn from './components/ConnectorTypeColumn';
-import CreateForm from './components/CreateForm';
-import Guide from './components/Guide';
-import SignInExperienceSetupNotice from './components/SignInExperienceSetupNotice';
+import ConnectorDeleteButton from './ConnectorDeleteButton';
+import ConnectorName from './ConnectorName';
+import ConnectorStatus from './ConnectorStatus';
+import ConnectorStatusField from './ConnectorStatusField';
+import ConnectorTypeColumn from './ConnectorTypeColumn';
+import CreateForm from './CreateForm';
+import Guide from './Guide';
+import SignInExperienceSetupNotice from './SignInExperienceSetupNotice';
 import * as styles from './index.module.scss';
 
 const basePathname = '/connectors';

packages/console/src/pages/Connectors/types.ts

@@ -1,13 +0,0 @@
-export type ConnectorFormType = {
-  config: string;
-  name: string;
-  logo: string;
-  logoDark: string;
-  target: string;
-  syncProfile: SyncProfileMode;
-} & Record<string, unknown>; // Extend custom connector config form
-
-export enum SyncProfileMode {
-  OnlyAtRegister = 'OnlyAtRegister',
-  EachSignIn = 'EachSignIn',
-}

packages/console/src/types/connector.ts

@@ -7,3 +7,17 @@ export type ConnectorGroup<T = ConnectorResponse> = Pick<
   id: string;
   connectors: T[];
 };
+
+export enum SyncProfileMode {
+  OnlyAtRegister = 'OnlyAtRegister',
+  EachSignIn = 'EachSignIn',
+}
+
+export type ConnectorFormType = {
+  config: string;
+  name: string;
+  logo: string;
+  logoDark: string;
+  target: string;
+  syncProfile: SyncProfileMode;
+} & Record<string, unknown>; // Extend custom connector config form

packages/console/src/utils/connector-form.ts

@@ -1,10 +1,9 @@
 import type { ConnectorConfigFormItem } from '@logto/connector-kit';
 import { ConnectorConfigFormItemType } from '@logto/connector-kit';
 
+import type { ConnectorFormType } from '@/types/connector';
 import { safeParseJson } from '@/utils/json';
 
-import type { ConnectorFormType } from '../../types';
-
 export const initFormData = (
   formItems: ConnectorConfigFormItem[],
   config?: Record<string, unknown>