refactor done

packages/app/src/components/Admin/App/AwsSetting.tsx

@@ -1,12 +1,6 @@
-import React, { useCallback } from 'react';
-
 import { useTranslation } from 'next-i18next';
 
-import AdminAppContainer from '~/client/services/AdminAppContainer';
-
-import { withUnstatedContainers } from '../../UnstatedUtils';
-
-type AwsSettingMoleculeProps = {
+export type AwsSettingMoleculeProps = {
   s3ReferenceFileWithRelayMode
   s3Region
   s3CustomEndpoint
@@ -25,7 +19,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
   const { t } = useTranslation();
 
   return (
-    <React.Fragment>
+    <>
 
       <div className="row form-group my-3">
         <label className="text-left text-md-right col-md-3 col-form-label">
@@ -155,63 +149,6 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
       </div>
 
 
-    </React.Fragment>
+    </>
   );
 };
-
-
-const AwsSetting = (props) => {
-  const { adminAppContainer } = props;
-  const {
-    s3ReferenceFileWithRelayMode,
-    s3Region, s3CustomEndpoint, s3Bucket,
-    s3AccessKeyId, s3SecretAccessKey,
-  } = adminAppContainer.state;
-
-  const onChangeS3ReferenceFileWithRelayModeHandler = useCallback((val: boolean) => {
-    adminAppContainer.changeS3ReferenceFileWithRelayMode(val);
-  }, [adminAppContainer]);
-
-  const onChangeS3RegionHandler = useCallback((val: string) => {
-    adminAppContainer.changeS3Region(val);
-  }, [adminAppContainer]);
-
-  const onChangeS3CustomEndpointHandler = useCallback((val: string) => {
-    adminAppContainer.changeS3CustomEndpoint(val);
-  }, [adminAppContainer]);
-
-  const onChangeS3BucketHandler = useCallback((val: string) => {
-    adminAppContainer.changeS3Bucket(val);
-  }, [adminAppContainer]);
-
-  const onChangeS3AccessKeyIdHandler = useCallback((val: string) => {
-    adminAppContainer.changeS3AccessKeyId(val);
-  }, [adminAppContainer]);
-
-  const onChangeS3SecretAccessKeyHandler = useCallback((val: string) => {
-    adminAppContainer.changeS3SecretAccessKey(val);
-  }, [adminAppContainer]);
-
-  return <AwsSettingMolecule
-    s3ReferenceFileWithRelayMode={s3ReferenceFileWithRelayMode}
-    s3Region={s3Region}
-    s3CustomEndpoint={s3CustomEndpoint}
-    s3Bucket={s3Bucket}
-    s3AccessKeyId={s3AccessKeyId}
-    s3SecretAccessKey={s3SecretAccessKey}
-    onChangeS3ReferenceFileWithRelayMode={onChangeS3ReferenceFileWithRelayModeHandler}
-    onChangeS3Region={onChangeS3RegionHandler}
-    onChangeS3CustomEndpoint={onChangeS3CustomEndpointHandler}
-    onChangeS3Bucket={onChangeS3BucketHandler}
-    onChangeS3AccessKeyId={onChangeS3AccessKeyIdHandler}
-    onChangeS3SecretAccessKey={onChangeS3SecretAccessKeyHandler}
-  />;
-};
-
-
-/**
- * Wrapper component for using unstated
- */
-const AwsSettingWrapper = withUnstatedContainers(AwsSetting, [AdminAppContainer]);
-
-export default AwsSettingWrapper;

packages/app/src/components/Admin/App/FileUploadSetting.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useCallback, useState } from 'react';
+import React, { ChangeEvent, useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
@@ -8,8 +8,10 @@ import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
-import AwsSetting from './AwsSetting';
-import GcsSettings from './GcsSettings';
+import { AwsSettingMolecule } from './AwsSetting';
+import type { AwsSettingMoleculeProps } from './AwsSetting';
+import { GcsSettingMolecule } from './GcsSetting';
+import type { GcsSettingMoleculeProps } from './GcsSetting';
 
 const fileUploadTypes = ['aws', 'gcs', 'gridfs', 'local'] as const;
 
@@ -18,7 +20,7 @@ type FileUploadSettingMoleculeProps = {
   isFixedFileUploadByEnvVar: boolean
   envFileUploadType?: string
   onChangeFileUploadType: (e: ChangeEvent, type: string) => void
-}
+} & AwsSettingMoleculeProps & GcsSettingMoleculeProps;
 
 export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMoleculeProps): JSX.Element => {
   const { t } = useTranslation(['admin', 'commons']);
@@ -68,8 +70,34 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
         )}
       </div>
 
-      {props.fileUploadType === 'aws' && <AwsSetting />}
-      {props.fileUploadType === 'gcs' && <GcsSettings />}
+      {props.fileUploadType === 'aws' && <AwsSettingMolecule
+        s3ReferenceFileWithRelayMode={props.s3ReferenceFileWithRelayMode}
+        s3Region={props.s3Region}
+        s3CustomEndpoint={props.s3CustomEndpoint}
+        s3Bucket={props.s3Bucket}
+        s3AccessKeyId={props.s3AccessKeyId}
+        s3SecretAccessKey={props.s3SecretAccessKey}
+        onChangeS3ReferenceFileWithRelayMode={props.onChangeS3ReferenceFileWithRelayMode}
+        onChangeS3Region={props.onChangeS3Region}
+        onChangeS3CustomEndpoint={props.onChangeS3CustomEndpoint}
+        onChangeS3Bucket={props.onChangeS3Bucket}
+        onChangeS3AccessKeyId={props.onChangeS3AccessKeyId}
+        onChangeS3SecretAccessKey={props.onChangeS3SecretAccessKey}
+      />}
+      {props.fileUploadType === 'gcs' && <GcsSettingMolecule
+        gcsReferenceFileWithRelayMode={props.gcsReferenceFileWithRelayMode}
+        gcsUseOnlyEnvVars={props.gcsUseOnlyEnvVars}
+        gcsApiKeyJsonPath={props.gcsApiKeyJsonPath}
+        gcsBucket={props.gcsBucket}
+        gcsUploadNamespace={props.gcsUploadNamespace}
+        envGcsApiKeyJsonPath={props.envGcsApiKeyJsonPath}
+        envGcsBucket={props.envGcsBucket}
+        envGcsUploadNamespace={props.envGcsUploadNamespace}
+        onChangeGcsReferenceFileWithRelayMode={props.onChangeGcsReferenceFileWithRelayMode}
+        onChangeGcsApiKeyJsonPath={props.onChangeGcsApiKeyJsonPath}
+        onChangeGcsBucket={props.onChangeGcsBucket}
+        onChangeGcsUploadNamespace={props.onChangeGcsUploadNamespace}
+      />}
     </>
   );
 });
@@ -86,6 +114,12 @@ const FileUploadSetting = (props: FileUploadSettingProps): JSX.Element => {
 
   const {
     fileUploadType, isFixedFileUploadByEnvVar, envFileUploadType, retrieveError,
+    s3ReferenceFileWithRelayMode,
+    s3Region, s3CustomEndpoint, s3Bucket,
+    s3AccessKeyId, s3SecretAccessKey,
+    gcsReferenceFileWithRelayMode, gcsUseOnlyEnvVars,
+    gcsApiKeyJsonPath, envGcsApiKeyJsonPath, gcsBucket,
+    envGcsBucket, gcsUploadNamespace, envGcsUploadNamespace,
   } = adminAppContainer.state;
 
   const submitHandler = useCallback(async() => {
@@ -102,13 +136,80 @@ const FileUploadSetting = (props: FileUploadSettingProps): JSX.Element => {
     adminAppContainer.changeFileUploadType(type);
   }, [adminAppContainer]);
 
+  // S3
+  const onChangeS3ReferenceFileWithRelayModeHandler = useCallback((val: boolean) => {
+    adminAppContainer.changeS3ReferenceFileWithRelayMode(val);
+  }, [adminAppContainer]);
+
+  const onChangeS3RegionHandler = useCallback((val: string) => {
+    adminAppContainer.changeS3Region(val);
+  }, [adminAppContainer]);
+
+  const onChangeS3CustomEndpointHandler = useCallback((val: string) => {
+    adminAppContainer.changeS3CustomEndpoint(val);
+  }, [adminAppContainer]);
+
+  const onChangeS3BucketHandler = useCallback((val: string) => {
+    adminAppContainer.changeS3Bucket(val);
+  }, [adminAppContainer]);
+
+  const onChangeS3AccessKeyIdHandler = useCallback((val: string) => {
+    adminAppContainer.changeS3AccessKeyId(val);
+  }, [adminAppContainer]);
+
+  const onChangeS3SecretAccessKeyHandler = useCallback((val: string) => {
+    adminAppContainer.changeS3SecretAccessKey(val);
+  }, [adminAppContainer]);
+
+  // GCS
+  const onChangeGcsReferenceFileWithRelayModeHandler = useCallback((val: boolean) => {
+    adminAppContainer.changeGcsReferenceFileWithRelayMode(val);
+  }, [adminAppContainer]);
+
+  const onChangeGcsApiKeyJsonPathHandler = useCallback((val: string) => {
+    adminAppContainer.changeGcsApiKeyJsonPath(val);
+  }, [adminAppContainer]);
+
+  const onChangeGcsBucketHandler = useCallback((val: string) => {
+    adminAppContainer.changeGcsBucket(val);
+  }, [adminAppContainer]);
+
+  const onChangeGcsUploadNamespaceHandler = useCallback((val: string) => {
+    adminAppContainer.changeGcsUploadNamespace(val);
+  }, [adminAppContainer]);
+
   return (
     <>
       <FileUploadSettingMolecule
         fileUploadType={fileUploadType}
         isFixedFileUploadByEnvVar={isFixedFileUploadByEnvVar}
         envFileUploadType={envFileUploadType}
-        onChangeFileUploadType={onChangeFileUploadTypeHandler}/>
+        onChangeFileUploadType={onChangeFileUploadTypeHandler}
+        s3ReferenceFileWithRelayMode={s3ReferenceFileWithRelayMode}
+        s3Region={s3Region}
+        s3CustomEndpoint={s3CustomEndpoint}
+        s3Bucket={s3Bucket}
+        s3AccessKeyId={s3AccessKeyId}
+        s3SecretAccessKey={s3SecretAccessKey}
+        onChangeS3ReferenceFileWithRelayMode={onChangeS3ReferenceFileWithRelayModeHandler}
+        onChangeS3Region={onChangeS3RegionHandler}
+        onChangeS3CustomEndpoint={onChangeS3CustomEndpointHandler}
+        onChangeS3Bucket={onChangeS3BucketHandler}
+        onChangeS3AccessKeyId={onChangeS3AccessKeyIdHandler}
+        onChangeS3SecretAccessKey={onChangeS3SecretAccessKeyHandler}
+        gcsReferenceFileWithRelayMode={gcsReferenceFileWithRelayMode}
+        gcsUseOnlyEnvVars={gcsUseOnlyEnvVars}
+        gcsApiKeyJsonPath={gcsApiKeyJsonPath}
+        gcsBucket={gcsBucket}
+        gcsUploadNamespace={gcsUploadNamespace}
+        envGcsApiKeyJsonPath={envGcsApiKeyJsonPath}
+        envGcsBucket={envGcsBucket}
+        envGcsUploadNamespace={envGcsUploadNamespace}
+        onChangeGcsReferenceFileWithRelayMode={onChangeGcsReferenceFileWithRelayModeHandler}
+        onChangeGcsApiKeyJsonPath={onChangeGcsApiKeyJsonPathHandler}
+        onChangeGcsBucket={onChangeGcsBucketHandler}
+        onChangeGcsUploadNamespace={onChangeGcsUploadNamespaceHandler}
+      />
       <AdminUpdateButtonRow onClick={submitHandler} disabled={retrieveError != null} />
     </>
   );

packages/app/src/components/Admin/App/GcsSettings.tsx → packages/app/src/components/Admin/App/GcsSetting.tsx

@@ -1,20 +1,14 @@
-import React, { useCallback } from 'react';
-
 import { useTranslation } from 'next-i18next';
 
-import AdminAppContainer from '~/client/services/AdminAppContainer';
-
-import { withUnstatedContainers } from '../../UnstatedUtils';
-
-type GcsSettingMoleculeProps = {
+export type GcsSettingMoleculeProps = {
   gcsReferenceFileWithRelayMode
   gcsUseOnlyEnvVars
   gcsApiKeyJsonPath
-  envGcsApiKeyJsonPath
   gcsBucket
-  envGcsBucket
   gcsUploadNamespace
-  envGcsUploadNamespace
+  envGcsApiKeyJsonPath?
+  envGcsBucket?
+  envGcsUploadNamespace?
   onChangeGcsReferenceFileWithRelayMode: (val: boolean) => void
   onChangeGcsApiKeyJsonPath: (val: string) => void
   onChangeGcsBucket: (val: string) => void
@@ -169,51 +163,3 @@ export const GcsSettingMolecule = (props: GcsSettingMoleculeProps): JSX.Element
     </>
   );
 };
-
-const GcsSetting = (props) => {
-  const { t } = useTranslation();
-  const { adminAppContainer } = props;
-  const {
-    gcsReferenceFileWithRelayMode, gcsUseOnlyEnvVars,
-    gcsApiKeyJsonPath, envGcsApiKeyJsonPath, gcsBucket,
-    envGcsBucket, gcsUploadNamespace, envGcsUploadNamespace,
-  } = adminAppContainer.state;
-
-  const onChangeGcsReferenceFileWithRelayModeHandler = useCallback((val: boolean) => {
-    adminAppContainer.changeGcsReferenceFileWithRelayMode(val);
-  }, [adminAppContainer]);
-
-  const onChangeGcsApiKeyJsonPathHandler = useCallback((val: string) => {
-    adminAppContainer.changeGcsApiKeyJsonPath(val);
-  }, [adminAppContainer]);
-
-  const onChangeGcsBucketHandler = useCallback((val: string) => {
-    adminAppContainer.changeGcsBucket(val);
-  }, [adminAppContainer]);
-
-  const onChangeGcsUploadNamespaceHandler = useCallback((val: string) => {
-    adminAppContainer.changeGcsUploadNamespace(val);
-  }, [adminAppContainer]);
-
-  return <GcsSettingMolecule
-    gcsReferenceFileWithRelayMode={gcsReferenceFileWithRelayMode}
-    gcsUseOnlyEnvVars={gcsUseOnlyEnvVars}
-    gcsApiKeyJsonPath={gcsApiKeyJsonPath}
-    envGcsApiKeyJsonPath={envGcsApiKeyJsonPath}
-    gcsBucket={gcsBucket}
-    envGcsBucket={envGcsBucket}
-    gcsUploadNamespace={gcsUploadNamespace}
-    envGcsUploadNamespace={envGcsUploadNamespace}
-    onChangeGcsReferenceFileWithRelayMode={onChangeGcsReferenceFileWithRelayModeHandler}
-    onChangeGcsApiKeyJsonPath={onChangeGcsApiKeyJsonPathHandler}
-    onChangeGcsBucket={onChangeGcsBucketHandler}
-    onChangeGcsUploadNamespace={onChangeGcsUploadNamespaceHandler}
-  />;
-};
-
-/**
- * Wrapper component for using unstated
- */
-const GcsSettingWrapper = withUnstatedContainers(GcsSetting, [AdminAppContainer]);
-
-export default GcsSettingWrapper;

packages/app/src/components/Admin/G2GDataTransfer.tsx

@@ -1,3 +1,4 @@
+// TODO: i18n
 import React, {
   ChangeEvent, useCallback, useEffect, useState,
 } from 'react';
@@ -34,7 +35,19 @@ const G2GDataTransfer = (): JSX.Element => {
     mongo: G2G_PROGRESS_STATUS.PENDING,
     attachments: G2G_PROGRESS_STATUS.PENDING,
   });
+
+  // File upload settings
   const [fileUploadType, setFileUploadType] = useState('aws');
+  const [s3ReferenceFileWithRelayMode, setS3ReferenceFileWithRelayMode] = useState(false);
+  const [s3Region, setS3Region] = useState('');
+  const [s3CustomEndpoint, setS3CustomEndpoint] = useState('');
+  const [s3Bucket, setS3Bucket] = useState('');
+  const [s3AccessKeyId, setS3AccessKeyId] = useState('');
+  const [s3SecretAccessKey, setS3SecretAccessKey] = useState('');
+  const [gcsReferenceFileWithRelayMode, setGcsReferenceFileWithRelayMode] = useState(false);
+  const [gcsApiKeyJsonPath, setGcsApiKeyJsonPath] = useState('');
+  const [gcsBucket, setGcsBucket] = useState('');
+  const [gcsUploadNamespace, setGcsUploadNamespace] = useState('');
 
   const updateSelectedCollections = (newSelectedCollections: Set<string>) => {
     setSelectedCollections(newSelectedCollections);
@@ -111,10 +124,54 @@ const G2GDataTransfer = (): JSX.Element => {
     }
   }, [setTransferring, startTransferKey, selectedCollections, optionsMap]);
 
+  // File upload
   const onChangeFileUploadTypeHandler = useCallback((e: ChangeEvent, type: string) => {
     setFileUploadType(type);
   }, []);
 
+  // S3
+  const onChangeS3ReferenceFileWithRelayModeHandler = useCallback((val: boolean) => {
+    setS3ReferenceFileWithRelayMode(val);
+  }, []);
+
+  const onChangeS3RegionHandler = useCallback((val: string) => {
+    setS3Region(val);
+  }, []);
+
+  const onChangeS3CustomEndpointHandler = useCallback((val: string) => {
+    setS3CustomEndpoint(val);
+  }, []);
+
+  const onChangeS3BucketHandler = useCallback((val: string) => {
+    setS3Bucket(val);
+  }, []);
+
+  const onChangeS3AccessKeyIdHandler = useCallback((val: string) => {
+    setS3AccessKeyId(val);
+  }, []);
+
+  const onChangeS3SecretAccessKeyHandler = useCallback((val: string) => {
+    setS3SecretAccessKey(val);
+  }, []);
+
+  // GCS
+  const onChangeGcsReferenceFileWithRelayModeHandler = useCallback((val: boolean) => {
+    setGcsReferenceFileWithRelayMode(val);
+  }, []);
+
+  const onChangeGcsApiKeyJsonPathHandler = useCallback((val: string) => {
+    setGcsApiKeyJsonPath(val);
+  }, []);
+
+  const onChangeGcsBucketHandler = useCallback((val: string) => {
+    setGcsBucket(val);
+  }, []);
+
+  const onChangeGcsUploadNamespaceHandler = useCallback((val: string) => {
+    setGcsUploadNamespace(val);
+  }, []);
+
+
   useEffect(() => {
     setCollectionsAndSelectedCollections();
     setupWebsocketEventHandler();
@@ -134,13 +191,34 @@ const G2GDataTransfer = (): JSX.Element => {
 
       {collections.length !== 0 && (
         <div className={`${isShowExportForm ? '' : 'd-none'} px-3 pt-3`}>
-          <h3 className='mb-1'>ファイルアップロード設定</h3>
+          <h3 className='mb-1'>{t('admin:app_setting.file_upload')}</h3>
           <FileUploadSettingMolecule
             fileUploadType={fileUploadType}
             isFixedFileUploadByEnvVar={false}
             onChangeFileUploadType={onChangeFileUploadTypeHandler}
+            s3ReferenceFileWithRelayMode={s3ReferenceFileWithRelayMode}
+            s3Region={s3Region}
+            s3CustomEndpoint={s3CustomEndpoint}
+            s3Bucket={s3Bucket}
+            s3AccessKeyId={s3AccessKeyId}
+            s3SecretAccessKey={s3SecretAccessKey}
+            onChangeS3ReferenceFileWithRelayMode={onChangeS3ReferenceFileWithRelayModeHandler}
+            onChangeS3Region={onChangeS3RegionHandler}
+            onChangeS3CustomEndpoint={onChangeS3CustomEndpointHandler}
+            onChangeS3Bucket={onChangeS3BucketHandler}
+            onChangeS3AccessKeyId={onChangeS3AccessKeyIdHandler}
+            onChangeS3SecretAccessKey={onChangeS3SecretAccessKeyHandler}
+            gcsReferenceFileWithRelayMode={gcsReferenceFileWithRelayMode}
+            gcsUseOnlyEnvVars={false}
+            gcsApiKeyJsonPath={gcsApiKeyJsonPath}
+            gcsBucket={gcsBucket}
+            gcsUploadNamespace={gcsUploadNamespace}
+            onChangeGcsReferenceFileWithRelayMode={onChangeGcsReferenceFileWithRelayModeHandler}
+            onChangeGcsApiKeyJsonPath={onChangeGcsApiKeyJsonPathHandler}
+            onChangeGcsBucket={onChangeGcsBucketHandler}
+            onChangeGcsUploadNamespace={onChangeGcsUploadNamespaceHandler}
           />
-          <h3 className='mb-1'>エクスポート設定</h3>
+          <h3 className='mb-1'>{t('export_management.export_archive_data')}</h3>
           <G2GDataTransferExportForm
             allCollectionNames={collections}
             selectedCollections={selectedCollections}