feat: dataset metadata drawer updates (#1819)

* dataset metadata drawer updates

* show minus icon when showing all

Author: codemonkey800

frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx

@@ -1,4 +1,5 @@
-import { Icon } from '@czi-sds/components'
+import { Button, Icon } from '@czi-sds/components'
+import { type ReactNode, useState } from 'react'
 
 import { AccordionMetadataTable } from 'app/components/AccordionMetadataTable'
 import { AuthorLegend } from 'app/components/AuthorLegend'
@@ -11,6 +12,29 @@ import { Dataset } from 'app/types/gql/genericTypes'
 import { isDefined } from 'app/utils/nullish'
 import { getTableData } from 'app/utils/table'
 
+function DatasetDescription({ children }: { children: ReactNode }) {
+  const [showAll, setShowAll] = useState(false)
+  const { t } = useI18n()
+
+  return (
+    <>
+      <span className={showAll ? '' : 'text-ellipsis line-clamp-3'}>
+        {children}
+      </span>
+
+      <Button
+        startIcon={<Icon sdsIcon={showAll ? 'Minus' : 'Plus'} sdsSize="xs" />}
+        sdsStyle="minimal"
+        onClick={() => setShowAll((prev) => !prev)}
+      >
+        <span className="text-light-sds-color-primitive-blue-500">
+          {t(showAll ? 'showLess' : 'showMore')}
+        </span>
+      </Button>
+    </>
+  )
+}
+
 export function DatasetMetadataTable({
   dataset,
   showAllFields,
@@ -52,37 +76,55 @@ export function DatasetMetadataTable({
       values: [dataset.id ? `${IdPrefix.Dataset}-${dataset.id}` : '--'],
     },
 
-    !!showAllFields && {
+    {
+      label: authors.length === 1 ? t('author') : t('authors'),
+      labelExtra: <AuthorLegend inline />,
+      renderValue: () => {
+        return <AuthorList authors={authors} large vertical />
+      },
+      values: [],
+      className: 'leading-sds-body-s',
+    },
+
+    {
+      label: t('publications'),
+      values: [dataset.datasetPublications ?? ''],
+      renderValue: (value: string) => {
+        return <DatabaseEntryList entries={value} />
+      },
+    },
+
+    {
+      label: t('relatedDatabases'),
+      values: [dataset.relatedDatabaseEntries ?? ''],
+      renderValue: (value: string) => {
+        return <DatabaseEntryList entries={value} />
+      },
+    },
+
+    {
       label: t('description'),
       values: [dataset.description ?? ''],
-      className: 'text-ellipsis line-clamp-3',
+      renderValue: (value: string) => {
+        return <DatasetDescription>{value}</DatasetDescription>
+      },
     },
 
     {
       label: t('depositionDate'),
       values: [dataset.depositionDate?.split('T')[0] ?? ''],
     },
 
-    !!showAllFields && {
+    {
       label: t('releaseDate'),
       values: [dataset.releaseDate?.split('T')[0] ?? ''],
     },
 
-    !!showAllFields && {
+    {
       label: t('lastModifiedDate'),
       values: [dataset.lastModifiedDate?.split('T')[0] ?? ''],
     },
 
-    !!showAllFields && {
-      label: authors.length === 1 ? t('author') : t('authors'),
-      labelExtra: <AuthorLegend inline />,
-      renderValue: () => {
-        return <AuthorList authors={authors} large vertical />
-      },
-      values: [],
-      className: 'leading-sds-body-s',
-    },
-
     {
       label: t('grantID'),
       values: Array.from(
@@ -104,22 +146,6 @@ export function DatasetMetadataTable({
         ),
       ),
     },
-
-    {
-      label: t('relatedDatabases'),
-      values: [dataset.relatedDatabaseEntries ?? ''],
-      renderValue: (value: string) => {
-        return <DatabaseEntryList entries={value} />
-      },
-    },
-
-    !!showAllFields && {
-      label: t('publications'),
-      values: [dataset.relatedDatabaseEntries ?? ''],
-      renderValue: (value: string) => {
-        return <DatabaseEntryList entries={value} />
-      },
-    },
   )
 
   return (