[6633] Remove all logical resources from code

ui/app/src/CHANGELOG.md

@@ -3,6 +3,7 @@
 * [utils/xml] Upgrade prettier to v3x which changed from sync apis to async
   * `serialize` no longer formats code
   * `beautify` is now async
+* [utils/resource] Removed `createFakeResource`, `createResource` and `createResourceBundle` utils.
 * [components]
   * HostUI removed, merged with Host (its container component)
   * EditModeSwitcherUI removed, merged with EditModeSwitcher (its container component)
@@ -24,6 +25,9 @@
     * `listItemProps` are routed to the list `ListItem` component instead of the `ListItemButton`
     * Added `listItemButtonProps` property
   * `DraggablePanelListItem` prop `onMenu` send the pointer event as its first and only argument instead of the anchor element attached to the event. Can get element through `event.currentTarget`.
+  * Removed `pages/QuickCreateMenu` component.
+  * Removed `SuspenseWithEmptyState` and `WithEmptyState` components.
+  * Removed `resource` prop from StoreProvider
 * [services] Removed services associated with v1 APIs:
   * `fetchLegacyGetGoLiveItems`
   * `fetchLegacyUserActivities`
@@ -37,6 +41,11 @@
   * `actions/dialogs`: Renamed `updateEditConfig` action to `updateEditDialogConfig`
 * [hooks]
   * `usePreviewUrlControl`: Removed `history` prop. Retrieval of search and navigate (previously called 'push') is now done internally.
+  * Removed `useLogicResource` hook.
+  * Removed `useSelectorResource` hook.
+  * Removed `useQuickCreateListResource` hook.
+  * Removed `useSystemVersionResource` hook.
+  * Removed `useResolveWhenNoNullResource` hook.
 * Removed deprecated `aws-file-upload` and `aws-video` upload controls.
 * Migrated the Studio UI build to Vite/SWC
 * Rollup's XB build to use SWC

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

@@ -21,18 +21,17 @@ import React, { useEffect, useMemo, 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,13 @@ 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 = useMemo(() => {
+    const lowercaseKeyword = debounceKeyword.toLowerCase();
+    return contentTypes?.filter((contentType) => contentType.label.toLowerCase().includes(lowercaseKeyword));
+  }, [contentTypes, debounceKeyword]);
 
   const onSelectedContentType = (contentType: LegacyContentType) => {
     onContentTypeSelected?.({
@@ -72,37 +76,28 @@ export function ChangeContentTypeDialogContainer(props: ChangeContentTypeDialogC
 
   useEffect(() => {
     if (selectedItem.path) {
-      fetchLegacyContentTypes(site, selectedItem.path).subscribe(
-        (response) => {
+      setIsFetching(true);
+      const sub = 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 }));
         }
-      );
+      });
+      return () => {
+        sub.unsubscribe();
+      };
     }
   }, [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 +133,32 @@ 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 ? (
+            <ContentTypesGrid
+              contentTypes={filteredContentTypes}
+              isCompact={isCompact}
+              onTypeOpen={onSelectedContentType}
+              selectedContentType={selectedContentType}
+            />
+          ) : (
+            <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

@@ -15,15 +15,14 @@
  */
 
 import { CompareVersionsDialogContainerProps } from './utils';
-import React, { useMemo } from 'react';
-import { useLogicResource } from '../../hooks/useLogicResource';
-import { CompareVersionsBranch } from '../../models/Version';
-import { CompareVersions, CompareVersionsResource } from './CompareVersions';
-import { EntityState } from '../../models/EntityState';
-import ContentType from '../../models/ContentType';
+import React from 'react';
+import { CompareVersions } from './CompareVersions';
 import DialogBody from '../DialogBody/DialogBody';
-import { SuspenseWithEmptyState } from '../Suspencified/Suspencified';
 import { makeStyles } from 'tss-react/mui';
+import { ApiResponseErrorState } from '../ApiResponseErrorState';
+import { LoadingState } from '../LoadingState';
+import { EmptyState } from '../EmptyState';
+import { FormattedMessage } from 'react-intl';
 
 const useStyles = makeStyles()(() => ({
   dialogBody: {
@@ -42,47 +41,23 @@ const useStyles = makeStyles()(() => ({
 }));
 
 export function CompareVersionsDialogContainer(props: CompareVersionsDialogContainerProps) {
-  const { versionsBranch, contentTypesBranch } = props;
+  const { versionsBranch } = props;
   const { compareVersionsBranch } = versionsBranch;
   const { classes, cx } = useStyles();
 
-  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
-  });
-
   return (
-    <>
-      <DialogBody className={cx(classes.dialogBody, classes.noPadding)}>
-        <SuspenseWithEmptyState resource={compareVersionsResource}>
-          <CompareVersions resource={compareVersionsResource} />
-        </SuspenseWithEmptyState>
-      </DialogBody>
-    </>
+    <DialogBody className={cx(classes.dialogBody, classes.noPadding)}>
+      {compareVersionsBranch &&
+        (compareVersionsBranch.error ? (
+          <ApiResponseErrorState error={compareVersionsBranch.error} />
+        ) : compareVersionsBranch.isFetching ? (
+          <LoadingState />
+        ) : compareVersionsBranch.compareVersions?.length > 0 ? (
+          <CompareVersions versions={compareVersionsBranch.compareVersions} />
+        ) : (
+          <EmptyState title={<FormattedMessage defaultMessage="No versions found" />} />
+        ))}
+    </DialogBody>
   );
 }
 

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, { 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,13 @@ 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 ? (
+          <ConflictedPathDiffDialogUI fileDiff={fileDiff} tab={tab} />
+        ) : 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);