refactor: prepare react 18 upgrade - batch #14 (#3757)

webiny · Dec 8, 2023 · cf0f071 · cf0f071
1 parent 6b4c3ae
commit cf0f071
Show file tree

Hide file tree

Showing 242 changed files with 350 additions and 384 deletions.
diff --git a/packages/app-page-builder/src/PageBuilder.tsx b/packages/app-page-builder/src/PageBuilder.tsx
@@ -32,7 +32,7 @@ const PageBuilderProviderPlugin = createProviderPlugin(Component => {
     };
 });
 
-const PageBuilderMenu: React.FC = () => {
+const PageBuilderMenu = () => {
     return (
         <>
             <HasPermission any={["pb.menu", "pb.category", "pb.page", "pb.template", "pb.block"]}>
@@ -110,7 +110,7 @@ const EditorRendererPlugin = createComponentPlugin(EditorRenderer, () => {
     };
 });
 
-export const PageBuilder: React.FC = () => {
+export const PageBuilder = () => {
     return (
         <Fragment>
             <PagesModule />

diff --git a/packages/app-page-builder/src/admin/components/CategoriesAutocomplete.tsx b/packages/app-page-builder/src/admin/components/CategoriesAutocomplete.tsx
@@ -31,7 +31,7 @@ const LIST_CATEGORIES = gql`
 `;
 
 type CategoriesAutocompleteProps = Partial<AutoCompleteProps>;
-export const CategoriesAutocomplete: React.FC<CategoriesAutocompleteProps> = props => {
+export const CategoriesAutocomplete = (props: CategoriesAutocompleteProps) => {
     const listCategoriesQuery = useQuery(LIST_CATEGORIES);
     const getCategoryQuery = useQuery(GET_CATEGORY, {
         skip: !props.value,

diff --git a/packages/app-page-builder/src/admin/components/EditorLoadingScreen.tsx b/packages/app-page-builder/src/admin/components/EditorLoadingScreen.tsx
@@ -3,7 +3,7 @@ import editorMock from "~/admin/assets/editor-mock.png";
 import { Typography } from "@webiny/ui/Typography";
 import { LoadingEditor, LoadingTitle } from "./EditorLoadingScreen.styles";
 
-export const EditorLoadingScreen: React.FC = () => {
+export const EditorLoadingScreen = () => {
     return (
         <LoadingEditor>
             <img src={editorMock} alt={"page builder editor mock"} />

diff --git a/packages/app-page-builder/src/admin/components/EditorPluginsLoader.tsx b/packages/app-page-builder/src/admin/components/EditorPluginsLoader.tsx
@@ -23,7 +23,7 @@ interface EditorPluginsLoaderProps {
     children: React.ReactNode;
 }
 
-export const EditorPluginsLoader: React.FC<EditorPluginsLoaderProps> = ({ children, location }) => {
+export const EditorPluginsLoader = ({ children, location }: EditorPluginsLoaderProps) => {
     const [loaded, setLoaded] = useReducer(
         (state: State, newState: Partial<State>) => ({ ...state, ...newState }),
         globalState

diff --git a/packages/app-page-builder/src/admin/components/PagesAutocomplete.tsx b/packages/app-page-builder/src/admin/components/PagesAutocomplete.tsx
@@ -47,7 +47,7 @@ const LIST_PUBLISHED_PAGES = gql`
 interface PagesAutocompleteProps extends Partial<AutoCompleteProps> {
     trailingIcon?: React.ReactNode;
 }
-export const PagesAutocomplete: React.FC<PagesAutocompleteProps> = props => {
+export const PagesAutocomplete = (props: PagesAutocompleteProps) => {
     const [query, setQuery] = useState<string>();
     const listPublishedPagesQuery = useQuery(LIST_PUBLISHED_PAGES, {
         variables: {

diff --git a/...ge-builder/src/admin/components/ResponsiveElementsProvider/ResponsiveElementsProvider.tsx b/...ge-builder/src/admin/components/ResponsiveElementsProvider/ResponsiveElementsProvider.tsx
@@ -10,7 +10,7 @@ const ResponsiveContainer = styled.div`
     container-name: page-canvas;
 `;
 
-export const ResponsiveElementsProvider: React.FC = ({ children }) => {
+export const ResponsiveElementsProvider = ({ children }: { children: React.ReactNode }) => {
     const pageBuilder = usePageBuilder();
 
     // We override all `@media` usages in breakpoints with `@container page-canvas`. This is what

diff --git a/packages/app-page-builder/src/admin/components/Table/Header/Header.tsx b/packages/app-page-builder/src/admin/components/Table/Header/Header.tsx
@@ -21,7 +21,7 @@ export interface HeaderProps {
     onSearchChange: (value: string) => void;
 }
 
-export const Header: React.VFC<HeaderProps> = ({
+export const Header = ({
     canCreateFolder,
     canCreateContent,
     onCreatePage,
@@ -31,7 +31,7 @@ export const Header: React.VFC<HeaderProps> = ({
     selected,
     searchValue,
     onSearchChange
-}) => {
+}: HeaderProps) => {
     return (
         <Container>
             <Grid align={"right"} style={{ padding: 0 }}>

diff --git a/packages/app-page-builder/src/admin/components/Table/LoadingMore/index.tsx b/packages/app-page-builder/src/admin/components/Table/LoadingMore/index.tsx
@@ -10,7 +10,7 @@ interface LoadingMoreProps {
     show: boolean;
 }
 
-export const LoadingMore: React.VFC<LoadingMoreProps> = ({ show }) => {
+export const LoadingMore = ({ show }: LoadingMoreProps) => {
     if (!show) {
         return null;
     }

diff --git a/packages/app-page-builder/src/admin/components/Table/Preview/index.tsx b/packages/app-page-builder/src/admin/components/Table/Preview/index.tsx
@@ -11,7 +11,7 @@ interface PreviewProps {
     onCreatePage: () => void;
 }
 
-export const Preview: React.VFC<PreviewProps> = ({ open, onClose, canCreate, onCreatePage }) => {
+export const Preview = ({ open, onClose, canCreate, onCreatePage }: PreviewProps) => {
     return (
         <Content modal={true} open={open} onClose={onClose} dir="rtl">
             <DrawerContent dir="ltr">

diff --git a/...age-builder/src/admin/components/Table/Table/Row/Folder/FolderActionManagePermissions.tsx b/...age-builder/src/admin/components/Table/Table/Row/Folder/FolderActionManagePermissions.tsx
@@ -10,7 +10,7 @@ const t = i18n.ns("app-headless-cms/admin/components/content-entries/table");
 interface Props {
     onClick: () => void;
 }
-export const FolderActionManagePermissions: React.VFC<Props> = ({ onClick }) => {
+export const FolderActionManagePermissions = ({ onClick }: Props) => {
     return (
         <MenuItem onClick={onClick}>
             <ListItemGraphic>

diff --git a/packages/app-page-builder/src/admin/components/TagsMultiAutocomplete.tsx b/packages/app-page-builder/src/admin/components/TagsMultiAutocomplete.tsx
@@ -22,7 +22,7 @@ const LIST_PAGE_TAGS = gql`
 interface TagsMultiAutocompleteProps extends Partial<MultiAutoCompleteProps> {
     label?: string;
 }
-export const TagsMultiAutocomplete: React.FC<TagsMultiAutocompleteProps> = props => {
+export const TagsMultiAutocomplete = (props: TagsMultiAutocompleteProps) => {
     const autoComplete = useAutocomplete({
         search: query => query,
         query: LIST_PAGE_TAGS

diff --git a/packages/app-page-builder/src/admin/config/pages/list/Browser/BulkAction.tsx b/packages/app-page-builder/src/admin/config/pages/list/Browser/BulkAction.tsx
@@ -17,13 +17,13 @@ export interface BulkActionProps {
     element?: React.ReactElement;
 }
 
-export const BaseBulkAction: React.FC<BulkActionProps> = ({
+export const BaseBulkAction = ({
     name,
     after = undefined,
     before = undefined,
     remove = false,
     element
-}) => {
+}: BulkActionProps) => {
     const getId = useIdGenerator("bulkAction");
 
     const placeAfter = after !== undefined ? getId(after) : undefined;

diff --git a/packages/app-page-builder/src/admin/config/pages/list/Browser/FolderAction.tsx b/packages/app-page-builder/src/admin/config/pages/list/Browser/FolderAction.tsx
@@ -6,9 +6,9 @@ const { Folder } = AcoConfig;
 
 export { FolderActionConfig };
 
-export const FolderAction: React.FC<
-    React.ComponentProps<typeof AcoConfig.Folder.Action>
-> = props => {
+type FolderActionProps = React.ComponentProps<typeof AcoConfig.Folder.Action>;
+
+export const FolderAction = (props: FolderActionProps) => {
     return (
         <CompositionScope name={"pb.page"}>
             <AcoConfig>

diff --git a/packages/app-page-builder/src/admin/contexts/AdminPageBuilder.tsx b/packages/app-page-builder/src/admin/contexts/AdminPageBuilder.tsx
@@ -52,7 +52,13 @@ interface OnPagePublish {
 type OnPageUnpublish = OnPagePublish;
 type OnPageDelete = OnPagePublish;
 
-export const AdminPageBuilderContextProvider: React.FC = ({ children }) => {
+interface AdminPageBuilderContextProviderProps {
+    children: React.ReactNode;
+}
+
+export const AdminPageBuilderContextProvider = ({
+    children
+}: AdminPageBuilderContextProviderProps) => {
     const pageBuilder = usePageBuilder();
     const client = useApolloClient();
     const onPagePublish = useRef<OnPagePublishSubscriber[]>([]);

diff --git a/packages/app-page-builder/src/admin/hooks/useConfigureWebsiteUrl/useConfigureWebsiteUrl.tsx b/packages/app-page-builder/src/admin/hooks/useConfigureWebsiteUrl/useConfigureWebsiteUrl.tsx
@@ -19,9 +19,7 @@ export const configureWebsiteUrlTitle = t`Configure website URL`;
 interface ConfigureWebsiteUrlMessageProps {
     websiteUrl?: string;
 }
-export const ConfigureWebsiteUrlMessage: React.FC<ConfigureWebsiteUrlMessageProps> = ({
-    websiteUrl
-}) => {
+export const ConfigureWebsiteUrlMessage = ({ websiteUrl }: ConfigureWebsiteUrlMessageProps) => {
     if (typeof websiteUrl !== "string") {
         return (
             <span className={confirmationMessageStyles}>

diff --git a/packages/app-page-builder/src/admin/plugins/installation.tsx b/packages/app-page-builder/src/admin/plugins/installation.tsx
@@ -45,7 +45,7 @@ const INSTALL = gql`
 interface PbInstallerProps {
     onInstalled: () => void;
 }
-const PBInstaller: React.FC<PbInstallerProps> = ({ onInstalled }) => {
+const PBInstaller = ({ onInstalled }: PbInstallerProps) => {
     const client = useApolloClient();
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);

diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/folder/FolderForm.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/folder/FolderForm.tsx
@@ -20,7 +20,7 @@ interface FolderFormProps {
     onSubmit: FormOnSubmit;
     onCancel: () => void;
 }
-const FolderForm: React.FC<FolderFormProps> = ({ data, onSubmit, onCancel }) => {
+const FolderForm = ({ data, onSubmit, onCancel }: FolderFormProps) => {
     return (
         <Elevation z={4} className={menuFolderFormStyle}>
             <Form data={data} onSubmit={onSubmit}>

diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/link/LinkForm.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/link/LinkForm.tsx
@@ -20,7 +20,7 @@ interface LinkFormProps {
     onSubmit: FormOnSubmit;
     onCancel: () => void;
 }
-const LinkForm: React.FC<LinkFormProps> = ({ data, onSubmit, onCancel }) => {
+const LinkForm = ({ data, onSubmit, onCancel }: LinkFormProps) => {
     return (
         <Elevation z={4} className={menuFormStyle}>
             <Form data={data} onSubmit={onSubmit}>

diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/page/PageForm.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/page/PageForm.tsx
@@ -21,7 +21,7 @@ interface LinkFormProps {
     onSubmit: FormOnSubmit;
     onCancel: () => void;
 }
-const LinkForm: React.FC<LinkFormProps> = ({ data, onSubmit, onCancel }) => {
+const LinkForm = ({ data, onSubmit, onCancel }: LinkFormProps) => {
     return (
         <Elevation z={4} className={menuPageFormStyle}>
             <Form data={data} onSubmit={onSubmit}>

diff --git a/packages/app-page-builder/src/admin/plugins/menuItems/pageList/PageListForm.tsx b/packages/app-page-builder/src/admin/plugins/menuItems/pageList/PageListForm.tsx
@@ -24,7 +24,7 @@ interface LinkFormProps {
     onCancel: () => void;
 }
 
-const LinkForm: React.FC<LinkFormProps> = ({ data, onSubmit, onCancel }) => {
+const LinkForm = ({ data, onSubmit, onCancel }: LinkFormProps) => {
     return (
         <Elevation z={4} className={menuPageFormStyle} data-testid="pb.page.list.menu.item.form">
             <Form data={data} onSubmit={onSubmit}>

diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/header/Header.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/header/Header.tsx
@@ -75,7 +75,7 @@ const HeaderActions = styled.div`
 interface HeaderProps {
     page: PbPageData;
 }
-const Header: React.FC<HeaderProps> = props => {
+const Header = (props: HeaderProps) => {
     const { page } = props;
     const { getPageUrl, getWebsiteUrl } = usePageBuilderSettings();
     const [isSiteRunning, refreshSiteStatus] = useSiteStatus(getWebsiteUrl());

diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/header/deletePage/DeletePage.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/header/deletePage/DeletePage.tsx
@@ -10,7 +10,7 @@ interface DeletePageProps {
     page: PbPageData;
     onDelete?: () => void;
 }
-const DeletePage: React.FC<DeletePageProps> = props => {
+const DeletePage = (props: DeletePageProps) => {
     const { page, onDelete } = props;
     const { canDelete } = usePagesPermissions();
     const { openDialogDeletePage } = useDeletePage({ page, onDelete });

diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/header/editRevision/EditRevision.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/header/editRevision/EditRevision.tsx
@@ -16,7 +16,7 @@ const t = i18n.ns("app-headless-cms/app-page-builder/page-details/header/edit");
 interface EditRevisionProps {
     page: PbPageData;
 }
-const EditRevision: React.FC<EditRevisionProps> = props => {
+const EditRevision = (props: EditRevisionProps) => {
     const { page } = props;
     const { canUpdate } = usePagesPermissions();
     const [inProgress, setInProgress] = useState<boolean>();

diff --git a/...app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/PageOptionsMenu.tsx b/...app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/PageOptionsMenu.tsx
@@ -45,7 +45,7 @@ interface PageOptionsMenuProps {
     page: PbPageData;
 }
 
-const PageOptionsMenu: React.FC<PageOptionsMenuProps> = props => {
+const PageOptionsMenu = (props: PageOptionsMenuProps) => {
     const { page } = props;
     const [isCreateTemplateDialogOpen, setIsCreateTemplateDialogOpen] = useState<boolean>(false);
     const { settings, isSpecialPage, getPageUrl, getWebsiteUrl, updateSettingsMutation } =

diff --git a/...app-page-builder/src/admin/plugins/pageDetails/header/publishRevision/PublishRevision.tsx b/...app-page-builder/src/admin/plugins/pageDetails/header/publishRevision/PublishRevision.tsx
@@ -16,7 +16,7 @@ export interface PublishRevisionProps {
     page: PbPageData;
 }
 
-const PublishRevision: React.FC<PublishRevisionProps> = props => {
+const PublishRevision = (props: PublishRevisionProps) => {
     const { canPublish, canUnpublish, hasPermissions } = usePagesPermissions();
     const { page } = props;
 

diff --git a/...p-page-builder/src/admin/plugins/pageDetails/header/revisionSelector/RevisionSelector.tsx b/...p-page-builder/src/admin/plugins/pageDetails/header/revisionSelector/RevisionSelector.tsx
@@ -71,7 +71,7 @@ const StatusIndicator = styled.div<{ status: string }>`
 interface RevisionSelectorProps {
     page: PbPageData;
 }
-const RevisionSelector: React.FC<RevisionSelectorProps> = props => {
+const RevisionSelector = (props: RevisionSelectorProps) => {
     const { page } = props;
     const { location, history } = useRouter();
     const query = new URLSearchParams(location.search);

diff --git a/...-page-builder/src/admin/plugins/pageDetails/pageRevisions/PageRevisionListItemGraphic.tsx b/...-page-builder/src/admin/plugins/pageDetails/pageRevisions/PageRevisionListItemGraphic.tsx
@@ -36,7 +36,7 @@ export interface PageRevisionListItemGraphicProps {
     revision: PbPageRevision;
 }
 
-const RevisionListItemGraphic: React.FC<PageRevisionListItemGraphicProps> = props => {
+const RevisionListItemGraphic = (props: PageRevisionListItemGraphicProps) => {
     const { icon, text } = getIcon(props.revision);
     return (
         <ListItemGraphic>

diff --git a/...es/app-page-builder/src/admin/plugins/pageDetails/pageRevisions/PublishPageMenuOption.tsx b/...es/app-page-builder/src/admin/plugins/pageDetails/pageRevisions/PublishPageMenuOption.tsx
@@ -12,7 +12,7 @@ export interface PublishPageMenuOptionProps {
     publishRevision: (revision: PbPageRevision) => void;
 }
 
-export const PageRevisionPublishPageMenuOption: React.FC<PublishPageMenuOptionProps> = props => {
+export const PageRevisionPublishPageMenuOption = (props: PublishPageMenuOptionProps) => {
     const { revision, publishRevision } = props;
     const { canPublish } = usePagesPermissions();
 

diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/pageRevisions/Revision.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/pageRevisions/Revision.tsx
@@ -39,11 +39,15 @@ const revisionsMenu = css({
     left: "auto !important"
 });
 
-const Div: React.FC = ({ children }) => {
+interface DivProps {
+    children: React.ReactNode;
+}
+
+const Div = ({ children }: DivProps) => {
     return <div>{children}</div>;
 };
 
-const Revision: React.FC<RevisionProps> = ({ revision, page }) => {
+const Revision = ({ revision, page }: RevisionProps) => {
     const { getWebsiteUrl, getPageUrl } = usePageBuilderSettings();
     const [isSiteRunning, refreshSiteStatus] = useSiteStatus(getWebsiteUrl());
 

diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/pageRevisions/RevisionsList.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/pageRevisions/RevisionsList.tsx
@@ -32,7 +32,7 @@ interface RevisionsListProps {
     page: PbPageData;
     getPageQuery: QueryResult;
 }
-const RevisionsList: React.FC<RevisionsListProps> = props => {
+const RevisionsList = (props: RevisionsListProps) => {
     const { page, getPageQuery } = props;
     const { revisions = [] } = page;
 

diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/previewContent/PagePreview.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/previewContent/PagePreview.tsx
@@ -85,7 +85,7 @@ interface PagePreviewProps {
     getPageQuery?: QueryResult;
 }
 
-const PagePreview: React.FC<PagePreviewProps> = ({ page }) => {
+const PagePreview = ({ page }: PagePreviewProps) => {
     return (
         <Zoom>
             {({ zoom, setZoom }) => (

diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/previewContent/Zoom.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/previewContent/Zoom.tsx
@@ -24,7 +24,7 @@ const getZoomLevel = (): number => {
     return zoom;
 };
 
-export const Zoom: React.FC<ZoomProps> = ({ children }) => {
+export const Zoom = ({ children }: ZoomProps) => {
     const [zoom, setZoom] = useState(() => getZoomLevel());
 
     useEffect(() => {

diff --git a/...age-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/CustomSection.tsx b/...age-builder/src/admin/plugins/permissionRenderer/PageBuilderPermissions/CustomSection.tsx
@@ -15,17 +15,18 @@ interface CustomSectionProps {
     setValue: (permission: string, type: string) => void;
     title: string;
     disabled?: boolean;
+    children?: React.ReactNode;
 }
 
-const CustomSection: React.FC<CustomSectionProps> = ({
+const CustomSection = ({
     Bind,
     data,
     entity,
     setValue,
     title,
     disabled,
     children = null
-}) => {
+}: CustomSectionProps) => {
     const rwdSelectEnabled = ["full"].includes(data[`${entity}AccessScope`]);
 
     return (

diff --git a/...er/src/admin/plugins/permissionRenderer/PageBuilderPermissions/PageBuilderPermissions.tsx b/...er/src/admin/plugins/permissionRenderer/PageBuilderPermissions/PageBuilderPermissions.tsx
@@ -40,10 +40,7 @@ interface PageBuilderPermissionsProps {
     value: SecurityPermission;
     onChange: (value: SecurityPermission[]) => void;
 }
-export const PageBuilderPermissions: React.FC<PageBuilderPermissionsProps> = ({
-    value,
-    onChange
-}) => {
+export const PageBuilderPermissions = ({ value, onChange }: PageBuilderPermissionsProps) => {
     const { getPermission } = useSecurity();
 
     // We disable form elements for custom permissions if AACL cannot be used.

diff --git a/packages/app-page-builder/src/admin/utils/components/EditElementDialog.tsx b/packages/app-page-builder/src/admin/utils/components/EditElementDialog.tsx
@@ -36,7 +36,7 @@ interface EditElementDialogComponentProps {
     onSubmit: FormOnSubmit;
 }
 
-const EditElementDialogComponent: React.FC<EditElementDialogComponentProps> = props => {
+const EditElementDialogComponent = (props: EditElementDialogComponentProps) => {
     const { open, onClose, onSubmit, plugin: pluginName } = props;
 
     const plugin: any = plugins.byName(pluginName);

diff --git a/packages/app-page-builder/src/admin/utils/components/Title.tsx b/packages/app-page-builder/src/admin/utils/components/Title.tsx
@@ -30,7 +30,7 @@ interface TitleProps {
     plugin: string;
     refresh: () => void;
 }
-const Title: React.FC<TitleProps> = props => {
+const Title = (props: TitleProps) => {
     const { plugin: pluginName, title } = props;
 
     const client = useApolloClient();

diff --git a/packages/app-page-builder/src/admin/utils/createBlockCategoryPlugin.tsx b/packages/app-page-builder/src/admin/utils/createBlockCategoryPlugin.tsx
@@ -8,7 +8,7 @@ interface IconProps {
     category: PbBlockCategory;
 }
 
-export const Icon: React.FC<IconProps> = ({ category }) => {
+export const Icon = ({ category }: IconProps) => {
     return (
         <FontAwesomeIcon
             style={{ color: "var(--mdc-theme-text-secondary-on-background)", fontSize: "24px" }}