From ada39ff0ae33d2d1d81563ae0a3e2c5cbed5c83b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= <gersaracca@gmail.com>
Date: Thu, 7 Nov 2024 13:37:16 -0300
Subject: [PATCH] feat: dropdown ready

---
 .../dropdown-header/DropdownHeader.tsx        | 10 ++--
 public/locales/en/collection.json             |  6 ++-
 src/sections/collection/Collection.tsx        | 26 ++++++---
 .../EditCollectionDropdown.module.scss        | 42 +++++++++++++++
 .../EditCollectionDropdown.tsx                | 54 +++++++++++++++++++
 5 files changed, 126 insertions(+), 12 deletions(-)
 create mode 100644 src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.module.scss
 create mode 100644 src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx

diff --git a/packages/design-system/src/lib/components/dropdown-button/dropdown-header/DropdownHeader.tsx b/packages/design-system/src/lib/components/dropdown-button/dropdown-header/DropdownHeader.tsx
index 08478786d..9adf516ed 100644
--- a/packages/design-system/src/lib/components/dropdown-button/dropdown-header/DropdownHeader.tsx
+++ b/packages/design-system/src/lib/components/dropdown-button/dropdown-header/DropdownHeader.tsx
@@ -1,6 +1,10 @@
-import { PropsWithChildren } from 'react'
 import { Dropdown } from 'react-bootstrap'
 
-export function DropdownHeader({ children }: PropsWithChildren) {
-  return <Dropdown.Header>{children}</Dropdown.Header>
+interface DropdownHeaderProps {
+  className?: string
+  children: React.ReactNode
+}
+
+export function DropdownHeader({ className, children }: DropdownHeaderProps) {
+  return <Dropdown.Header className={className}>{children}</Dropdown.Header>
 }
diff --git a/public/locales/en/collection.json b/public/locales/en/collection.json
index f950adb7f..f319f3baf 100644
--- a/public/locales/en/collection.json
+++ b/public/locales/en/collection.json
@@ -30,5 +30,9 @@
     "question": "Are you sure you want to publish your collection? Once you do so it must remain published.",
     "error": "There was an error publishing your collection."
   },
-  "publishedAlert": "Your collection is now public."
+  "publishedAlert": "Your collection is now public.",
+  "editCollection": {
+    "edit": "Edit",
+    "generalInfo": "General Information"
+  }
 }
diff --git a/src/sections/collection/Collection.tsx b/src/sections/collection/Collection.tsx
index f90964f0b..835e0a722 100644
--- a/src/sections/collection/Collection.tsx
+++ b/src/sections/collection/Collection.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next'
-import { Alert, Col, Row } from '@iqss/dataverse-design-system'
+import { Alert, ButtonGroup, Col, Row } from '@iqss/dataverse-design-system'
+
 import { CollectionRepository } from '../../collection/domain/repositories/CollectionRepository'
 import { useCollection } from './useCollection'
 import { useScrollTop } from '../../shared/hooks/useScrollTop'
@@ -14,6 +15,7 @@ import { CollectionSkeleton } from './CollectionSkeleton'
 import { PageNotFound } from '../page-not-found/PageNotFound'
 import { CreatedAlert } from './CreatedAlert'
 import { PublishCollectionButton } from './publish-collection/PublishCollectionButton'
+import { EditCollectionDropdown } from './edit-collection-dropdown/EditCollectionDropdown'
 import styles from './Collection.module.scss'
 
 interface CollectionProps {
@@ -33,6 +35,7 @@ export function Collection({
   collectionQueryParams
 }: CollectionProps) {
   useTranslation('collection')
+  const { t } = useTranslation('collection')
   useScrollTop()
   const { user } = useSession()
   const { collection, isLoading } = useCollection(
@@ -46,11 +49,13 @@ export function Collection({
   })
 
   const canUserAddCollection = Boolean(collectionUserPermissions?.canAddCollection)
+  const canUserEditCollection = Boolean(collectionUserPermissions?.canEditCollection)
   const canUserAddDataset = Boolean(collectionUserPermissions?.canAddDataset)
-  const canUserPublishCollection = user && Boolean(collectionUserPermissions?.canPublishCollection)
+  const canUserPublishCollection = Boolean(collectionUserPermissions?.canPublishCollection)
 
   const showAddDataActions = Boolean(user && (canUserAddCollection || canUserAddDataset))
-  const { t } = useTranslation('collection')
+  const showPublishButton = user && !collection?.isReleased && canUserPublishCollection
+  const showEditButton = user && canUserEditCollection
 
   if (!isLoading && !collection) {
     return <PageNotFound />
@@ -71,12 +76,17 @@ export function Collection({
                 {t('publishedAlert')}
               </Alert>
             )}
-            {!collection.isReleased && canUserPublishCollection && (
+            {(showPublishButton || showEditButton) && (
               <div className={styles['action-buttons']}>
-                <PublishCollectionButton
-                  repository={collectionRepository}
-                  collectionId={collection.id}
-                />
+                <ButtonGroup>
+                  {showPublishButton && (
+                    <PublishCollectionButton
+                      repository={collectionRepository}
+                      collectionId={collection.id}
+                    />
+                  )}
+                  {showEditButton && <EditCollectionDropdown collection={collection} />}
+                </ButtonGroup>
               </div>
             )}
 
diff --git a/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.module.scss b/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.module.scss
new file mode 100644
index 000000000..e046a74a2
--- /dev/null
+++ b/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.module.scss
@@ -0,0 +1,42 @@
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+
+.dropdown-icon {
+  margin-right: 0.3rem;
+  margin-bottom: 0.2rem;
+}
+
+.dropdown-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  color: unset;
+
+  .collection-alias,
+  .collection-name {
+    margin: 0;
+  }
+
+  .collection-name {
+    font-weight: 600;
+
+    span {
+      color: $dv-subtext-color;
+      font-weight: 400;
+    }
+  }
+
+  .collection-alias {
+    color: $dv-subtext-color;
+  }
+
+  .collection-icon {
+    height: fit-content;
+    color: $dv-collection-border-color;
+
+    > span {
+      margin-right: 0;
+      font-size: 40px;
+      line-height: 1;
+    }
+  }
+}
diff --git a/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx b/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx
new file mode 100644
index 000000000..f63a280f7
--- /dev/null
+++ b/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx
@@ -0,0 +1,54 @@
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import {
+  DropdownButton,
+  DropdownButtonItem,
+  DropdownHeader,
+  DropdownSeparator,
+  Icon,
+  IconName
+} from '@iqss/dataverse-design-system'
+import { PencilFill } from 'react-bootstrap-icons'
+import { Collection } from '@/collection/domain/models/Collection'
+import styles from './EditCollectionDropdown.module.scss'
+
+interface EditCollectionDropdownProps {
+  collection: Collection
+}
+
+export const EditCollectionDropdown = ({ collection }: EditCollectionDropdownProps) => {
+  const { t } = useTranslation('collection')
+  const navigate = useNavigate()
+
+  const onClickEditGeneralInformation = () => {
+    navigate('edit-general-information')
+  }
+
+  console.log(collection)
+
+  return (
+    <DropdownButton
+      id="edit-collection-dropdown"
+      title={t('editCollection.edit')}
+      asButtonGroup
+      variant="secondary"
+      icon={<PencilFill className={styles['dropdown-icon']} />}>
+      <DropdownHeader className={styles['dropdown-header']}>
+        <div className={styles['collection-icon']}>
+          <Icon name={IconName.COLLECTION} />
+        </div>
+        <div>
+          <p className={styles['collection-name']}>
+            {collection.name}{' '}
+            {collection.affiliation ? <span>({collection.affiliation})</span> : null}
+          </p>
+          <p className={styles['collection-alias']}>{collection.id}</p>
+        </div>
+      </DropdownHeader>
+      <DropdownSeparator />
+      <DropdownButtonItem onClick={onClickEditGeneralInformation}>
+        {t('editCollection.generalInfo')}
+      </DropdownButtonItem>
+    </DropdownButton>
+  )
+}