Revert "Merge pull request #9572 from weseek/support/upgrade-react"

This reverts commit 6eb1da1, reversing changes made to 5e0e337.
weseek · Jan 22, 2025 · 3c03ef6 · 3c03ef6
1 parent f9d65f9
commit 3c03ef6
Show file tree

Hide file tree

Showing 357 changed files with 1,527 additions and 1,794 deletions.
diff --git a/apps/app/package.json b/apps/app/package.json
@@ -177,12 +177,12 @@
     "prop-types": "^15.8.1",
     "qs": "^6.11.1",
     "rate-limiter-flexible": "^2.3.7",
-    "react": "^18.3.0",
+    "react": "^18.2.0",
     "react-bootstrap-typeahead": "^6.3.2",
     "react-card-flip": "^1.0.10",
     "react-datepicker": "^4.7.0",
     "react-disable": "^0.1.1",
-    "react-dom": "^18.3.0",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-i18next": "^15.1.1",
     "react-image-crop": "^8.3.0",
@@ -264,8 +264,8 @@
     "@types/ldapjs": "^2.2.5",
     "@types/mdast": "^4.0.4",
     "@types/node-cron": "^3.0.11",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "@types/react-input-autosize": "^2.2.4",
     "@types/react-scroll": "^1.8.4",
     "@types/react-stickynode": "^4.0.3",

diff --git a/apps/app/src/client/components/Admin/AdminHome/EnvVarsTable.tsx b/apps/app/src/client/components/Admin/AdminHome/EnvVarsTable.tsx
@@ -5,7 +5,7 @@ type EnvVarsTableProps = {
 }
 
 export const EnvVarsTable: React.FC<EnvVarsTableProps> = (props: EnvVarsTableProps) => {
-  const envVarRows: React.ReactElement[] = [];
+  const envVarRows: JSX.Element[] = [];
 
   for (const [key, value] of Object.entries(props.envVars)) {
     if (value != null) {

diff --git a/apps/app/src/client/components/Admin/App/AppSetting.jsx b/apps/app/src/client/components/Admin/App/AppSetting.jsx
@@ -40,7 +40,7 @@ const AppSetting = (props) => {
           <input
             className="form-control"
             type="text"
-            defaultValue={adminAppContainer.state.title || ''}
+            defaletValue={adminAppContainer.state.title || ''}
             onChange={(e) => {
               adminAppContainer.changeTitle(e.target.value);
             }}

diff --git a/apps/app/src/client/components/Admin/App/AwsSetting.tsx b/apps/app/src/client/components/Admin/App/AwsSetting.tsx
@@ -15,7 +15,7 @@ export type AwsSettingMoleculeProps = {
   onChangeS3SecretAccessKey: (val: string) => void
 };
 
-export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): React.ReactElement => {
+export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element => {
   const { t } = useTranslation();
 
   return (

diff --git a/apps/app/src/client/components/Admin/App/AzureSetting.tsx b/apps/app/src/client/components/Admin/App/AzureSetting.tsx
@@ -23,7 +23,7 @@ export type AzureSettingMoleculeProps = {
   onChangeAzureStorageContainerName: (val: string) => void
 };
 
-export const AzureSettingMolecule = (props: AzureSettingMoleculeProps): React.ReactElement => {
+export const AzureSettingMolecule = (props: AzureSettingMoleculeProps): JSX.Element => {
   const { t } = useTranslation();
 
   const {

diff --git a/apps/app/src/client/components/Admin/App/FileUploadSetting.tsx b/apps/app/src/client/components/Admin/App/FileUploadSetting.tsx
@@ -26,7 +26,7 @@ type FileUploadSettingMoleculeProps = {
   onChangeFileUploadType: (e: ChangeEvent, type: string) => void
 } & AwsSettingMoleculeProps & GcsSettingMoleculeProps & AzureSettingMoleculeProps;
 
-export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMoleculeProps): React.ReactElement => {
+export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMoleculeProps): JSX.Element => {
   const { t } = useTranslation(['admin', 'commons']);
 
   return (
@@ -136,7 +136,7 @@ type FileUploadSettingProps = {
   adminAppContainer: AdminAppContainer
 }
 
-const FileUploadSetting = (props: FileUploadSettingProps): React.ReactElement => {
+const FileUploadSetting = (props: FileUploadSettingProps): JSX.Element => {
   const { t } = useTranslation(['admin', 'commons']);
   const { adminAppContainer } = props;
 

diff --git a/apps/app/src/client/components/Admin/App/GcsSetting.tsx b/apps/app/src/client/components/Admin/App/GcsSetting.tsx
@@ -15,7 +15,7 @@ export type GcsSettingMoleculeProps = {
   onChangeGcsUploadNamespace: (val: string) => void
 };
 
-export const GcsSettingMolecule = (props: GcsSettingMoleculeProps): React.ReactElement => {
+export const GcsSettingMolecule = (props: GcsSettingMoleculeProps): JSX.Element => {
   const { t } = useTranslation();
 
   const {

diff --git a/apps/app/src/client/components/Admin/App/MaskedInput.tsx b/apps/app/src/client/components/Admin/App/MaskedInput.tsx
@@ -10,7 +10,7 @@ type Props = {
   tabIndex?: number | undefined
 };
 
-export default function MaskedInput(props: Props): React.ReactElement {
+export default function MaskedInput(props: Props): JSX.Element {
   const [passwordShown, setPasswordShown] = useState(false);
   const togglePassword = () => {
     setPasswordShown(!passwordShown);

diff --git a/apps/app/src/client/components/Admin/App/QuestionnaireSettings.tsx b/apps/app/src/client/components/Admin/App/QuestionnaireSettings.tsx
@@ -11,7 +11,7 @@ import { useSWRxAppSettings } from '~/stores/admin/app-settings';
 
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
-const QuestionnaireSettings = (): React.ReactElement => {
+const QuestionnaireSettings = (): JSX.Element => {
   const { t } = useTranslation(['admin', 'commons']);
 
   const { data, error, mutate } = useSWRxAppSettings();

diff --git a/apps/app/src/client/components/Admin/Common/AdminInstallButtonRow.tsx b/apps/app/src/client/components/Admin/Common/AdminInstallButtonRow.tsx
@@ -6,7 +6,7 @@ type Props = {
 
 }
 
-export const AdminInstallButtonRow = (props: Props): React.ReactElement => {
+export const AdminInstallButtonRow = (props: Props): JSX.Element => {
   return (
     <div className="row my-3">
       <div className="mx-auto">

diff --git a/apps/app/src/client/components/Admin/Common/AdminUpdateButtonRow.tsx b/apps/app/src/client/components/Admin/Common/AdminUpdateButtonRow.tsx
@@ -7,7 +7,7 @@ type Props = {
   disabled?: boolean,
 }
 
-const AdminUpdateButtonRow = (props: Props): React.ReactElement => {
+const AdminUpdateButtonRow = (props: Props): JSX.Element => {
   const { t } = useTranslation('admin');
 
   return (

diff --git a/apps/app/src/client/components/Admin/Common/LabeledProgressBar.tsx b/apps/app/src/client/components/Admin/Common/LabeledProgressBar.tsx
@@ -9,7 +9,7 @@ type Props = {
   isInProgress?: boolean,
 }
 
-const LabeledProgressBar = (props: Props): React.ReactElement => {
+const LabeledProgressBar = (props: Props): JSX.Element => {
   const {
     header, currentCount, totalCount, isInProgress,
   } = props;

diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeCssSetting.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeCssSetting.tsx
@@ -13,7 +13,7 @@ type Props = {
   adminCustomizeContainer: AdminCustomizeContainer
 }
 
-const CustomizeCssSetting = (props: Props): React.ReactElement => {
+const CustomizeCssSetting = (props: Props): JSX.Element => {
 
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();

diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeFunctionOption.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeFunctionOption.tsx
@@ -8,7 +8,7 @@ type Props = {
   children: React.ReactNode,
 }
 
-const CustomizeFunctionOption = (props: Props): React.ReactElement => {
+const CustomizeFunctionOption = (props: Props): JSX.Element => {
 
   const {
     optionId, label, isChecked, onChecked, children,

diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeFunctionSetting.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeFunctionSetting.tsx
@@ -16,7 +16,7 @@ type Props = {
   adminCustomizeContainer: AdminCustomizeContainer
 }
 
-const CustomizeFunctionSetting = (props: Props): React.ReactElement => {
+const CustomizeFunctionSetting = (props: Props): JSX.Element => {
 
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();

diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeLayoutSetting.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeLayoutSetting.tsx
@@ -24,7 +24,7 @@ const useIsContainerFluid = () => {
   };
 };
 
-const CustomizeLayoutSetting = (): React.ReactElement => {
+const CustomizeLayoutSetting = (): JSX.Element => {
   const { t } = useTranslation('admin');
 
   const { resolvedTheme } = useNextThemes();

diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeLogoSetting.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeLogoSetting.tsx
@@ -15,7 +15,7 @@ import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 const DEFAULT_LOGO = '/images/logo.svg';
 const CUSTOMIZED_LOGO = '/attachment/brand-logo';
 
-const CustomizeLogoSetting = (): React.ReactElement => {
+const CustomizeLogoSetting = (): JSX.Element => {
 
   const { t } = useTranslation();
   const { data: isDefaultLogo } = useIsDefaultLogo();

diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeNoscriptSetting.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeNoscriptSetting.tsx
@@ -15,7 +15,7 @@ type Props = {
   adminCustomizeContainer: AdminCustomizeContainer
 }
 
-const CustomizeNoscriptSetting = (props: Props): React.ReactElement => {
+const CustomizeNoscriptSetting = (props: Props): JSX.Element => {
 
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();

diff --git a/apps/app/src/client/components/Admin/Customize/CustomizePresentationSetting.tsx b/apps/app/src/client/components/Admin/Customize/CustomizePresentationSetting.tsx
@@ -14,7 +14,7 @@ type Props = {
   adminCustomizeContainer: AdminCustomizeContainer
 }
 
-const CustomizePresentationSetting = (props: Props): React.ReactElement => {
+const CustomizePresentationSetting = (props: Props): JSX.Element => {
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();
 

diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeScriptSetting.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeScriptSetting.tsx
@@ -15,7 +15,7 @@ type Props = {
   adminCustomizeContainer: AdminCustomizeContainer
 }
 
-const CustomizeScriptSetting = (props: Props): React.ReactElement => {
+const CustomizeScriptSetting = (props: Props): JSX.Element => {
 
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();

diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeSidebarSetting.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeSidebarSetting.tsx
@@ -8,7 +8,7 @@ import { toastSuccess, toastError } from '~/client/util/toastr';
 import { useNextThemes } from '~/stores-universal/use-next-themes';
 import { useSWRxSidebarConfig } from '~/stores/admin/sidebar-config';
 
-const CustomizeSidebarsetting = (): React.ReactElement => {
+const CustomizeSidebarsetting = (): JSX.Element => {
   const { t } = useTranslation(['admin', 'commons']);
 
   const {

diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeThemeOptions.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeThemeOptions.tsx
@@ -12,7 +12,7 @@ type Props = {
   onSelected?: (themeName: string) => void,
 };
 
-const CustomizeThemeOptions = (props: Props): React.ReactElement => {
+const CustomizeThemeOptions = (props: Props): JSX.Element => {
   const { t } = useTranslation('admin');
 
   const { availableThemes, selectedTheme, onSelected } = props;

diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeThemeSetting.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeThemeSetting.tsx
@@ -16,7 +16,7 @@ type Props = {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const CustomizeThemeSetting = (props: Props): React.ReactElement => {
+const CustomizeThemeSetting = (props: Props): JSX.Element => {
   const { t } = useTranslation();
 
   const { data, error, update } = useSWRxGrowiThemeSetting();

diff --git a/apps/app/src/client/components/Admin/Customize/ThemeColorBox.tsx b/apps/app/src/client/components/Admin/Customize/ThemeColorBox.tsx
@@ -13,7 +13,7 @@ type Props = {
   onSelected?: () => void,
 };
 
-export const ThemeColorBox = (props: Props): React.ReactElement => {
+export const ThemeColorBox = (props: Props): JSX.Element => {
 
   const {
     isSelected, metadata, onSelected,

diff --git a/apps/app/src/client/components/Admin/ElasticsearchManagement/NormalizeIndicesControls.tsx b/apps/app/src/client/components/Admin/ElasticsearchManagement/NormalizeIndicesControls.tsx
@@ -8,7 +8,7 @@ type Props = {
   isNormalized?: boolean,
 }
 
-const NormalizeIndicesControls = (props: Props): React.ReactElement => {
+const NormalizeIndicesControls = (props: Props): JSX.Element => {
   const { t } = useTranslation('admin');
   const { isNormalized, isRebuildingProcessing } = props;
 

diff --git a/apps/app/src/client/components/Admin/ElasticsearchManagement/ReconnectControls.tsx b/apps/app/src/client/components/Admin/ElasticsearchManagement/ReconnectControls.tsx
@@ -10,7 +10,7 @@ type Props = {
   onReconnectingRequested: () => void,
 }
 
-const ReconnectControls = (props: Props): React.ReactElement => {
+const ReconnectControls = (props: Props): JSX.Element => {
   const { t } = useTranslation('admin');
 
   const { isEnabled, isProcessing } = props;

diff --git a/apps/app/src/client/components/Admin/ExportArchiveData/ArchiveFilesTable.tsx b/apps/app/src/client/components/Admin/ExportArchiveData/ArchiveFilesTable.tsx
@@ -10,7 +10,7 @@ type ArchiveFilesTableProps = {
   onZipFileStatRemove: (fileName: string) => void,
 }
 
-const ArchiveFilesTable = (props: ArchiveFilesTableProps): React.ReactElement => {
+const ArchiveFilesTable = (props: ArchiveFilesTableProps): JSX.Element => {
   const { t } = useTranslation();
 
   return (

diff --git a/apps/app/src/client/components/Admin/ExportArchiveData/ArchiveFilesTableMenu.tsx b/apps/app/src/client/components/Admin/ExportArchiveData/ArchiveFilesTableMenu.tsx
@@ -9,7 +9,7 @@ type ArchiveFilesTableMenuProps = {
   onZipFileStatRemove: (fileName: string) => void,
 }
 
-const ArchiveFilesTableMenu = (props: ArchiveFilesTableMenuProps): React.ReactElement => {
+const ArchiveFilesTableMenu = (props: ArchiveFilesTableMenuProps):JSX.Element => {
   const { t } = useTranslation();
 
   return (

diff --git a/apps/app/src/client/components/Admin/ExportArchiveData/SelectCollectionsModal.tsx b/apps/app/src/client/components/Admin/ExportArchiveData/SelectCollectionsModal.tsx
@@ -32,7 +32,7 @@ type Props = {
   isAllChecked?: boolean,
 };
 
-const SelectCollectionsModal = (props: Props): React.ReactElement => {
+const SelectCollectionsModal = (props: Props): JSX.Element => {
   const { t } = useTranslation();
 
   const {

diff --git a/apps/app/src/client/components/Admin/ExportArchiveDataPage.tsx b/apps/app/src/client/components/Admin/ExportArchiveDataPage.tsx
@@ -17,7 +17,7 @@ const IGNORED_COLLECTION_NAMES = [
   'sessions', 'rlflx', 'yjs-writings', 'transferkeys',
 ];
 
-const ExportArchiveDataPage = (): React.ReactElement => {
+const ExportArchiveDataPage = (): JSX.Element => {
   const { data: socket } = useAdminSocket();
   const { t } = useTranslation('admin');
 

diff --git a/apps/app/src/client/components/Admin/ForbiddenPage.tsx b/apps/app/src/client/components/Admin/ForbiddenPage.tsx
@@ -4,7 +4,7 @@ import DefaultErrorPage from 'next/error';
 import { useTranslation } from 'react-i18next';
 
 
-export const ForbiddenPage = (): React.ReactElement => {
+export const ForbiddenPage = (): JSX.Element => {
   const { t } = useTranslation('admin');
 
   const errorMessage = t('forbidden_page.do_not_have_admin_permission');

diff --git a/apps/app/src/client/components/Admin/FullTextSearchManagement.tsx b/apps/app/src/client/components/Admin/FullTextSearchManagement.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'next-i18next';
 
 import ElasticsearchManagement from './ElasticsearchManagement/ElasticsearchManagement';
 
-export const FullTextSearchManagement = (): React.ReactElement => {
+export const FullTextSearchManagement = (): JSX.Element => {
   const { t } = useTranslation('admin');
 
   return (

diff --git a/apps/app/src/client/components/Admin/G2GDataTransfer.tsx b/apps/app/src/client/components/Admin/G2GDataTransfer.tsx
@@ -21,7 +21,7 @@ const IGNORED_COLLECTION_NAMES = [
   'sessions', 'rlflx', 'activities', 'attachmentFiles.files', 'attachmentFiles.chunks',
 ];
 
-const G2GDataTransfer = (): React.ReactElement => {
+const G2GDataTransfer = (): JSX.Element => {
   const { data: socket } = useAdminSocket();
   const { t } = useTranslation(['admin', 'commons']);
 

diff --git a/apps/app/src/client/components/Admin/G2GDataTransferExportForm.tsx b/apps/app/src/client/components/Admin/G2GDataTransferExportForm.tsx
@@ -35,7 +35,7 @@ type Props = {
   updateOptionsMap: (newOptionsMap: any) => void,
 };
 
-const G2GDataTransferExportForm = (props: Props): React.ReactElement => {
+const G2GDataTransferExportForm = (props: Props): JSX.Element => {
   const { t } = useTranslation('admin');
 
   const {
@@ -66,7 +66,7 @@ const G2GDataTransferExportForm = (props: Props): React.ReactElement => {
     });
   }, [optionsMap, updateOptionsMap]);
 
-  const ImportItems = ({ collectionNames }): React.ReactElement => {
+  const ImportItems = ({ collectionNames }): JSX.Element => {
     const toggleCheckbox = (collectionName, bool) => {
       const collections = new Set(selectedCollections);
       if (bool) {
@@ -122,7 +122,7 @@ const G2GDataTransferExportForm = (props: Props): React.ReactElement => {
     );
   };
 
-  const WarnForGroups = ({ errors }: { errors: Error[] }): React.ReactElement => {
+  const WarnForGroups = ({ errors }: { errors: Error[] }): JSX.Element => {
     if (errors.length === 0) {
       return <></>;
     }
@@ -138,7 +138,7 @@ const G2GDataTransferExportForm = (props: Props): React.ReactElement => {
     );
   };
 
-  const GroupImportItems = ({ groupList, groupName, errors }): React.ReactElement => {
+  const GroupImportItems = ({ groupList, groupName, errors }): JSX.Element => {
     const collectionNames = groupList.filter((groupCollectionName) => {
       return allCollectionNames.includes(groupCollectionName);
     });
@@ -156,7 +156,7 @@ const G2GDataTransferExportForm = (props: Props): React.ReactElement => {
     );
   };
 
-  const OtherImportItems = (): React.ReactElement => {
+  const OtherImportItems = (): JSX.Element => {
     const collectionNames = allCollectionNames.filter((collectionName) => {
       return !ALL_GROUPED_COLLECTIONS.includes(collectionName);
     });

diff --git a/apps/app/src/client/components/Admin/G2GDataTransferStatusIcon.tsx b/apps/app/src/client/components/Admin/G2GDataTransferStatusIcon.tsx
@@ -15,7 +15,7 @@ interface Props extends ComponentPropsWithoutRef<'span'>{
 /**
  * Icon for G2G transfer status
  */
-const G2GDataTransferStatusIcon = ({ status, className, ...props }: Props): React.ReactElement => {
+const G2GDataTransferStatusIcon = ({ status, className, ...props }: Props): JSX.Element => {
   if (status === G2G_PROGRESS_STATUS.IN_PROGRESS) {
     return (
       <LoadingSpinner className={`${className}`} aria-label="in progress" {...props} />

diff --git a/apps/app/src/client/components/Admin/ImportData/GrowiArchive/ErrorViewer.tsx b/apps/app/src/client/components/Admin/ImportData/GrowiArchive/ErrorViewer.tsx
@@ -8,7 +8,7 @@ type ErrorViewerProps = {
   onClose: () => void,
 }
 
-const ErrorViewer = (props: ErrorViewerProps): React.ReactElement => {
+const ErrorViewer = (props: ErrorViewerProps): JSX.Element => {
   const { errors } = props;
 
   let value = '(no errors)';

diff --git a/apps/app/src/client/components/Admin/ManageExternalAccount.tsx b/apps/app/src/client/components/Admin/ManageExternalAccount.tsx
@@ -15,7 +15,7 @@ type ManageExternalAccountProps = {
   adminExternalAccountsContainer: AdminExternalAccountsContainer,
 }
 
-const ManageExternalAccount = (props: ManageExternalAccountProps): React.ReactElement => {
+const ManageExternalAccount = (props: ManageExternalAccountProps): JSX.Element => {
 
   const { t } = useTranslation();
   const { adminExternalAccountsContainer } = props;