[7095] Rename dialog offers the ability to edit a broken reference but will not allow the user to open the content form

templates/web/legacy/embedded_legacy_form.ftl

@@ -91,6 +91,7 @@
     const newEmbedded = CStudioAuthoring.Utils.getQueryVariable(location.search, 'newEmbedded');
     const contentTypeId = CStudioAuthoring.Utils.getQueryVariable(location.search, 'contentTypeId');
     const isNewContent = CStudioAuthoring.Utils.getQueryVariable(location.search, 'isNewContent') === 'true';
+    const formId = CStudioAuthoring.Utils.getQueryVariable(location.search, 'formId');
     const LEGACY_FORM_DIALOG_CANCEL_REQUEST = 'LEGACY_FORM_DIALOG_CANCEL_REQUEST';
 
     CStudioAuthoring.OverlayRequiredResources.loadContextNavCss();
@@ -125,6 +126,7 @@
                       type: 'EMBEDDED_LEGACY_FORM_SUCCESS',
                       refresh: true,
                       tab: type,
+                      formId,
                       action
                     }, '*');
                   },
@@ -134,6 +136,7 @@
                       type: 'EMBEDDED_LEGACY_FORM_FAILURE',
                       refresh: false,
                       tab: type,
+                      formId,
                       action: 'failure',
                       message: formatMessage(embeddedLegacyFormMessages.contentFormFailedToLoadErrorMessage)
                     }, '*');
@@ -148,6 +151,7 @@
                       refresh: false,
                       close: close,
                       tab: type,
+                      formId,
                       action: 'cancelled'
                     }, '*');
                   },
@@ -168,24 +172,26 @@
                         }
                       });
                     } else {
-                      window.parent.postMessage({ type: 'EMBEDDED_LEGACY_FORM_RENDERED' }, '*');
+                      window.parent.postMessage({ type: 'EMBEDDED_LEGACY_FORM_RENDERED', formId }, '*');
                     }
                   },
                   pendingChanges: () => {
                     window.parent.postMessage({
                       type: 'EMBEDDED_LEGACY_FORM_PENDING_CHANGES',
-                      action: 'pendingChanges'
+                      action: 'pendingChanges',
+                      formId
                     }, '*');
                   },
                   renderFailed(error) {
-                    window.parent.postMessage({ type: 'EMBEDDED_LEGACY_FORM_RENDER_FAILED', payload: { error } }, '*');
+                    window.parent.postMessage({ type: 'EMBEDDED_LEGACY_FORM_RENDER_FAILED', payload: { error }, formId }, '*');
                   },
                   changeToEditMode() {
-                    window.parent.postMessage({ type: 'EMBEDDED_LEGACY_CHANGE_TO_EDIT_MODE' }, '*');
+                    window.parent.postMessage({ type: 'EMBEDDED_LEGACY_CHANGE_TO_EDIT_MODE', formId }, '*');
                   },
                   minimize: () => {
                     window.parent.postMessage({
-                      type: 'EMBEDDED_LEGACY_MINIMIZE_REQUEST'
+                      type: 'EMBEDDED_LEGACY_MINIMIZE_REQUEST',
+                      formId
                     }, '*');
                   },
                   isParent: true,
@@ -204,6 +210,7 @@
                 refresh: false,
                 tab: type,
                 action: 'failure',
+                formId,
                 message: formatMessage(embeddedLegacyFormMessages.contentFormFailedToLoadErrorMessage)
               }, '*');
             }
@@ -227,15 +234,17 @@
                 tab: type,
                 redirectUrl: response.item?.browserUri,
                 action,
-                isNew: true
+                isNew: true,
+                formId
               }, '*');
             },
             failure: (error) => {
               error && console.error(error);
               window.parent.postMessage({
                 type: 'EMBEDDED_LEGACY_FORM_FAILURE',
                 refresh: false, tab: type, action: 'failure',
-                message: formatMessage(embeddedLegacyFormMessages.contentFormFailedToLoadErrorMessage)
+                message: formatMessage(embeddedLegacyFormMessages.contentFormFailedToLoadErrorMessage),
+                formId
               }, '*');
             },
             cancelled: () => {
@@ -244,16 +253,18 @@
                 type: 'EMBEDDED_LEGACY_FORM_CLOSE',
                 refresh: false,
                 tab: type,
-                action: 'cancelled'
+                action: 'cancelled',
+                formId
               }, '*');
             },
             renderComplete: () => {
-              window.parent.postMessage({ type: 'EMBEDDED_LEGACY_FORM_RENDERED' }, '*');
+              window.parent.postMessage({ type: 'EMBEDDED_LEGACY_FORM_RENDERED', formId }, '*');
             },
             pendingChanges: () => {
               window.parent.postMessage({
                 type: 'EMBEDDED_LEGACY_FORM_PENDING_CHANGES',
-                action: 'pendingChanges'
+                action: 'pendingChanges',
+                formId
               }, '*');
             },
             id: type

ui/app/src/components/LegacyFormDialog/EmbeddedLegacyContainer.tsx

@@ -51,6 +51,7 @@ import { useStyles } from './styles';
 import { hasEditAction } from '../../utils/content';
 import { nnou } from '../../utils/object';
 import { useFetchItem } from '../../hooks/useFetchItem';
+import { nanoid as uuid } from 'nanoid';
 
 export const EmbeddedLegacyContainer = React.forwardRef(function EmbeddedLegacyEditor(
   props: LegacyFormDialogContainerProps,
@@ -95,6 +96,7 @@ export const EmbeddedLegacyContainer = React.forwardRef(function EmbeddedLegacyE
       fieldsIndexes[id] = index;
     });
   }
+  const formId = useMemo(() => uuid(), []);
 
   const src = useMemo(
     () =>
@@ -109,6 +111,7 @@ export const EmbeddedLegacyContainer = React.forwardRef(function EmbeddedLegacyE
         contentTypeId,
         isNewContent,
         iceGroupId,
+        formId,
         ...(nnou(availableActions) && !isNewContent ? { canEdit: hasEditAction(availableActions) } : {}),
         ...(selectedFields && selectedFields.length ? { selectedFields: JSON.stringify(selectedFields) } : {}),
         ...(newEmbedded ? { newEmbedded: JSON.stringify(newEmbedded) } : {}),
@@ -128,7 +131,8 @@ export const EmbeddedLegacyContainer = React.forwardRef(function EmbeddedLegacyE
       selectedFields,
       newEmbedded,
       availableActions,
-      fieldsIndexes
+      fieldsIndexes,
+      formId
     ]
   );
 
@@ -147,7 +151,7 @@ export const EmbeddedLegacyContainer = React.forwardRef(function EmbeddedLegacyE
   );
 
   useEffect(() => {
-    const messagesSubscription = messages.subscribe((e: any) => {
+    const messagesSubscription = messages.pipe(filter((e) => e.data.formId === formId)).subscribe((e: any) => {
       switch (e.data.type) {
         case EMBEDDED_LEGACY_FORM_SUCCESS: {
           onSave(e.data);
@@ -259,7 +263,7 @@ export const EmbeddedLegacyContainer = React.forwardRef(function EmbeddedLegacyE
     return () => {
       messagesSubscription.unsubscribe();
     };
-  }, [inProgress, onSave, messages, dispatch, onClose, formatMessage, onMinimize, setIframeLoaded]);
+  }, [inProgress, onSave, messages, dispatch, onClose, formatMessage, onMinimize, setIframeLoaded, formId]);
 
   useUnmount(onClosed);
 

ui/app/src/components/LegacyFormDialog/LegacyFormDialog.tsx

@@ -104,12 +104,16 @@ export function LegacyFormDialog(props: LegacyFormDialogProps) {
             title={title}
             disabled={isSubmitting}
             onCloseButtonClick={onCloseButtonClick}
-            rightActions={[
-              {
-                icon: { id: '@mui/icons-material/RemoveRounded' },
-                onClick: onMinimize
-              }
-            ]}
+            rightActions={
+              onMinimize
+                ? [
+                    {
+                      icon: { id: '@mui/icons-material/RemoveRounded' },
+                      onClick: onMinimize
+                    }
+                  ]
+                : []
+            }
           />
         )}
         <EmbeddedLegacyContainer

ui/app/src/components/RenameAssetDialog/RenameAssetDialogContainer.tsx

@@ -36,6 +36,9 @@ import { translations } from '../CreateFileDialog/translations';
 import { RenameItemView } from '../RenameDialogBody';
 import { applyAssetNameRules } from '../../utils/content';
 import { DialogBody } from '../DialogBody';
+import { getHostToHostBus } from '../../utils/subjects';
+import { filter } from 'rxjs/operators';
+import { contentEvent } from '../../state/actions/system';
 
 export function RenameAssetDialogContainer(props: RenameAssetContainerProps) {
   const {
@@ -68,6 +71,16 @@ export function RenameAssetDialogContainer(props: RenameAssetContainerProps) {
     dispatch(fetchRenameAssetDependants());
   }, [dispatch]);
 
+  useEffect(() => {
+    const hostToHost$ = getHostToHostBus();
+    const subscription = hostToHost$.pipe(filter((e) => e.type === contentEvent.type)).subscribe(() => {
+      dispatch(fetchRenameAssetDependants());
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [dispatch]);
+
   const onInputChanges = (newValue: string) => {
     setName(newValue);
     const newHasPendingChanges = newValue !== value;

ui/app/src/components/RenameContentDialog/RenameContentDialog.tsx

@@ -16,7 +16,7 @@
 
 import { EnhancedDialog, EnhancedDialogProps } from '../EnhancedDialog';
 import { FormattedMessage } from 'react-intl';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { DetailedItem } from '../../models';
 import RenameContentDialogContainer from './RenameContentDialogContainer';
 import { fetchDependant } from '../../services/dependencies';
@@ -25,6 +25,9 @@ import { parseLegacyItemToDetailedItem } from '../../utils/content';
 import useWithPendingChangesCloseRequest from '../../hooks/useWithPendingChangesCloseRequest';
 import { onSubmittingAndOrPendingChangeProps } from '../../hooks/useEnhancedDialogState';
 import { ensureSingleSlash, isBlank } from '../../utils/string';
+import { getHostToHostBus } from '../../utils/subjects';
+import { filter } from 'rxjs/operators';
+import { contentEvent } from '../../state/actions/system';
 
 export interface RenameContentDialogProps extends EnhancedDialogProps {
   path: string;
@@ -41,7 +44,7 @@ export function RenameContentDialog(props: RenameContentDialogProps) {
   const siteId = useActiveSiteId();
   const pendingChangesCloseRequest = useWithPendingChangesCloseRequest(dialogProps.onClose);
 
-  useEffect(() => {
+  const loadDependants = useCallback((siteId, path, value) => {
     if (!isBlank(value) && !isBlank(path)) {
       setFetchingDependantItems(true);
       fetchDependant(siteId, ensureSingleSlash(`${path}/${value}`)).subscribe({
@@ -56,7 +59,21 @@ export function RenameContentDialog(props: RenameContentDialogProps) {
         }
       });
     }
-  }, [path, value, siteId]);
+  }, []);
+
+  useEffect(() => {
+    loadDependants(siteId, path, value);
+  }, [path, value, siteId, loadDependants]);
+
+  useEffect(() => {
+    const hostToHost$ = getHostToHostBus();
+    const subscription = hostToHost$.pipe(filter((e) => e.type === contentEvent.type)).subscribe(() => {
+      loadDependants(siteId, path, value);
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [siteId, path, value, loadDependants]);
 
   return (
     <EnhancedDialog

ui/app/src/components/RenameDialogBody/RenameItemView.tsx

@@ -34,6 +34,8 @@ import { ApiResponseErrorState } from '../ApiResponseErrorState';
 import IconButton from '@mui/material/IconButton';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import { AjaxError } from 'rxjs/ajax';
+import { LegacyFormDialog } from '../LegacyFormDialog';
+import useSpreadState from '../../hooks/useSpreadState';
 
 export interface RenameItemViewProps {
   name: string;
@@ -68,9 +70,20 @@ export function RenameItemView(props: RenameItemViewProps) {
   const { authoringBase } = useEnv();
   const siteId = useActiveSiteId();
   const dispatch = useDispatch();
+  const [legacyFormDialogState, setLegacyFormDialogState] = useSpreadState({
+    open: false,
+    path: null
+  });
 
   const handleEditorDisplay = (item: DetailedItem) => {
-    openItemEditor(item, authoringBase, siteId, dispatch, fetchRenameAssetDependants());
+    if (item.systemType === 'component' || item.systemType === 'page') {
+      setLegacyFormDialogState({
+        open: true,
+        path: item.path
+      });
+    } else {
+      openItemEditor(item, authoringBase, siteId, dispatch, fetchRenameAssetDependants());
+    }
   };
 
   return fetchingDependantItems ? (
@@ -158,6 +171,13 @@ export function RenameItemView(props: RenameItemViewProps) {
           <FormattedMessage id="renameAsset.noDependentItems" defaultMessage="No dependent items" />
         </Typography>
       )}
+      <LegacyFormDialog
+        open={legacyFormDialogState.open}
+        authoringBase={authoringBase}
+        path={legacyFormDialogState.path}
+        site={siteId}
+        onClose={() => setLegacyFormDialogState({ open: false, path: null })}
+      />
     </>
   ) : (
     error && <ApiResponseErrorState error={error.response} />

ui/app/src/utils/path.ts

@@ -214,7 +214,8 @@ export function getEditFormSrc({
   iceGroupId,
   newEmbedded,
   canEdit,
-  fieldsIndexes
+  fieldsIndexes,
+  formId
 }: {
   path: string;
   selectedFields?: string;
@@ -230,6 +231,7 @@ export function getEditFormSrc({
   newEmbedded?: string;
   canEdit?: boolean;
   fieldsIndexes?: string;
+  formId?: string;
 }): string {
   const qs = toQueryString({
     site,
@@ -244,7 +246,8 @@ export function getEditFormSrc({
     iceId: iceGroupId,
     newEmbedded,
     canEdit,
-    fieldsIndexes
+    fieldsIndexes,
+    formId
   });
   return `${authoringBase}/legacy/form${qs}`;
 }