Remove whiteboard content container and a few fragments that we shoul…

…dn't be using

src/domain/collaboration/whiteboard/WhiteboardDialog/WhiteboardDialog.tsx

@@ -15,9 +15,9 @@ import { WhiteboardTemplateContent } from '../../../templates/models/WhiteboardT
 import mergeWhiteboard from '../utils/mergeWhiteboard';
 import { error as logError, TagCategoryValues } from '../../../../core/logging/sentry/log';
 import { useNotification } from '../../../../core/ui/notifications/useNotification';
-import { WhiteboardWithContent } from '../containers/WhiteboardContentContainer';
 import {
   generateWhiteboardPreviewImages,
+  PreviewImageDimensions,
   WhiteboardPreviewImage,
 } from '../WhiteboardPreviewImages/WhiteboardPreviewImages';
 import { CollabAPI } from '../../../common/whiteboard/excalidraw/collab/useCollab';
@@ -30,19 +30,46 @@ import useLoadingState from '../../../shared/utils/useLoadingState';
 import { useGlobalGridColumns } from '../../../../core/ui/grid/constants';
 import WhiteboardDialogTemplatesLibrary from '../../../templates/components/WhiteboardDialog/WhiteboardDialogTemplatesLibrary';
 import { useWhiteboardLastUpdatedDateQuery } from '../../../../core/apollo/generated/apollo-hooks';
+import { ContentUpdatePolicy } from '../../../../core/apollo/generated/graphql-schema';
+import { Identifiable } from '../../../../core/utils/Identifiable';
 
-interface WhiteboardDialogProps<Whiteboard extends WhiteboardWithContent> {
+export interface WhiteboardDetails {
+  id: string;
+  nameID: string;
+  contentUpdatePolicy: ContentUpdatePolicy;
+  profile: {
+    id: string;
+    displayName: string;
+    storageBucket: { id: string };
+    visual?: {
+      id: string;
+    } & PreviewImageDimensions;
+    preview?: {
+      id: string;
+    } & PreviewImageDimensions;
+  };
+  createdBy?: {
+    id: string;
+    profile: {
+      displayName: string;
+      url: string;
+      avatar?: { id: string; uri: string };
+    };
+  };
+}
+
+interface WhiteboardDialogProps {
   entities: {
-    whiteboard?: Whiteboard;
+    whiteboard?: WhiteboardDetails;
   };
   actions: {
     onCancel: () => void;
     onUpdate: (
-      whiteboard: Whiteboard,
+      whiteboard: WhiteboardDetails,
       previewImages?: WhiteboardPreviewImage[]
     ) => Promise<{ success: boolean; errors?: string[] }>;
     onChangeDisplayName: (whiteboardId: string | undefined, newDisplayName: string) => Promise<void>;
-    onDelete: (whiteboard: Whiteboard) => Promise<void>;
+    onDelete: (whiteboard: Identifiable) => Promise<void>;
   };
   options: {
     show: boolean;
@@ -56,7 +83,6 @@ interface WhiteboardDialogProps<Whiteboard extends WhiteboardWithContent> {
     editDisplayName?: boolean;
   };
   state?: {
-    updatingWhiteboardContent?: boolean;
     loadingWhiteboardValue?: boolean;
     changingWhiteboardLockState?: boolean;
   };
@@ -80,12 +106,7 @@ const useStyles = makeStyles(theme => ({
 
 type RelevantExcalidrawState = Pick<ExportedDataState, 'appState' | 'elements' | 'files'>;
 
-const WhiteboardDialog = <Whiteboard extends WhiteboardWithContent>({
-  entities,
-  actions,
-  options,
-  state,
-}: WhiteboardDialogProps<Whiteboard>) => {
+const WhiteboardDialog = ({ entities, actions, options, state }: WhiteboardDialogProps) => {
   const { t } = useTranslation();
   const notify = useNotification();
   const { whiteboard } = entities;
@@ -127,11 +148,11 @@ const WhiteboardDialog = <Whiteboard extends WhiteboardWithContent>({
   });
 
   const prepareWhiteboardForUpdate = async (
-    whiteboard: WhiteboardWithContent,
+    whiteboard: WhiteboardDetails,
     state: RelevantExcalidrawState | undefined,
     shouldUploadPreviewImages = true
   ): Promise<{
-    whiteboard: Whiteboard;
+    whiteboard: WhiteboardDetails;
     previewImages?: WhiteboardPreviewImage[];
   }> => {
     if (!state) {
@@ -160,7 +181,7 @@ const WhiteboardDialog = <Whiteboard extends WhiteboardWithContent>({
           ...whiteboard.profile,
           displayName,
         },
-      } as Whiteboard,
+      },
       previewImages,
     };
   };
@@ -169,9 +190,7 @@ const WhiteboardDialog = <Whiteboard extends WhiteboardWithContent>({
     if (!whiteboard || !excalidrawAPI) {
       return;
     }
-    const content = JSON.parse(whiteboard.content) as RelevantExcalidrawState;
     return {
-      ...content,
       elements: excalidrawAPI.getSceneElements(),
       appState: excalidrawAPI.getAppState(),
       files: excalidrawAPI.getFiles(),
@@ -308,7 +327,6 @@ const WhiteboardDialog = <Whiteboard extends WhiteboardWithContent>({
                   canDelete={options.canDelete}
                   onRestart={restartCollaboration}
                   canUpdateContent={options.canEdit!}
-                  updating={state?.updatingWhiteboardContent}
                   createdBy={whiteboard?.createdBy}
                   contentUpdatePolicy={whiteboard?.contentUpdatePolicy}
                 />

src/domain/collaboration/whiteboard/WhiteboardsManagement/WhiteboardView.tsx

@@ -1,13 +1,8 @@
 import React, { FC, ReactNode } from 'react';
 import WhiteboardActionsContainer from '../containers/WhiteboardActionsContainer';
-import {
-  AuthorizationPrivilege,
-  WhiteboardContentFragment,
-  WhiteboardDetailsFragment,
-} from '../../../../core/apollo/generated/graphql-schema';
+import { AuthorizationPrivilege } from '../../../../core/apollo/generated/graphql-schema';
 import { JourneyTypeName } from '../../../journey/JourneyTypeName';
-import WhiteboardContentContainer from '../containers/WhiteboardContentContainer';
-import WhiteboardDialog from '../WhiteboardDialog/WhiteboardDialog';
+import WhiteboardDialog, { WhiteboardDetails } from '../WhiteboardDialog/WhiteboardDialog';
 import { useFullscreen } from '../../../../core/ui/fullscreen/useFullscreen';
 import FullscreenButton from '../../../../core/ui/button/FullscreenButton';
 import ShareButton from '../../../shared/components/ShareDialog/ShareButton';
@@ -23,8 +18,8 @@ export interface WhiteboardNavigationMethods {
 
 export interface WhiteboardViewProps extends ActiveWhiteboardIdHolder, WhiteboardNavigationMethods {
   journeyTypeName: JourneyTypeName;
-  whiteboard: WhiteboardDetailsFragment | undefined;
-  authorization: WhiteboardDetailsFragment['authorization'];
+  whiteboard: WhiteboardDetails | undefined;
+  authorization: { myPrivileges?: AuthorizationPrivilege[] } | undefined;
   whiteboardShareUrl: string;
   displayName?: ReactNode;
   readOnlyDisplayName?: boolean;
@@ -71,49 +66,43 @@ const WhiteboardView: FC<WhiteboardViewProps> = ({
   return (
     <WhiteboardActionsContainer>
       {(_, actionsState, actions) => (
-        <WhiteboardContentContainer whiteboardId={whiteboard?.id}>
-          {entities => {
-            return (
-              <WhiteboardDialog
-                entities={{
-                  whiteboard: entities.whiteboard as WhiteboardContentFragment & WhiteboardDetailsFragment,
-                }}
-                actions={{
-                  onCancel: handleCancel,
-                  onUpdate: actions.onUpdate,
-                  onDelete: actions.onDelete,
-                  onChangeDisplayName: actions.onChangeDisplayName,
-                }}
-                options={{
-                  canEdit: hasUpdateContentPrivileges,
-                  canDelete: hasDeletePrivileges,
-                  show: Boolean(whiteboardId),
-                  dialogTitle: displayName,
-                  readOnlyDisplayName: readOnlyDisplayName || !hasUpdatePrivileges,
-                  fullscreen,
-                  headerActions: (
-                    <>
-                      <ShareButton url={whiteboardShareUrl} entityTypeName="whiteboard" disabled={!whiteboardShareUrl}>
-                        {hasUpdatePrivileges && (
-                          <WhiteboardShareSettings
-                            createdBy={entities.whiteboard?.createdBy}
-                            journeyTypeName={journeyTypeName}
-                            {...contentUpdatePolicyProvided}
-                          />
-                        )}
-                      </ShareButton>
-                      <FullscreenButton />
-                    </>
-                  ),
-                }}
-                state={{
-                  ...whiteboardsState,
-                  ...actionsState,
-                }}
-              />
-            );
+        <WhiteboardDialog
+          entities={{
+            whiteboard: whiteboard,
           }}
-        </WhiteboardContentContainer>
+          actions={{
+            onCancel: handleCancel,
+            onUpdate: actions.onUpdate,
+            onDelete: actions.onDelete,
+            onChangeDisplayName: actions.onChangeDisplayName,
+          }}
+          options={{
+            canEdit: hasUpdateContentPrivileges,
+            canDelete: hasDeletePrivileges,
+            show: Boolean(whiteboardId),
+            dialogTitle: displayName,
+            readOnlyDisplayName: readOnlyDisplayName || !hasUpdatePrivileges,
+            fullscreen,
+            headerActions: (
+              <>
+                <ShareButton url={whiteboardShareUrl} entityTypeName="whiteboard" disabled={!whiteboardShareUrl}>
+                  {hasUpdatePrivileges && (
+                    <WhiteboardShareSettings
+                      createdBy={whiteboard?.createdBy}
+                      journeyTypeName={journeyTypeName}
+                      {...contentUpdatePolicyProvided}
+                    />
+                  )}
+                </ShareButton>
+                <FullscreenButton />
+              </>
+            ),
+          }}
+          state={{
+            ...whiteboardsState,
+            ...actionsState,
+          }}
+        />
       )}
     </WhiteboardActionsContainer>
   );

src/domain/collaboration/whiteboard/containers/WhiteboardActionsContainer.tsx

@@ -6,15 +6,23 @@ import {
   useUpdateWhiteboardMutation,
 } from '../../../../core/apollo/generated/apollo-hooks';
 import { ContainerChildProps } from '../../../../core/container/container';
-import {
-  WhiteboardDetailsFragment,
-  WhiteboardContentFragment,
-  CreateContributionOnCalloutInput,
-} from '../../../../core/apollo/generated/graphql-schema';
+import { CreateContributionOnCalloutInput } from '../../../../core/apollo/generated/graphql-schema';
 import { evictFromCache } from '../../../../core/apollo/utils/removeFromCache';
 import { WhiteboardPreviewImage, useUploadWhiteboardVisuals } from '../WhiteboardPreviewImages/WhiteboardPreviewImages';
 import { Identifiable } from '../../../../core/utils/Identifiable';
 
+interface WhiteboardWithPreviewVisuals {
+  nameID: string; // Whiteboard nameID is used to name the files uploaded as visuals
+  profile: {
+    visual?: {
+      id: string;
+    };
+    preview?: {
+      id: string;
+    };
+  };
+}
+
 export interface IWhiteboardActions {
   onCreate: (
     whiteboard: CreateContributionOnCalloutInput,
@@ -23,7 +31,7 @@ export interface IWhiteboardActions {
   onDelete: (whiteboard: Identifiable) => Promise<void>;
 
   onUpdate: (
-    whiteboard: WhiteboardContentFragment & WhiteboardDetailsFragment,
+    whiteboard: WhiteboardWithPreviewVisuals,
     previewImages?: WhiteboardPreviewImage[]
   ) => Promise<{ success: boolean; errors?: string[] }>;
 
@@ -35,7 +43,6 @@ export interface WhiteboardActionsContainerState {
   deletingWhiteboard?: boolean;
   changingWhiteboardLockState?: boolean;
   updatingWhiteboard?: boolean;
-  updatingWhiteboardContent?: boolean;
   uploadingVisuals?: boolean;
 }
 
@@ -121,10 +128,7 @@ const WhiteboardActionsContainer: FC<WhiteboardActionsContainerProps> = ({ child
   );
 
   const handleUploadWhiteboardVisuals = useCallback(
-    async (
-      whiteboard: WhiteboardContentFragment & WhiteboardDetailsFragment,
-      previewImages?: WhiteboardPreviewImage[]
-    ) => {
+    async (whiteboard: WhiteboardWithPreviewVisuals, previewImages?: WhiteboardPreviewImage[]) => {
       if ((whiteboard.profile.visual || whiteboard.profile.preview) && previewImages) {
         uploadVisuals(
           previewImages,
@@ -177,7 +181,6 @@ const WhiteboardActionsContainer: FC<WhiteboardActionsContainerProps> = ({ child
         {
           creatingWhiteboard,
           deletingWhiteboard,
-          updatingWhiteboardContent: false,
           updatingWhiteboard,
           uploadingVisuals,
         },

src/domain/common/whiteboard/excalidraw/CollaborativeExcalidrawWrapper.tsx

@@ -10,7 +10,6 @@ import { makeStyles } from '@mui/styles';
 import { debounce, merge } from 'lodash';
 import React, { PropsWithChildren, Ref, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useCombinedRefs } from '../../../shared/utils/useCombinedRefs';
-import EmptyWhiteboard from '../EmptyWhiteboard';
 import { useUserContext } from '../../../community/user';
 import { WhiteboardFilesManager } from './useWhiteboardFilesManager';
 import useCollab, { CollabAPI, CollabState } from './collab/useCollab';
@@ -28,6 +27,7 @@ import Reconnectable from '../../../../core/utils/reconnectable';
 import { useTick } from '../../../../core/utils/time/tick';
 import useWhiteboardDefaults from './useWhiteboardDefaults';
 import Loading from '../../../../core/ui/loading/Loading';
+import { Identifiable } from '../../../../core/utils/Identifiable';
 
 const FILE_IMPORT_ENABLED = false;
 const SAVE_FILE_TO_DISK = true;
@@ -73,7 +73,7 @@ const useActorWhiteboardStyles = makeStyles(theme => ({
 }));
 
 export interface WhiteboardWhiteboardEntities {
-  whiteboard: { id?: string; content: string } | undefined;
+  whiteboard: Identifiable | undefined;
   filesManager: WhiteboardFilesManager;
   lastSavedDate: Date | undefined;
 }
@@ -125,24 +125,6 @@ const CollaborativeExcalidrawWrapper = ({
 
   const [isSceneInitialized, setSceneInitialized] = useState(false);
 
-  const { addNewFile, loadFiles, pushFilesToExcalidraw } = filesManager;
-
-  const data = useMemo(() => {
-    const parsedData = whiteboard?.content ? JSON.parse(whiteboard?.content) : EmptyWhiteboard;
-    return {
-      ...parsedData,
-      ...whiteboardDefaults,
-    };
-  }, [whiteboard?.content]);
-
-  useEffect(() => {
-    loadFiles(data);
-  }, [data]);
-
-  useEffect(() => {
-    pushFilesToExcalidraw();
-  }, [filesManager]);
-
   const handleScroll = useRef(
     debounce(async () => {
       excalidrawApi?.refresh();
@@ -254,15 +236,15 @@ const CollaborativeExcalidrawWrapper = ({
           <Excalidraw
             key={whiteboard.id} // initializing a fresh Excalidraw for each whiteboard
             excalidrawAPI={handleInitializeApi}
-            initialData={data}
+            initialData={whiteboardDefaults}
             UIOptions={mergedUIOptions}
             isCollaborating={collaborating}
             viewModeEnabled={!collaborating || mode === 'read' || !isSceneInitialized}
             onChange={onChange}
             onPointerUpdate={collabApi?.onPointerUpdate}
             detectScroll={false}
             autoFocus
-            generateIdForFile={addNewFile}
+            generateIdForFile={filesManager.addNewFile}
             aiEnabled={false}
             /*renderTopRightUI={_isMobile => {
                 return <LiveCollaborationStatus />;

src/domain/common/whiteboard/excalidraw/collab/Collab.ts

@@ -183,7 +183,6 @@ class Collab {
           {
             'scene-init': async (payload: { elements: readonly ExcalidrawElement[]; files: BinaryFilesWithUrl }) => {
               if (!this.portal.socketInitialized) {
-                this.onSceneInitChange(true);
                 this.initializeRoom({ fetchScene: false });
                 this.handleRemoteSceneUpdate(
                   await this.reconcileElementsAndLoadFiles(payload.elements, payload.files),
@@ -197,6 +196,7 @@ class Collab {
                   await this.portal.broadcastScene(WS_SCENE_EVENT_TYPES.SCENE_UPDATE, [], convertedFilesWithUrl);
                 }
                 this.excalidrawAPI.zoomToFit();
+                this.onSceneInitChange(true);
               }
             },
             'client-broadcast': async (binaryData: ArrayBuffer) => {