[6633] Remove all logical resources from code

ui/app/src/CHANGELOG.md

@@ -40,6 +40,8 @@
 * Migrated the Studio UI build to Vite/SWC
 * Rollup's XB build to use SWC
 * Upgraded target compilation to ES2022, dropping many code transforms for features that are supported by most modern browsers such as nullish coalescing, optional chaining, object spreading and destructuring.
+* Removed `PreviewPageExplorerPanel` component.
+* Removed `pages/QuickCreateMenu` component.
 
 ## 4.1.5
 * [common-api.js]

ui/app/src/components/ChangeContentTypeDialog/ChangeContentTypeDialogContainer.tsx

@@ -17,22 +17,21 @@
 import { ChangeContentTypeDialogContainerProps } from './utils';
 import { useActiveSiteId } from '../../hooks/useActiveSiteId';
 import { useDispatch } from 'react-redux';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { LegacyContentType } from '../../models/ContentType';
 import { fetchLegacyContentTypes } from '../../services/contentTypes';
 import { showErrorDialog } from '../../state/reducers/dialogs/error';
-import { useLogicResource } from '../../hooks/useLogicResource';
 import { useSubject } from '../../hooks/useSubject';
 import { debounceTime } from 'rxjs/operators';
 import DialogBody from '../DialogBody/DialogBody';
 import { Box, Checkbox, FormControlLabel } from '@mui/material';
 import SingleItemSelector from '../SingleItemSelector';
 import { FormattedMessage } from 'react-intl';
 import SearchBar from '../SearchBar/SearchBar';
-import { SuspenseWithEmptyState } from '../Suspencified/Suspencified';
 import { ContentTypesGrid, ContentTypesLoader } from '../NewContentDialog';
 import DialogFooter from '../DialogFooter/DialogFooter';
 import { makeStyles } from 'tss-react/mui';
+import EmptyState from '../EmptyState';
 
 const useStyles = makeStyles()(() => ({
   compact: {
@@ -61,8 +60,12 @@ export function ChangeContentTypeDialogContainer(props: ChangeContentTypeDialogC
   const [openSelector, setOpenSelector] = useState(false);
   const [selectedItem, setSelectedItem] = useState(item);
   const [contentTypes, setContentTypes] = useState<LegacyContentType[]>();
+  const [isFetching, setIsFetching] = useState(false);
   const [keyword, setKeyword] = useState('');
   const [debounceKeyword, setDebounceKeyword] = useState('');
+  const filteredContentTypes = contentTypes?.filter((contentType) =>
+    contentType.label.toLowerCase().includes(debounceKeyword.toLowerCase())
+  );
 
   const onSelectedContentType = (contentType: LegacyContentType) => {
     onContentTypeSelected?.({
@@ -72,37 +75,25 @@ export function ChangeContentTypeDialogContainer(props: ChangeContentTypeDialogC
 
   useEffect(() => {
     if (selectedItem.path) {
-      fetchLegacyContentTypes(site, selectedItem.path).subscribe(
-        (response) => {
+      setIsFetching(true);
+      fetchLegacyContentTypes(site, selectedItem.path).subscribe({
+        next: (response) => {
+          setIsFetching(false);
           setContentTypes(
             response.filter(
               (contentType) =>
                 contentType.type === selectedItem.systemType && contentType.name !== selectedItem.contentTypeId
             )
           );
         },
-        (response) => {
+        error: (response) => {
+          setIsFetching(false);
           dispatch(showErrorDialog({ error: response }));
         }
-      );
+      });
     }
   }, [dispatch, selectedItem, site]);
 
-  const resource = useLogicResource(
-    useMemo(() => ({ contentTypes, debounceKeyword }), [contentTypes, debounceKeyword]),
-    {
-      shouldResolve: ({ contentTypes }) => Boolean(contentTypes),
-      shouldReject: () => null,
-      shouldRenew: (source, resource) => resource.complete,
-      resultSelector: ({ contentTypes, debounceKeyword }) => {
-        return contentTypes.filter((contentType) =>
-          contentType.label.toLowerCase().includes(debounceKeyword.toLowerCase())
-        );
-      },
-      errorSelector: () => null
-    }
-  );
-
   const onSearch$ = useSubject<string>();
 
   useEffect(() => {
@@ -138,32 +129,34 @@ export function ChangeContentTypeDialogContainer(props: ChangeContentTypeDialogC
             <SearchBar onChange={onSearch} keyword={keyword} autoFocus showActionButton={Boolean(keyword)} />
           </Box>
         </Box>
-        <SuspenseWithEmptyState
-          resource={resource}
-          suspenseProps={{
-            fallback: <ContentTypesLoader numOfItems={6} isCompact={isCompact} />
-          }}
-          withEmptyStateProps={{
-            emptyStateProps: {
-              classes: {
-                image: classes.emptyStateImg
-              },
-              title: (
+        {isFetching ? (
+          <ContentTypesLoader numOfItems={6} isCompact={isCompact} />
+        ) : filteredContentTypes ? (
+          filteredContentTypes.length > 0 ? (
+            <Suspense fallback="">
+              <ContentTypesGrid
+                contentTypes={filteredContentTypes}
+                isCompact={isCompact}
+                onTypeOpen={onSelectedContentType}
+                selectedContentType={selectedContentType}
+              />
+            </Suspense>
+          ) : (
+            <EmptyState
+              title={
                 <FormattedMessage
                   id="changeContentTypeDialog.emptyStateMessage"
                   defaultMessage="No Content Types Found"
                 />
-              )
-            }
-          }}
-        >
-          <ContentTypesGrid
-            resource={resource}
-            isCompact={isCompact}
-            onTypeOpen={onSelectedContentType}
-            selectedContentType={selectedContentType}
-          />
-        </SuspenseWithEmptyState>
+              }
+              classes={{
+                image: classes.emptyStateImg
+              }}
+            />
+          )
+        ) : (
+          <></>
+        )}
       </DialogBody>
       <DialogFooter>
         <FormControlLabel

ui/app/src/components/CompareVersionsDialog/CompareVersions.tsx

@@ -18,10 +18,7 @@
 
 import { makeStyles } from 'tss-react/mui';
 import ContentInstance from '../../models/ContentInstance';
-import { LookupTable } from '../../models/LookupTable';
-import ContentType from '../../models/ContentType';
 import React from 'react';
-import { Resource } from '../../models/Resource';
 import { useSelection } from '../../hooks/useSelection';
 
 // declare const monaco: any;
@@ -151,14 +148,8 @@ import { useSelection } from '../../hooks/useSelection';
   }
 }); */
 
-export interface CompareVersionsResource {
-  a: ContentInstance;
-  b: any;
-  contentTypes: LookupTable<ContentType>;
-}
-
 interface CompareVersionsProps {
-  resource: Resource<CompareVersionsResource>;
+  versions: ContentInstance[];
 }
 
 const getLegacyDialogStyles = makeStyles()(() => ({
@@ -169,7 +160,7 @@ const getLegacyDialogStyles = makeStyles()(() => ({
 }));
 
 export function CompareVersions(props: CompareVersionsProps) {
-  const { a, b } = props.resource.read();
+  const [a, b] = props.versions;
   const { classes } = getLegacyDialogStyles();
   const authoringUrl = useSelection<string>((state) => state.env.authoringBase);
   return (

ui/app/src/components/CompareVersionsDialog/CompareVersionsDialogContainer.tsx

@@ -16,13 +16,10 @@
 
 import { CompareVersionsDialogContainerProps } from './utils';
 import { FormattedMessage } from 'react-intl';
-import React, { useMemo, useState } from 'react';
+import React, { Suspense, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useLogicResource } from '../../hooks/useLogicResource';
-import { CompareVersionsBranch, ItemHistoryEntry } from '../../models/Version';
-import { CompareVersions, CompareVersionsResource } from './CompareVersions';
-import { EntityState } from '../../models/EntityState';
-import ContentType from '../../models/ContentType';
+import { ItemHistoryEntry } from '../../models/Version';
+import { CompareVersions } from './CompareVersions';
 import {
   compareBothVersions,
   compareVersion,
@@ -32,14 +29,14 @@ import {
 import VersionList from '../VersionList';
 import DialogBody from '../DialogBody/DialogBody';
 import SingleItemSelector from '../SingleItemSelector';
-import { SuspenseWithEmptyState } from '../Suspencified/Suspencified';
 import EmptyState from '../EmptyState/EmptyState';
 import Typography from '@mui/material/Typography';
 import DialogFooter from '../DialogFooter/DialogFooter';
 import { HistoryDialogPagination } from '../HistoryDialog';
 import { makeStyles } from 'tss-react/mui';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { LoadingState } from '../LoadingState';
+import ApiResponseErrorState from '../ApiResponseErrorState';
 
 const useStyles = makeStyles()(() => ({
   dialogBody: {
@@ -58,42 +55,13 @@ const useStyles = makeStyles()(() => ({
 }));
 
 export function CompareVersionsDialogContainer(props: CompareVersionsDialogContainerProps) {
-  const { selectedA, selectedB, versionsBranch, disableItemSwitching = false, contentTypesBranch } = props;
+  const { selectedA, selectedB, versionsBranch, disableItemSwitching = false } = props;
   const { count, page, limit, selected, compareVersionsBranch, current, item, rootPath } = versionsBranch;
   const { classes, cx } = useStyles();
   const [openSelector, setOpenSelector] = useState(false);
   const dispatch = useDispatch();
   const compareMode = selectedA && selectedB;
 
-  const compareVersionsData = useMemo(
-    () => ({
-      compareVersionsBranch,
-      contentTypesBranch
-    }),
-    [compareVersionsBranch, contentTypesBranch]
-  );
-
-  const compareVersionsResource = useLogicResource<
-    CompareVersionsResource,
-    { compareVersionsBranch: CompareVersionsBranch; contentTypesBranch: EntityState<ContentType> }
-  >(compareVersionsData, {
-    shouldResolve: ({ compareVersionsBranch, contentTypesBranch }) =>
-      compareVersionsBranch.compareVersions &&
-      contentTypesBranch.byId &&
-      !compareVersionsBranch.isFetching &&
-      !contentTypesBranch.isFetching,
-    shouldReject: ({ compareVersionsBranch, contentTypesBranch }) =>
-      Boolean(compareVersionsBranch.error || contentTypesBranch.error),
-    shouldRenew: ({ compareVersionsBranch, contentTypesBranch }, resource) => resource.complete,
-    resultSelector: ({ compareVersionsBranch, contentTypesBranch }) => ({
-      a: compareVersionsBranch.compareVersions?.[0],
-      b: compareVersionsBranch.compareVersions?.[1],
-      contentTypes: contentTypesBranch.byId
-    }),
-    errorSelector: ({ compareVersionsBranch, contentTypesBranch }) =>
-      compareVersionsBranch.error || contentTypesBranch.error
-  });
-
   const handleItemClick = (version: ItemHistoryEntry) => {
     if (!selected[0]) {
       dispatch(compareVersion({ id: version.versionNumber }));
@@ -138,9 +106,19 @@ export function CompareVersionsDialogContainer(props: CompareVersionsDialogConta
           />
         )}
         {compareMode ? (
-          <SuspenseWithEmptyState resource={compareVersionsResource}>
-            <CompareVersions resource={compareVersionsResource} />
-          </SuspenseWithEmptyState>
+          compareVersionsBranch ? (
+            compareVersionsBranch.error ? (
+              <ApiResponseErrorState error={compareVersionsBranch.error} />
+            ) : compareVersionsBranch.isFetching ? (
+              <LoadingState />
+            ) : compareVersionsBranch.compareVersions?.length > 0 ? (
+              <Suspense fallback="">
+                <CompareVersions versions={compareVersionsBranch.compareVersions} />
+              </Suspense>
+            ) : (
+              <EmptyState title={<FormattedMessage defaultMessage="No versions found" />} />
+            )
+          ) : null
         ) : item ? (
           <ErrorBoundary>
             {versionsBranch.isFetching ? (

ui/app/src/components/ConflictedPathDiffDialog/ConflictedPathDiffDialog.tsx

@@ -14,7 +14,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import Dialog from '@mui/material/Dialog';
 import DialogHeader from '../DialogHeader';
 import DialogBody from '../DialogBody/DialogBody';
@@ -23,7 +23,6 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { diffConflictedFile } from '../../services/repositories';
 import ApiResponse from '../../models/ApiResponse';
 import { FileDiff } from '../../models/Repository';
-import { SuspenseWithEmptyState } from '../Suspencified';
 import ConflictedPathDiffDialogUI from './ConflictedPathDiffDialogUI';
 import SecondaryButton from '../SecondaryButton';
 import ConfirmDropdown from '../ConfirmDropdown';
@@ -33,7 +32,8 @@ import { makeStyles } from 'tss-react/mui';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import { useActiveSiteId } from '../../hooks/useActiveSiteId';
-import { useLogicResource } from '../../hooks/useLogicResource';
+import { ApiResponseErrorState } from '../ApiResponseErrorState';
+import { LoadingState } from '../LoadingState';
 
 export interface RemoteRepositoriesDiffDialogProps {
   open: boolean;
@@ -101,17 +101,6 @@ export function ConflictedPathDiffDialog(props: RemoteRepositoriesDiffDialogProp
     setTab(newValue);
   };
 
-  const resource = useLogicResource<FileDiff, { fileDiff: FileDiff; error: ApiResponse; fetching: boolean }>(
-    useMemo(() => ({ fileDiff, error, fetching }), [fileDiff, error, fetching]),
-    {
-      shouldResolve: (source) => Boolean(source.fileDiff) && !fetching,
-      shouldReject: ({ error }) => Boolean(error),
-      shouldRenew: (source, resource) => fetching && resource.complete,
-      resultSelector: (source) => source.fileDiff,
-      errorSelector: () => error
-    }
-  );
-
   return (
     <Dialog open={open} onClose={onClose} fullWidth maxWidth="md">
       <DialogHeader
@@ -143,9 +132,15 @@ export function ConflictedPathDiffDialog(props: RemoteRepositoriesDiffDialogProp
         </Tabs>
       </DialogHeader>
       <DialogBody className={classes.dialogContent}>
-        <SuspenseWithEmptyState resource={resource}>
-          <ConflictedPathDiffDialogUI resource={resource} tab={tab} />
-        </SuspenseWithEmptyState>
+        {error ? (
+          <ApiResponseErrorState error={error} />
+        ) : fetching ? (
+          <LoadingState />
+        ) : fileDiff ? (
+          <Suspense fallback="">
+            <ConflictedPathDiffDialogUI fileDiff={fileDiff} tab={tab} />
+          </Suspense>
+        ) : null}
       </DialogBody>
       <DialogFooter>
         <SecondaryButton onClick={onClose}>

ui/app/src/components/ConflictedPathDiffDialog/ConflictedPathDiffDialogUI.tsx

@@ -14,7 +14,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Resource } from '../../models/Resource';
 import { FileDiff } from '../../models/Repository';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
@@ -54,13 +53,12 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 export interface RemoteRepositoriesDiffDialogUIProps {
-  resource: Resource<FileDiff>;
+  fileDiff: FileDiff;
   tab: number;
 }
 
 export function ConflictedPathDiffDialogUI(props: RemoteRepositoriesDiffDialogUIProps) {
-  const { resource, tab } = props;
-  const fileDiff = resource.read();
+  const { fileDiff, tab } = props;
   const { classes } = useStyles();
 
   return (

ui/app/src/components/DeleteContentTypeDialog/DeleteContentTypeDialogBody.tsx

@@ -81,8 +81,7 @@ const useStyles = makeStyles()((theme) => ({
 
 export function DeleteContentTypeDialogBody(props: DeleteContentTypeDialogBodyProps) {
   const { classes } = useStyles();
-  const { onCloseButtonClick, resource, contentType, onSubmit: onSubmitProp, password = 'delete', submitting } = props;
-  const data = resource.read();
+  const { onCloseButtonClick, data, contentType, onSubmit: onSubmitProp, password = 'delete', submitting } = props;
   const { formatMessage } = useIntl();
   const dataEntries = Object.entries(data) as Array<[keyof FetchContentTypeUsageResponse, SandboxItem[]]>;
   const entriesWithItems = dataEntries.filter(([, items]) => items.length > 0);