[3941] New Content Diff UX

ui/app/package.json

@@ -59,6 +59,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@graphiql/plugin-explorer": "^3.0.1",
+    "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^6.1.7",
     "@mui/lab": "6.0.0-beta.15",
     "@mui/material": "^6.1.7",
@@ -75,6 +76,7 @@
     "@types/video.js": "^7.3.58",
     "autosuggest-highlight": "^3.3.4",
     "clsx": "^2.1.1",
+    "diff": "^7.0.0",
     "fast-xml-parser": "^4.3.6",
     "graphiql": "^3.2.2",
     "graphql": "^16.8.1",
@@ -113,6 +115,7 @@
   "devDependencies": {
     "@formatjs/cli": "^6.2.12",
     "@rollup/plugin-swc": "^0.3.0",
+    "@types/diff": "^6.0.0",
     "@types/js-cookie": "^3.0.6",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/uuid": "^10",

ui/app/src/CHANGELOG.md

@@ -19,6 +19,7 @@
   * @mui/x-data-grid
   * @mui/x-date-pickers
   * @mui/x-tree-view
+* Removed LegacyVersionDialog and the entire associated `/studio/diff` route
 
 ## 4.2.0
 

ui/app/src/components/AccountManagement/utils.tsx

@@ -35,7 +35,9 @@ import {
   removeStoredPullBranch,
   removeStoredPullMergeStrategy,
   removeStoredPushBranch,
-  removeStoredShowToolsPanel
+  removeStoredShowToolsPanel,
+  removeCompareVersionDialogViewModes,
+  removeViewVersionDialogViewModes
 } from '../../utils/state';
 
 export const preferencesGroups: Array<{
@@ -132,6 +134,8 @@ export const preferencesGroups: Array<{
       removeStoredPreviewBackgroundMode(props.username);
       removeStoredBrowseDialogViewMode(props.username);
       removeStoredItems((key) => widgetsAccordionsKeyRegex.test(key));
+      removeCompareVersionDialogViewModes(props.username);
+      removeViewVersionDialogViewModes(props.username);
     }
   }
 ];

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

@@ -0,0 +1,113 @@
+/*
+ * Copyright (C) 2007-2024 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { ReactNode, useMemo } from 'react';
+import { isImage, isPdfDocument, isVideo } from '../PathNavigator/utils';
+import TextDiffView from './FieldsTypesDiffViews/TextDiffView';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import ImageView from '../ViewVersionDialog/FieldTypesViews/ImageView';
+import VideoView from '../ViewVersionDialog/FieldTypesViews/VideoView';
+import { PDFView } from '../ViewVersionDialog/AssetTypesViews/PDFView';
+
+const typesDiffMap = {
+  image: ImageView,
+  video: VideoView,
+  text: TextDiffView,
+  pdf: PDFView
+};
+
+export interface AssetDiffViewProps {
+  aContent?: string;
+  bContent?: string;
+  type: 'image' | 'video' | 'pdf' | 'text';
+  renderContent: (xml: string) => ReactNode;
+  noContent?: ReactNode;
+}
+
+function AssetDiffView(props: AssetDiffViewProps) {
+  const {
+    aContent,
+    bContent,
+    type,
+    renderContent,
+    noContent = (
+      <Box>
+        <Typography color="textSecondary">no content set</Typography>
+      </Box>
+    )
+  } = props;
+  const verticalLayout = type === 'image' || type === 'video';
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        height: '100%',
+        p: 2,
+        alignItems: verticalLayout ? 'center' : 'flex-start',
+        justifyContent: 'space-around',
+        flexDirection: verticalLayout ? 'column' : 'row',
+        '> div': {
+          flexGrow: verticalLayout && 1
+        }
+      }}
+    >
+      {aContent ? renderContent(aContent) : noContent}
+      {verticalLayout && <Divider sx={{ width: '100%', mt: 1, mb: 1 }} />}
+      {bContent ? renderContent(bContent) : noContent}
+    </Box>
+  );
+}
+
+export function CompareAssetPanel(props) {
+  const { a, b, item } = props;
+  const assetType = useMemo(() => {
+    if (isImage(item)) {
+      return 'image';
+    } else if (isVideo(item)) {
+      return 'video';
+    } else if (isPdfDocument(item.mimeType)) {
+      return 'pdf';
+    } else {
+      return 'text';
+    }
+  }, [item]);
+  const ViewComponent = typesDiffMap[assetType];
+  const isVerticalLayout = assetType === 'image' || assetType === 'video';
+  const viewComponentProps = {
+    ...(isVerticalLayout ? { sxs: { image: { maxHeight: '100%' } } } : {})
+  };
+
+  if (assetType === 'text') {
+    return <TextDiffView aXml={a} bXml={b} />;
+  } else {
+    return (
+      <AssetDiffView
+        aContent={a}
+        bContent={b}
+        type={assetType}
+        renderContent={(content) => (
+          <Box sx={{ height: isVerticalLayout ? 'calc(50% - 9px)' : '100%', width: '50%', textAlign: 'center' }}>
+            <ViewComponent content={content} {...viewComponentProps} />
+          </Box>
+        )}
+      />
+    );
+  }
+}
+
+export default CompareAssetPanel;