Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix attachment issue #2976

Merged
merged 2 commits into from
Aug 30, 2024
Merged

Fix attachment issue #2976

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21d9c13
Fix attachment issue
barshathakuri Jul 30, 2024
e7a55c1
Fix lead attachment images issue with entries are not saved in review…
barshathakuri Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 8 additions & 23 deletions app/components/LeftPaneEntries/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ interface Props {
entries: EntryInput[] | undefined | null;
activeEntry?: string;
onEntryClick?: (entryId: string) => void;
onAttachmentClick?: (attachment: LeadPreviewAttachmentType) => void;
onExcerptChange?: (entryClientId: string, newExcerpt: string | undefined) => void;
onEntryDelete?: (entryClientId: string) => void;
onEntryRestore?: (entryClientId: string) => void;
Expand All @@ -165,6 +166,7 @@ interface Props {
projectId: string | undefined;
defaultTab?: 'entries' | 'simplified' | 'original' | 'visuals';
frameworkDetails?: Framework;
leadAttachmentsMap?: LeadAttachmentsMap;
activeTabRef?: React.MutableRefObject<{
setActiveTab: React.Dispatch<React.SetStateAction<TabOptions>>;
} | null>;
Expand All @@ -175,7 +177,7 @@ interface Props {

const MAX_ITEMS_PER_PAGE = 10;

function LeftPane(props: Props) {
function LeftPaneEntries(props: Props) {
const {
className,
onEntryCreate,
Expand All @@ -201,6 +203,8 @@ function LeftPane(props: Props) {
frameworkDetails,
onAssistedEntryAdd,
entryAttachmentsMap,
leadAttachmentsMap,
onAttachmentClick,
} = props;

const alert = useAlert();
Expand Down Expand Up @@ -232,8 +236,6 @@ function LeftPane(props: Props) {
: defaultTab,
);

const [leadAttachmentsMap, setLeadAttachmentsMap] = useState<LeadAttachmentsMap>({});

const [
autoEntriesModalShown,
showAutoEntriesModal,
Expand Down Expand Up @@ -396,23 +398,6 @@ function LeftPane(props: Props) {
}
}, [leadId, onEntryCreate]);

const handleAttachmentClick = useCallback((attachment: LeadPreviewAttachmentType) => {
if (onEntryCreate) {
onEntryCreate({
clientId: randomString(),
entryType: 'ATTACHMENT',
lead: leadId,
leadAttachment: attachment.id,
excerpt: '',
droppedExcerpt: '',
});
setLeadAttachmentsMap((oldValue) => ({
...oldValue,
[attachment.id]: attachment,
}));
}
}, [leadId, onEntryCreate]);

Comment on lines -399 to -415
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason we're handling this in 'EntryEdit' and not here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@subinasr By adding handleAttachmentClick to the LeftPane Entries, the leadId is utilized in both the secondary and review tabs. Moving it to entryEdit makes the leadId accessible across all tabs, which explains why the image was only visible in the primary tab previously.

const handleExcerptAddFromOriginal = useCallback((selectedText: string | undefined) => {
if (onEntryCreate) {
onEntryCreate({
Expand Down Expand Up @@ -506,12 +491,12 @@ function LeftPane(props: Props) {

return ({
type: 'visual-item' as const,
onClick: handleAttachmentClick,
onClick: onAttachmentClick,
disableClick: isEntrySelectionActive,
attachment,
});
}, [
handleAttachmentClick,
onAttachmentClick,
onApproveButtonClick,
onDiscardButtonClick,
isEntrySelectionActive,
Expand Down Expand Up @@ -1010,4 +995,4 @@ function LeftPane(props: Props) {
);
}

export default LeftPane;
export default LeftPaneEntries;
11 changes: 8 additions & 3 deletions app/components/entry/EntryInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import NonFieldError from '#components/NonFieldError';
import {
WidgetType as WidgetRaw,
AnalysisFrameworkDetailType,
EntryType,
LeadPreviewAttachmentType,
} from '#generated/types';

// FIXME: move this component
Expand Down Expand Up @@ -85,7 +85,8 @@ interface EntryInputProps<T extends string | number | undefined> {
rightComponent?: React.ReactNode;
noPaddingInWidgetContainer?: boolean;

entryAttachment: EntryType['entryAttachment'] | undefined;
entryAttachment: Entry['entryAttachment'] | undefined;
leadAttachment?: LeadPreviewAttachmentType;

excerptShown?: boolean;
displayHorizontally?: boolean;
Expand Down Expand Up @@ -124,6 +125,7 @@ function EntryInput<T extends string | number | undefined>(props: EntryInputProp
displayHorizontally = false,
relevant = true,
entryAttachment,
leadAttachment,
} = props;

const error = getErrorObject(riskyError);
Expand Down Expand Up @@ -257,9 +259,12 @@ function EntryInput<T extends string | number | undefined>(props: EntryInputProp
value={value.excerpt}
// droppedExcerpt={value.droppedExcerpt}
image={entryImage}
imageRaw={value.imageRaw}
imageRaw={
value.imageRaw ?? leadAttachment?.filePreview?.url ?? undefined
}
readOnly={readOnly}
entryAttachment={entryAttachment}
leadAttachment={leadAttachment}
/>
</Container>
)}
Expand Down
41 changes: 37 additions & 4 deletions app/views/EntryEdit/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ import {
BulkUpdateEntriesMutationVariables,
LeadUpdateMutation,
LeadUpdateMutationVariables,
LeadPreviewForTextQuery,
LeadPreviewAttachmentType,
} from '#generated/types';
import { BasicOrganization } from '#components/selections/NewOrganizationSelectInput';
import { BasicProjectUser } from '#components/selections/ProjectUserSelectInput';
Expand All @@ -86,7 +88,7 @@ import usePromptOnCloseAndRefresh from '#hooks/usePromptOnCloseAndRefresh';
import EntryCommentWrapper from '#components/entryReview/EntryCommentWrapper';
import getSchema, { defaultFormValues, PartialEntryType, PartialFormType } from '#components/entry/schema';
import { Entry, EntryInput as EntryInputType, Framework } from '#components/entry/types';
import LeftPane, { TabOptions } from '#components/LeftPaneEntries';
import LeftPaneEntries, { TabOptions } from '#components/LeftPaneEntries';
import { createDefaultAttributes } from '#components/LeftPaneEntries/utils';
import {
PROJECT_FRAMEWORK,
Expand All @@ -112,6 +114,9 @@ const UPDATE_LEN = 100;
const entryKeySelector = (e: PartialEntryType) => e.clientId;
export type Lead = NonNullable<NonNullable<LeadEntriesQuery['project']>['lead']>;

type LeadAttachment = NonNullable<NonNullable<NonNullable<LeadPreviewForTextQuery['project']>['leadPreviewAttachments']>['results']>[number];
export type LeadAttachmentsMap = { [key: string]: LeadAttachment | undefined };

function transformEntry(entry: Entry): EntryInputType {
// FIXME: make this re-usable
return removeNull({
Expand Down Expand Up @@ -368,6 +373,8 @@ function EntryEdit(props: Props) {
setEntryAttachmentMap,
] = useState<EntryAttachmentsMap | undefined>();

const [leadAttachmentsMap, setLeadAttachmentsMap] = useState<LeadAttachmentsMap>({});

const [
updateLead,
{ loading: leadUpdatePending },
Expand Down Expand Up @@ -1041,6 +1048,23 @@ function EntryEdit(props: Props) {
[onEntryFieldChange, clearRestorePoint],
);

const handleAttachmentClick = useCallback((attachment: LeadPreviewAttachmentType) => {
if (handleEntryCreate) {
handleEntryCreate({
clientId: randomString(),
entryType: 'ATTACHMENT',
lead: leadId,
leadAttachment: attachment.id,
excerpt: '',
droppedExcerpt: '',
});
setLeadAttachmentsMap((oldValue) => ({
...oldValue,
[attachment.id]: attachment,
}));
}
}, [leadId, handleEntryCreate]);

// NOTE: we are creating a map of index and value because we are iterating
// over widgets but modifying attributes
const attributesMap = useMemo(() => (
Expand Down Expand Up @@ -1380,7 +1404,6 @@ function EntryEdit(props: Props) {
secondaryTagging: frameworkDetails?.secondaryTagging,
onAddButtonClick: handleAddButtonClick,
primaryTagging: frameworkDetails?.primaryTagging,
entryAttachment: isDefined(datum.id) ? entryAttachmentsMap?.[datum.id] : undefined,
excerptHeaderActions: datum.id && projectId && (
<>
<EntryVerification
Expand Down Expand Up @@ -1426,6 +1449,10 @@ function EntryEdit(props: Props) {
),
disabled: !!selectedEntry,
entryImage: datum?.image ? entryImagesMap?.[datum.image] : undefined,
entryAttachment: entryAttachmentsMap?.[entryId],
leadAttachment: datum.leadAttachment
? leadAttachmentsMap?.[datum.leadAttachment]
: undefined,
error: entriesError?.[entryId],
geoAreaOptions,
onGeoAreaOptionsChange: setGeoAreaOptions,
Expand All @@ -1450,6 +1477,7 @@ function EntryEdit(props: Props) {
selectedEntry,
entriesError,
handleApplyToAll,
leadAttachmentsMap,
],
);

Expand Down Expand Up @@ -1625,7 +1653,7 @@ function EntryEdit(props: Props) {
retainMount="eager"
>
<div className={styles.primaryTagging}>
<LeftPane
<LeftPaneEntries
className={styles.sourcePreview}
projectId={projectId}
entries={formValue.entries}
Expand All @@ -1639,6 +1667,9 @@ function EntryEdit(props: Props) {
onEntryDelete={handleEntryDelete}
onEntryRestore={handleEntryRestore}
onExcerptChange={handleExcerptChange}
// NOTE: These 2 are for handling attachment/images/tables
onAttachmentClick={handleAttachmentClick}
leadAttachmentsMap={leadAttachmentsMap}
lead={lead}
leadId={leadId}
listComponentRef={primaryPageListComponentRef}
Expand Down Expand Up @@ -1714,7 +1745,7 @@ function EntryEdit(props: Props) {
retainMount="eager"
>
<div className={styles.secondaryTagging}>
<LeftPane
<LeftPaneEntries
className={styles.sourcePreview}
onAssistedEntryAdd={handleAssistedEntryAdd}
projectId={projectId}
Expand All @@ -1739,6 +1770,8 @@ function EntryEdit(props: Props) {
entriesError={entriesErrorStateMap}
activeTabRef={secondaryPageLeftPaneRef}
frameworkDetails={frameworkDetails ?? undefined}
onAttachmentClick={handleAttachmentClick}
leadAttachmentsMap={leadAttachmentsMap}
/>
<Container
className={styles.rightContainer}
Expand Down
Loading