Fix entry attachment in all neighbouring components

- Fix styling for the added tab 'Tables and Visuals'
the-deep · Jun 27, 2024 · 41f01fb · 41f01fb
1 parent 0e7eb06
commit 41f01fb
Show file tree

Hide file tree

Showing 23 changed files with 315 additions and 472 deletions.
diff --git a/app/components/LeftPaneEntries/AssistItem/AssistPopup/index.tsx b/app/components/LeftPaneEntries/AssistItem/AssistPopup/index.tsx
@@ -141,6 +141,9 @@ function AssistPopup<NAME extends string | number | undefined>(props: Props<NAME
                     excerptShown={excerptShown}
                     displayHorizontally={displayHorizontally}
                     relevant={relevant}
+                    // NOTE: Setting this as undefined as AssistPopup is only
+                    // used in textual entries
+                    entryAttachment={undefined}
                 />
             )}
         </Container>

diff --git a/app/components/LeftPaneEntries/AssistItem/index.tsx b/app/components/LeftPaneEntries/AssistItem/index.tsx
@@ -750,6 +750,8 @@ function AssistItem(props: Props) {
                             }
                             predictionsErrored={!!fetchErrors || !!createErrors || isErrored}
                             messageText={messageText}
+                            // NOTE: Setting this as undefined as this
+                            // component is only used for textual entries
                             footerActions={(
                                 <>
                                     <QuickActionButton

diff --git a/app/components/LeftPaneEntries/EntryItem/index.tsx b/app/components/LeftPaneEntries/EntryItem/index.tsx
@@ -6,7 +6,7 @@ import {
     IoArrowUndoSharp,
     IoTrashBinOutline,
 } from 'react-icons/io5';
-import { BsDownload, BsFileDiff } from 'react-icons/bs';
+import { BsFileDiff } from 'react-icons/bs';
 import { requiredStringCondition } from '@togglecorp/toggle-form';
 import { _cs, isDefined } from '@togglecorp/fujs';
 import {
@@ -20,7 +20,6 @@ import {
     Heading,
     useInputState,
     Button,
-    QuickActionLink,
 } from '@the-deep/deep-ui';
 
 import ExcerptInput from '#components/entry/ExcerptInput';
@@ -85,7 +84,10 @@ export function ExcerptModal(props: ExcerptModalProps) {
     );
 }
 
-interface EntryItemProps extends EntryInput {
+export interface EntryItemProps extends Pick<
+    EntryInput,
+    'droppedExcerpt' | 'excerpt' | 'entryType' | 'deleted' | 'stale'
+> {
     entryId: string;
     isActive?: boolean;
     onClick?: (entryId: string) => void;
@@ -103,8 +105,8 @@ interface EntryItemProps extends EntryInput {
     projectId: string | undefined;
     entryServerId: string | undefined;
     draftEntry?: string;
-    leadAttachmentImage?: LeadPreviewAttachmentType;
-    entryAttachment?: Entry['entryAttachment'] | undefined | null;
+    leadAttachment?: LeadPreviewAttachmentType;
+    entryAttachment?: Entry['entryAttachment'];
 }
 
 function EntryItem(props: EntryItemProps) {
@@ -131,7 +133,7 @@ function EntryItem(props: EntryItemProps) {
         deleted,
         errored,
         stale,
-        leadAttachmentImage,
+        leadAttachment,
         entryAttachment,
     } = props;
 
@@ -184,7 +186,7 @@ function EntryItem(props: EntryItemProps) {
                         <ExcerptInput
                             value={excerpt}
                             image={entryImage}
-                            imageRaw={leadAttachmentImage?.filePreview?.url ?? ''}
+                            imageRaw={leadAttachment?.filePreview?.url ?? ''}
                             entryAttachment={entryAttachment}
                             entryType={entryType}
                             readOnly
@@ -316,26 +318,16 @@ function EntryItem(props: EntryItemProps) {
                 onClick={handleClick}
                 role="presentation"
             >
-                <Container
-                    headerActions={leadAttachmentImage?.file?.url && (
-                        <QuickActionLink
-                            title="Open external"
-                            to={leadAttachmentImage.file.url}
-                        >
-                            <BsDownload />
-                        </QuickActionLink>
-                    )}
-                >
-                    <ExcerptInput
-                        value={excerpt}
-                        // droppedExcerpt={droppedExcerpt}
-                        image={entryImage}
-                        imageRaw={leadAttachmentImage?.filePreview?.url ?? undefined}
-                        entryType={entryType}
-                        entryAttachment={entryAttachment}
-                        readOnly
-                    />
-                </Container>
+                <ExcerptInput
+                    value={excerpt}
+                    // droppedExcerpt={droppedExcerpt}
+                    image={entryImage}
+                    imageRaw={leadAttachment?.filePreview?.url ?? undefined}
+                    entryType={entryType}
+                    entryAttachment={entryAttachment}
+                    leadAttachment={leadAttachment}
+                    readOnly
+                />
             </div>
             <div className={styles.verticalBorder} />
         </Container>

diff --git a/app/components/LeftPaneEntries/SimplifiedTextView/index.tsx b/app/components/LeftPaneEntries/SimplifiedTextView/index.tsx
@@ -241,10 +241,11 @@ function SimplifiedTextView(props: Props) {
                         {split.type === 'entry' ? (
                             <EntryItem
                                 className={styles.entry}
-                                clientId={split.clientId}
+                                // clientId={split.clientId}
                                 entryServerId={split.entryServerId}
                                 projectId={projectId}
-                                lead={split.lead}
+                                // lead={split.lead}
+                                // FIXME: Why do we nee two different props for the same entry id
                                 entryId={split.clientId}
                                 onClick={onExcerptClick}
                                 disableClick={disableExcerptClick}