Merge pull request #506 from logto-io/charles-chore-refactor-connectors-components

chore(console): refactor connectors children components

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

@@ -22,7 +22,7 @@ import More from '@/icons/More';
 import Reset from '@/icons/Reset';
 import * as detailsStyles from '@/scss/details.module.scss';
 
-import SetupModal from '../Connectors/components/SetupModal';
+import CreateForm from '../Connectors/components/CreateForm';
 import SenderTester from './components/SenderTester';
 import * as styles from './index.module.scss';
 
@@ -159,7 +159,7 @@ const ConnectorDetails = () => {
                 {t('connector_details.options_delete')}
               </ActionMenuItem>
             </ActionMenu>
-            <SetupModal
+            <CreateForm
               isOpen={isSetupOpen}
               type={data.metadata.type}
               onClose={() => {

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

@@ -6,7 +6,7 @@ import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 import UnnamedTrans from '@/components/UnnamedTrans';
 
-import * as styles from './ConnectorName.module.scss';
+import * as styles from './index.module.scss';
 
 type Props = {
   connector?: ConnectorDTO;

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import Button from '@/components/Button';
 import Status from '@/components/Status';
 
-import ConnectorName from './ConnectorName';
+import ConnectorName from '../ConnectorName';
 
 type Props = {
   type: ConnectorType;

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

@@ -11,7 +11,7 @@ import UnnamedTrans from '@/components/UnnamedTrans';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
 
-import * as styles from './SetupModal.module.scss';
+import * as styles from './index.module.scss';
 
 type Props = {
   isOpen: boolean;
@@ -19,7 +19,7 @@ type Props = {
   type?: ConnectorType;
 };
 
-const SetupModal = ({ isOpen, onClose, type }: Props) => {
+const CreateForm = ({ isOpen, onClose, type }: Props) => {
   const [connectorId, setConnectorId] = useState<string>('');
   const { data, error } = useSWR<ConnectorDTO[], RequestError>('/api/connectors');
   const isLoading = !data && !error;
@@ -66,6 +66,7 @@ const SetupModal = ({ isOpen, onClose, type }: Props) => {
           />
         }
         className={styles.body}
+        size="large"
         onClose={onClose}
       >
         {isLoading && 'Loading...'}
@@ -103,4 +104,4 @@ const SetupModal = ({ isOpen, onClose, type }: Props) => {
   );
 };
 
-export default SetupModal;
+export default CreateForm;

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

@@ -16,7 +16,7 @@ import { RequestError } from '@/hooks/use-api';
 import * as tableStyles from '@/scss/table.module.scss';
 
 import ConnectorRow from './components/ConnectorRow';
-import SetupModal from './components/SetupModal';
+import CreateForm from './components/CreateForm';
 import * as styles from './index.module.scss';
 
 const Connectors = () => {
@@ -124,7 +124,7 @@ const Connectors = () => {
         </div>
       </Card>
       {data && (
-        <SetupModal
+        <CreateForm
           isOpen={Boolean(createType)}
           type={createType}
           onClose={() => {