Merge pull request #2817 from the-deep/feature/untagged-entries

Add error messages for incompatible sources and add a tag for untagged entries
the-deep · Jan 16, 2024 · 381687b · 381687b
2 parents 41430c5 + 76bf611
commit 381687b
Show file tree

Hide file tree

Showing 6 changed files with 246 additions and 176 deletions.
diff --git a/app/components/entry/EntryInput/index.tsx b/app/components/entry/EntryInput/index.tsx
@@ -17,6 +17,7 @@ import {
     List,
     Container,
     NumberOutput,
+    Tag,
 } from '@the-deep/deep-ui';
 
 import NonFieldError from '#components/NonFieldError';
@@ -84,6 +85,7 @@ interface EntryInputProps<T extends string | number | undefined> {
 
     excerptShown?: boolean;
     displayHorizontally?: boolean;
+    relevant?: boolean;
 }
 
 function EntryInput<T extends string | number | undefined>(props: EntryInputProps<T>) {
@@ -116,6 +118,7 @@ function EntryInput<T extends string | number | undefined>(props: EntryInputProp
         noPaddingInWidgetContainer = false,
         excerptShown = false,
         displayHorizontally = false,
+        relevant = true,
     } = props;
 
     const error = getErrorObject(riskyError);
@@ -198,89 +201,103 @@ function EntryInput<T extends string | number | undefined>(props: EntryInputProp
         <div
             className={_cs(
                 className,
-                compactMode && styles.compact,
-                displayHorizontally && styles.horizontal,
                 styles.entryInput,
             )}
         >
-            <NonFieldError error={error} />
-            {(!compactMode || excerptShown) && (
-                <Container
-                    className={styles.excerpt}
-                    heading={(
-                        <>
-                            {!hideEntryId && isDefined(value.id) && (
-                                <NumberOutput
-                                    className={styles.entryId}
-                                    prefix="#"
-                                    value={Number(value.id)}
-                                />
-                            )}
-                            {!hideEntryId && isNotDefined(value.id) && (
-                                <span className={styles.unsavedEntry}>(unsaved entry)</span>
-                            )}
-                        </>
-                    )}
-                    headingSize="extraSmall"
-                    headingClassName={styles.heading}
-                    headerActions={excerptHeaderActions}
-                    headerActionsContainerClassName={styles.headerActions}
-                    headingSectionClassName={styles.headingSection}
-                    contentClassName={styles.excerptContent}
+            {!relevant && (
+                <Tag
+                    variant="gradient1"
+                    className={styles.tag}
                 >
-                    <ExcerptInput
-                        className={styles.excerptInput}
-                        name="excerpt"
-                        onChange={onFieldChange}
-                        entryType={value.entryType}
-                        value={value.excerpt}
-                        // droppedExcerpt={value.droppedExcerpt}
-                        image={entryImage}
-                        imageRaw={value.imageRaw}
-                        readOnly={readOnly}
-                        // FIXME: pass this after image drag/drop is implemented
-                        leadImageUrl={undefined}
-                    />
-                </Container>
+                    Untagged Entry
+                </Tag>
             )}
-            <List
-                data={primaryTagging ?? undefined}
-                rendererParams={sectionRendererParams}
-                rendererClassName={_cs(
-                    styles.section,
-                    sectionContainerClassName,
+            <div
+                className={_cs(
+                    styles.content,
                     compactMode && styles.compact,
                     displayHorizontally && styles.horizontal,
                 )}
-                renderer={CompactSection}
-                keySelector={sectionKeySelector}
-            />
-            <CompactSection
-                className={_cs(
-                    styles.secondaryTagging,
-                    secondaryTaggingContainerClassName,
+            >
+                <NonFieldError error={error} />
+                {(!compactMode || excerptShown) && (
+                    <Container
+                        className={styles.excerpt}
+                        heading={(
+                            <>
+                                {!hideEntryId && isDefined(value.id) && (
+                                    <NumberOutput
+                                        className={styles.entryId}
+                                        prefix="#"
+                                        value={Number(value.id)}
+                                    />
+                                )}
+                                {!hideEntryId && isNotDefined(value.id) && (
+                                    <span className={styles.unsavedEntry}>(unsaved entry)</span>
+                                )}
+                            </>
+                        )}
+                        headingSize="extraSmall"
+                        headingClassName={styles.heading}
+                        headerActions={excerptHeaderActions}
+                        headerActionsContainerClassName={styles.headerActions}
+                        headingSectionClassName={styles.headingSection}
+                        contentClassName={styles.excerptContent}
+                    >
+                        <ExcerptInput
+                            className={styles.excerptInput}
+                            name="excerpt"
+                            onChange={onFieldChange}
+                            entryType={value.entryType}
+                            value={value.excerpt}
+                            // droppedExcerpt={value.droppedExcerpt}
+                            image={entryImage}
+                            imageRaw={value.imageRaw}
+                            readOnly={readOnly}
+                            // FIXME: pass this after image drag/drop is implemented
+                            leadImageUrl={undefined}
+                        />
+                    </Container>
                 )}
-                title="Secondary Tagging"
-                attributesMap={attributesMap}
-                onAttributeChange={onAttributeChange}
-                readOnly={readOnly}
-                onAddButtonClick={onAddButtonClick}
-                emptyValueHidden={emptyValueHidden}
-                widgets={secondaryTagging}
-                error={error?.attributes}
-                geoAreaOptions={geoAreaOptions}
-                onGeoAreaOptionsChange={onGeoAreaOptionsChange}
-                addButtonHidden={addButtonHidden}
-                onApplyToAll={onApplyToAll}
-                entryClientId={value.clientId}
-                allWidgets={allWidgets}
-                widgetsHints={widgetsHints}
-                recommendations={recommendations}
-                emptyMessageHidden={variant === 'nlp'}
-                suggestionMode={variant === 'nlp'}
-                rightComponent={rightComponent}
-                noPadding={noPaddingInWidgetContainer}
-            />
+                <List
+                    data={primaryTagging ?? undefined}
+                    rendererParams={sectionRendererParams}
+                    rendererClassName={_cs(
+                        styles.section,
+                        sectionContainerClassName,
+                        compactMode && styles.compact,
+                        displayHorizontally && styles.horizontal,
+                    )}
+                    renderer={CompactSection}
+                    keySelector={sectionKeySelector}
+                />
+                <CompactSection
+                    className={_cs(
+                        styles.secondaryTagging,
+                        secondaryTaggingContainerClassName,
+                    )}
+                    title="Secondary Tagging"
+                    attributesMap={attributesMap}
+                    onAttributeChange={onAttributeChange}
+                    readOnly={readOnly}
+                    onAddButtonClick={onAddButtonClick}
+                    emptyValueHidden={emptyValueHidden}
+                    widgets={secondaryTagging}
+                    error={error?.attributes}
+                    geoAreaOptions={geoAreaOptions}
+                    onGeoAreaOptionsChange={onGeoAreaOptionsChange}
+                    addButtonHidden={addButtonHidden}
+                    onApplyToAll={onApplyToAll}
+                    entryClientId={value.clientId}
+                    allWidgets={allWidgets}
+                    widgetsHints={widgetsHints}
+                    recommendations={recommendations}
+                    emptyMessageHidden={variant === 'nlp'}
+                    suggestionMode={variant === 'nlp'}
+                    rightComponent={rightComponent}
+                    noPadding={noPaddingInWidgetContainer}
+                />
+            </div>
         </div>
     );
 }

diff --git a/app/components/entry/EntryInput/styles.css b/app/components/entry/EntryInput/styles.css
@@ -1,81 +1,90 @@
 .entry-input {
     display: flex;
-    flex-shrink: 0;
-    background-color: var(--dui-color-foreground);
-    height: var(--height-entry-item);
-    overflow-y: auto;
+    flex-direction: column;
     --height-entry-item: 360px;
     --inner-width: 25%;
 
-    &.compact {
-        --height-entry-item: initial;
-        --inner-width: unset;
-        flex-direction: column;
+    .tag {
+        flex-shrink: 0;
     }
 
-    .heading-section {
-        overflow: visible;
+    .content {
+        display: flex;
+        flex-shrink: 0;
+        background-color: var(--dui-color-foreground);
+        height: var(--height-entry-item);
+        overflow-y: auto;
 
-        .heading {
-            display: flex;
-            align-items: baseline;
-            gap: var(--dui-spacing-medium);
+        &.compact {
+            --height-entry-item: initial;
+            --inner-width: unset;
+            flex-direction: column;
+        }
 
-            .entry-id {
-                color: var(--dui-color-accent);
-                font-weight: var(--dui-font-weight-bold);
-            }
+        .heading-section {
+            overflow: visible;
 
-            .unsaved-entry {
-                color: var(--dui-color-text-description);
-                font-weight: var(--dui-font-weight-light);
-                font-style: italic;
-            }
-        }
-    }
+            .heading {
+                display: flex;
+                align-items: baseline;
+                gap: var(--dui-spacing-medium);
 
-    .excerpt {
-        background-color: var(--dui-color-foreground);
-        width: var(--inner-width);
+                .entry-id {
+                    color: var(--dui-color-accent);
+                    font-weight: var(--dui-font-weight-bold);
+                }
 
-        .header-actions {
-            flex-wrap: wrap;
+                .unsaved-entry {
+                    color: var(--dui-color-text-description);
+                    font-weight: var(--dui-font-weight-light);
+                    font-style: italic;
+                }
+            }
         }
 
-        .excerpt-content {
-            display: flex;
-            flex-direction: column;
-            flex-grow: 1;
-            overflow-y: auto;
+        .excerpt {
+            background-color: var(--dui-color-foreground);
+            width: var(--inner-width);
 
-            .excerpt-input {
+            .header-actions {
+                flex-wrap: wrap;
+            }
+
+            .excerpt-content {
+                display: flex;
+                flex-direction: column;
                 flex-grow: 1;
+                overflow-y: auto;
+
+                .excerpt-input {
+                    flex-grow: 1;
+                }
             }
         }
-    }
 
-    &.horizontal {
-        flex-direction: row;
-        .excerpt {
-            width: 100%;
-            max-width: 30rem;
+        &.horizontal {
+            flex-direction: row;
+            .excerpt {
+                width: 100%;
+                max-width: 30rem;
+            }
         }
-    }
 
-    .section {
-        background-color: var(--dui-color-foreground);
-        width: var(--inner-width);
+        .section {
+            background-color: var(--dui-color-foreground);
+            width: var(--inner-width);
 
-        &.compact {
-            border-bottom: var(--dui-width-separator-thin) solid var(--dui-color-separator);
-        }
-        &.horizontal {
-            border-bottom: unset;
+            &.compact {
+                border-bottom: var(--dui-width-separator-thin) solid var(--dui-color-separator);
+            }
+            &.horizontal {
+                border-bottom: unset;
+            }
         }
-    }
 
-    .secondary-tagging {
-        background-color: var(--dui-color-foreground);
-        width: var(--inner-width);
+        .secondary-tagging {
+            background-color: var(--dui-color-foreground);
+            width: var(--inner-width);
+        }
     }
 }
diff --git a/app/views/EntryEdit/LeftPane/AssistItem/AssistPopup/index.tsx b/app/views/EntryEdit/LeftPane/AssistItem/AssistPopup/index.tsx
@@ -44,6 +44,8 @@ interface Props<NAME extends string | number | undefined> {
     displayHorizontally?: boolean;
 
     footerActions: React.ReactNode;
+
+    relevant?: boolean;
 }
 
 function AssistPopup<NAME extends string | number | undefined>(props: Props<NAME>) {
@@ -67,6 +69,7 @@ function AssistPopup<NAME extends string | number | undefined>(props: Props<NAME
         excerptShown = false,
         displayHorizontally = false,
         footerActions,
+        relevant = true,
     } = props;
 
     const allWidgets = useMemo(() => {
@@ -137,6 +140,7 @@ function AssistPopup<NAME extends string | number | undefined>(props: Props<NAME
                     variant={variant}
                     excerptShown={excerptShown}
                     displayHorizontally={displayHorizontally}
+                    relevant={relevant}
                 />
             )}
         </Container>