From 61f1d38f971943b223fbd6c14bd0e547eeb0ff9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Thu, 7 Nov 2024 10:07:25 -0300 Subject: [PATCH 01/52] chore: upgrade js-dataverse version --- package-lock.json | 9 +++++---- package.json | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index d737851d5..589226652 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.0", "dependencies": { "@faker-js/faker": "7.6.0", - "@iqss/dataverse-client-javascript": "npm:@IQSS/dataverse-client-javascript@^2.0.0-alpha.4", + "@iqss/dataverse-client-javascript": "2.0.0-alpha.5", "@iqss/dataverse-design-system": "*", "@istanbuljs/nyc-config-typescript": "1.0.2", "@tanstack/react-table": "8.9.2", @@ -3674,9 +3674,10 @@ }, "node_modules/@iqss/dataverse-client-javascript": { "name": "@IQSS/dataverse-client-javascript", - "version": "2.0.0-alpha.4", - "resolved": "https://npm.pkg.github.com/download/@IQSS/dataverse-client-javascript/2.0.0-alpha.4/10ab7e0ed2a31a09b1b32d27521b96f84ef50f4f", - "integrity": "sha512-SJdkBIks+yjJxEVw8G7sf4YY2Bujl+8vOD+fZqt2qhIGmyPSlj9ld0APnYyoVX6lI8lGsREHZzYYjzeAmYfxhw==", + "version": "2.0.0-alpha.5", + "resolved": "https://npm.pkg.github.com/download/@IQSS/dataverse-client-javascript/2.0.0-alpha.5/3807c4c9cc60a7d40ed617fb1e28e902d1fa8d66", + "integrity": "sha512-stMSjx7m0Sy+Vxwls1ehClUJ1oV6YgT5Yt2GhGWH3zHlghs1+msoU5mFQKdxHNKWuv8uTTapPgA+EdaMoqcEXw==", + "license": "MIT", "dependencies": { "@types/node": "^18.15.11", "@types/turndown": "^5.0.1", diff --git a/package.json b/package.json index db411a652..d656980a7 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "7.6.0", - "@iqss/dataverse-client-javascript": "2.0.0-alpha.4", + "@iqss/dataverse-client-javascript": "2.0.0-alpha.5", "@iqss/dataverse-design-system": "*", "@istanbuljs/nyc-config-typescript": "1.0.2", "@tanstack/react-table": "8.9.2", From ada39ff0ae33d2d1d81563ae0a3e2c5cbed5c83b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Thu, 7 Nov 2024 13:37:16 -0300 Subject: [PATCH 02/52] 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 {children} +interface DropdownHeaderProps { + className?: string + children: React.ReactNode +} + +export function DropdownHeader({ className, children }: DropdownHeaderProps) { + return {children} } 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 @@ -71,12 +76,17 @@ export function Collection({ {t('publishedAlert')} )} - {!collection.isReleased && canUserPublishCollection && ( + {(showPublishButton || showEditButton) && (
- + + {showPublishButton && ( + + )} + {showEditButton && } +
)} 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 ( + }> + +
+ +
+
+

+ {collection.name}{' '} + {collection.affiliation ? ({collection.affiliation}) : null} +

+

{collection.id}

+
+ + + + {t('editCollection.generalInfo')} + + + ) +} From aa9a5755b04a9d953081d53d5e3cac1722cf4312 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Thu, 7 Nov 2024 15:08:50 -0300 Subject: [PATCH 03/52] feat: navigation --- src/router/routes.tsx | 16 +++++++++++ src/sections/Route.enum.ts | 5 +++- .../EditCollectionDropdown.tsx | 3 ++- .../EditCollectionGeneralInfo.tsx | 20 ++++++++++++++ .../EditCollectionGeneralInfoFactory.tsx | 27 +++++++++++++++++++ 5 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 src/sections/edit-collection-general-info/EditCollectionGeneralInfo.tsx create mode 100644 src/sections/edit-collection-general-info/EditCollectionGeneralInfoFactory.tsx diff --git a/src/router/routes.tsx b/src/router/routes.tsx index 462fe480c..dc8eeebd1 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -38,6 +38,14 @@ const CreateCollectionPage = lazy(() => ) ) +const EditCollectionGeneralInfoPage = lazy(() => + import('../sections/edit-collection-general-info/EditCollectionGeneralInfoFactory').then( + ({ EditCollectionGeneralInfoFactory }) => ({ + default: () => EditCollectionGeneralInfoFactory.create() + }) + ) +) + const CreateDatasetPage = lazy(() => import('../sections/create-dataset/CreateDatasetFactory').then(({ CreateDatasetFactory }) => ({ default: () => CreateDatasetFactory.create() @@ -130,6 +138,14 @@ export const routes: RouteObject[] = [ ), errorElement: }, + { + path: Route.EDIT_COLLECTION_GENERAL_INFO, + element: ( + }> + + + ) + }, { path: Route.CREATE_DATASET, element: ( diff --git a/src/sections/Route.enum.ts b/src/sections/Route.enum.ts index 93a88ee49..24629470c 100644 --- a/src/sections/Route.enum.ts +++ b/src/sections/Route.enum.ts @@ -11,6 +11,7 @@ export enum Route { COLLECTIONS_BASE = '/collections', COLLECTIONS = '/collections/:collectionId', CREATE_COLLECTION = '/collections/:ownerCollectionId/create', + EDIT_COLLECTION_GENERAL_INFO = '/collections/:collectionId/edit-general-info', ACCOUNT = '/account' } @@ -18,7 +19,9 @@ export const RouteWithParams = { COLLECTIONS: (collectionId?: string) => collectionId ? `/collections/${collectionId}` : Route.COLLECTIONS_BASE, CREATE_COLLECTION: (ownerCollectionId: string) => `/collections/${ownerCollectionId}/create`, - CREATE_DATASET: (collectionId: string) => `/datasets/${collectionId}/create` + CREATE_DATASET: (collectionId: string) => `/datasets/${collectionId}/create`, + EDIT_COLLECTION_GENERAL_INFO: (collectionId: string) => + `/collections/${collectionId}/edit-general-info` } export enum QueryParamKey { diff --git a/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx b/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx index f63a280f7..7ad64d289 100644 --- a/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx +++ b/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx @@ -10,6 +10,7 @@ import { } from '@iqss/dataverse-design-system' import { PencilFill } from 'react-bootstrap-icons' import { Collection } from '@/collection/domain/models/Collection' +import { RouteWithParams } from '@/sections/Route.enum' import styles from './EditCollectionDropdown.module.scss' interface EditCollectionDropdownProps { @@ -21,7 +22,7 @@ export const EditCollectionDropdown = ({ collection }: EditCollectionDropdownPro const navigate = useNavigate() const onClickEditGeneralInformation = () => { - navigate('edit-general-information') + navigate(RouteWithParams.EDIT_COLLECTION_GENERAL_INFO(collection.id)) } console.log(collection) diff --git a/src/sections/edit-collection-general-info/EditCollectionGeneralInfo.tsx b/src/sections/edit-collection-general-info/EditCollectionGeneralInfo.tsx new file mode 100644 index 000000000..f6a4dd00e --- /dev/null +++ b/src/sections/edit-collection-general-info/EditCollectionGeneralInfo.tsx @@ -0,0 +1,20 @@ +import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository' +import { MetadataBlockInfoRepository } from '@/metadata-block-info/domain/repositories/MetadataBlockInfoRepository' + +interface EditCollectionGeneralInfoProps { + collectionId: string + collectionRepository: CollectionRepository + metadataBlockInfoRepository: MetadataBlockInfoRepository +} + +export const EditCollectionGeneralInfo = ({ + collectionId, + collectionRepository, + metadataBlockInfoRepository +}: EditCollectionGeneralInfoProps) => { + return ( +
+

Edit collection general info

+
+ ) +} diff --git a/src/sections/edit-collection-general-info/EditCollectionGeneralInfoFactory.tsx b/src/sections/edit-collection-general-info/EditCollectionGeneralInfoFactory.tsx new file mode 100644 index 000000000..3a7851e64 --- /dev/null +++ b/src/sections/edit-collection-general-info/EditCollectionGeneralInfoFactory.tsx @@ -0,0 +1,27 @@ +import { ReactElement } from 'react' +import { useParams } from 'react-router-dom' +import { CollectionJSDataverseRepository } from '@/collection/infrastructure/repositories/CollectionJSDataverseRepository' +import { MetadataBlockInfoJSDataverseRepository } from '@/metadata-block-info/infrastructure/repositories/MetadataBlockInfoJSDataverseRepository' +import { EditCollectionGeneralInfo } from './EditCollectionGeneralInfo' + +const collectionRepository = new CollectionJSDataverseRepository() +const metadataBlockInfoRepository = new MetadataBlockInfoJSDataverseRepository() + +export class EditCollectionGeneralInfoFactory { + static create(): ReactElement { + return + } +} + +function EditCollectionGeneralInfoWithParams() { + const { collectionId } = useParams<{ collectionId: string }>() as { + collectionId: string + } + return ( + + ) +} From aef90f1efe7b4271ed1a6026caf4ad2a555fc6a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Thu, 7 Nov 2024 16:09:08 -0300 Subject: [PATCH 04/52] feat: infra and domain --- .../locales/en/editCollectionGeneralInfo.json | 4 ++ .../repositories/CollectionRepository.ts | 1 + .../useCases/editCollectionGeneralInfo.ts | 15 +++++++ .../CollectionJSDataverseRepository.ts | 7 ++- .../EditCollectionGeneralInfo.tsx | 43 +++++++++++++++++++ .../CollectionLoadingMockRepository.ts | 7 ++- .../collection/CollectionMockRepository.ts | 8 ++++ 7 files changed, 83 insertions(+), 2 deletions(-) create mode 100644 public/locales/en/editCollectionGeneralInfo.json create mode 100644 src/collection/domain/useCases/editCollectionGeneralInfo.ts diff --git a/public/locales/en/editCollectionGeneralInfo.json b/public/locales/en/editCollectionGeneralInfo.json new file mode 100644 index 000000000..bc1ae1fd1 --- /dev/null +++ b/public/locales/en/editCollectionGeneralInfo.json @@ -0,0 +1,4 @@ +{ + "pageTitle": "Edit Collection General Information", + "notAllowedToEditCollection": "You do not have permissions to edit a collection within this collection." +} diff --git a/src/collection/domain/repositories/CollectionRepository.ts b/src/collection/domain/repositories/CollectionRepository.ts index d4a8567a4..3e2cb35b8 100644 --- a/src/collection/domain/repositories/CollectionRepository.ts +++ b/src/collection/domain/repositories/CollectionRepository.ts @@ -17,4 +17,5 @@ export interface CollectionRepository { paginationInfo: CollectionItemsPaginationInfo, searchCriteria?: CollectionSearchCriteria ): Promise + editGeneralInfo(collectionIdOrAlias: string, updatedCollection: CollectionDTO): Promise } diff --git a/src/collection/domain/useCases/editCollectionGeneralInfo.ts b/src/collection/domain/useCases/editCollectionGeneralInfo.ts new file mode 100644 index 000000000..a3228657d --- /dev/null +++ b/src/collection/domain/useCases/editCollectionGeneralInfo.ts @@ -0,0 +1,15 @@ +import { WriteError } from '@iqss/dataverse-client-javascript' +import { CollectionRepository } from '../repositories/CollectionRepository' +import { CollectionDTO } from './DTOs/CollectionDTO' + +export async function editCollectionGeneralInfo( + collectionRepository: CollectionRepository, + collectionId: string, + updatedCollection: CollectionDTO +): Promise { + return collectionRepository + .editGeneralInfo(collectionId, updatedCollection) + .catch((error: WriteError) => { + throw error + }) +} diff --git a/src/collection/infrastructure/repositories/CollectionJSDataverseRepository.ts b/src/collection/infrastructure/repositories/CollectionJSDataverseRepository.ts index 996b6750a..b5b27ae9e 100644 --- a/src/collection/infrastructure/repositories/CollectionJSDataverseRepository.ts +++ b/src/collection/infrastructure/repositories/CollectionJSDataverseRepository.ts @@ -6,7 +6,8 @@ import { getCollectionFacets, getCollectionUserPermissions, getCollectionItems, - publishCollection + publishCollection, + updateCollection } from '@iqss/dataverse-client-javascript' import { JSCollectionMapper } from '../mappers/JSCollectionMapper' import { CollectionDTO } from '../../domain/useCases/DTOs/CollectionDTO' @@ -61,4 +62,8 @@ export class CollectionJSDataverseRepository implements CollectionRepository { publish(collectionIdOrAlias: number | string): Promise { return publishCollection.execute(collectionIdOrAlias) } + + editGeneralInfo(collectionIdOrAlias: string, updatedCollection: CollectionDTO): Promise { + return updateCollection.execute(collectionIdOrAlias, updatedCollection) + } } diff --git a/src/sections/edit-collection-general-info/EditCollectionGeneralInfo.tsx b/src/sections/edit-collection-general-info/EditCollectionGeneralInfo.tsx index f6a4dd00e..55f8bab44 100644 --- a/src/sections/edit-collection-general-info/EditCollectionGeneralInfo.tsx +++ b/src/sections/edit-collection-general-info/EditCollectionGeneralInfo.tsx @@ -1,5 +1,12 @@ +import { useTranslation } from 'react-i18next' +import { Alert } from '@iqss/dataverse-design-system' import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository' import { MetadataBlockInfoRepository } from '@/metadata-block-info/domain/repositories/MetadataBlockInfoRepository' +import { useGetCollectionUserPermissions } from '@/shared/hooks/useGetCollectionUserPermissions' +import { useLoading } from '../loading/LoadingContext' +import { useSession } from '../session/SessionContext' +import { useCollection } from '../collection/useCollection' +import { PageNotFound } from '../page-not-found/PageNotFound' interface EditCollectionGeneralInfoProps { collectionId: string @@ -7,11 +14,47 @@ interface EditCollectionGeneralInfoProps { metadataBlockInfoRepository: MetadataBlockInfoRepository } +// TODO:ME - Move collection form to a shared component and make everything work again after, tests stories etc. +// TODO:ME - Integrated shared form here. + export const EditCollectionGeneralInfo = ({ collectionId, collectionRepository, metadataBlockInfoRepository }: EditCollectionGeneralInfoProps) => { + const { t } = useTranslation('editCollectionGeneralInfo') + const { isLoading, setIsLoading } = useLoading() + const { user } = useSession() + + const { collection, isLoading: isLoadingCollection } = useCollection( + collectionRepository, + collectionId + ) + + const { + collectionUserPermissions, + isLoading: isLoadingCollectionUserPermissions, + error: collectionPermissionsError + } = useGetCollectionUserPermissions({ + collectionIdOrAlias: collectionId, + collectionRepository: collectionRepository + }) + const canUserEditCollection = Boolean(collectionUserPermissions?.canEditCollection) + + if (!isLoadingCollection && !collection) { + return + } + + if (collectionUserPermissions && !canUserEditCollection) { + return ( +
+ + {t('notAllowedToEditCollection')} + +
+ ) + } + return (

Edit collection general info

diff --git a/src/stories/collection/CollectionLoadingMockRepository.ts b/src/stories/collection/CollectionLoadingMockRepository.ts index 71e63e09e..8705f6842 100644 --- a/src/stories/collection/CollectionLoadingMockRepository.ts +++ b/src/stories/collection/CollectionLoadingMockRepository.ts @@ -1,10 +1,11 @@ -import { CollectionDTO, CollectionUserPermissions } from '@iqss/dataverse-client-javascript' +import { CollectionUserPermissions } from '@iqss/dataverse-client-javascript' import { Collection } from '../../collection/domain/models/Collection' import { CollectionMockRepository } from './CollectionMockRepository' import { CollectionFacet } from '../../collection/domain/models/CollectionFacet' import { CollectionItemsPaginationInfo } from '@/collection/domain/models/CollectionItemsPaginationInfo' import { CollectionItemSubset } from '@/collection/domain/models/CollectionItemSubset' import { CollectionSearchCriteria } from '@/collection/domain/models/CollectionSearchCriteria' +import { CollectionDTO } from '@/collection/domain/useCases/DTOs/CollectionDTO' export class CollectionLoadingMockRepository extends CollectionMockRepository { getById(_id?: string): Promise { @@ -26,4 +27,8 @@ export class CollectionLoadingMockRepository extends CollectionMockRepository { ): Promise { return new Promise(() => {}) } + + editGeneralInfo(_collectionIdOrAlias: string, _updatedCollection: CollectionDTO): Promise { + return new Promise(() => {}) + } } diff --git a/src/stories/collection/CollectionMockRepository.ts b/src/stories/collection/CollectionMockRepository.ts index efb2e116a..435252959 100644 --- a/src/stories/collection/CollectionMockRepository.ts +++ b/src/stories/collection/CollectionMockRepository.ts @@ -84,4 +84,12 @@ export class CollectionMockRepository implements CollectionRepository { }, FakerHelper.loadingTimout()) }) } + + editGeneralInfo(_collectionIdOrAlias: string, _updatedCollection: CollectionDTO): Promise { + return new Promise((resolve) => { + setTimeout(() => { + resolve() + }, FakerHelper.loadingTimout()) + }) + } } From d69359c12f7c01530f0b1beb7e1dc11fa63b85ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Fri, 8 Nov 2024 09:18:05 -0300 Subject: [PATCH 05/52] feat: dropdown css tweaks --- .../EditCollectionDropdown.module.scss | 8 ++++++++ .../edit-collection-dropdown/EditCollectionDropdown.tsx | 2 -- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.module.scss b/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.module.scss index e046a74a2..64eef7e61 100644 --- a/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.module.scss +++ b/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.module.scss @@ -9,11 +9,19 @@ display: flex; gap: 12px; align-items: center; + min-width: 250px; color: unset; + white-space: wrap; + + @media screen and (min-width: 768px) { + min-width: 350px; + white-space: nowrap; + } .collection-alias, .collection-name { margin: 0; + font-size: 14px; } .collection-name { diff --git a/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx b/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx index 7ad64d289..50048dab7 100644 --- a/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx +++ b/src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx @@ -25,8 +25,6 @@ export const EditCollectionDropdown = ({ collection }: EditCollectionDropdownPro navigate(RouteWithParams.EDIT_COLLECTION_GENERAL_INFO(collection.id)) } - console.log(collection) - return ( Date: Fri, 8 Nov 2024 17:08:16 -0300 Subject: [PATCH 06/52] feat: edit/create collection form reusable --- public/locales/en/createCollection.json | 79 ------- .../locales/en/editCollectionGeneralInfo.json | 2 +- public/locales/en/shared.json | 81 +++++++ src/sections/Route.enum.ts | 4 +- .../create-collection/CreateCollection.tsx | 170 ++------------- .../CreateCollectionFactory.tsx | 8 +- .../CreateCollectionSkeleton.tsx | 70 +------ .../EditCollectionGeneralInfo.tsx | 54 ++++- .../EditCollectionSkeleton.tsx | 19 ++ .../CollectionFormHelper.ts | 14 +- .../EditCreateCollectionForm.tsx | 198 ++++++++++++++++++ .../EditCreateCollectionFormSkeleton.tsx | 75 +++++++ .../CollectionForm.module.scss | 0 .../collection-form/CollectionForm.tsx | 88 ++------ .../BrowseSearchFacetsSection.module.scss | 0 .../BrowseSearchFacetsSection.tsx | 7 +- .../FacetsFromParentCheckbox.tsx | 3 +- .../MetadataFieldsSection.tsx | 4 +- .../ConfirmResetModificationsModal.tsx | 2 +- .../FieldsFromParentCheckbox.tsx | 23 +- .../MetadataInputLevelFieldsBlock.tsx | 9 +- .../input-levels-table/InputLevelFieldRow.tsx | 10 +- .../InputLevelsTable.module.scss | 0 .../input-levels-table/InputLevelsTable.tsx | 2 +- .../RequiredOptionalRadios.tsx | 5 +- .../top-fields-section/ContactsField.tsx | 2 +- .../top-fields-section/DescriptionField.tsx | 0 .../top-fields-section/IdentifierField.tsx | 0 .../TopFieldsSection.module.scss | 0 .../top-fields-section/TopFieldsSection.tsx | 8 +- .../collection-form/useSubmitCollection.ts | 40 ++-- .../form/EditCreateCollectionForm/types.ts | 68 ++++++ .../useGetAllFacetableMetadataFields.ts | 6 +- .../hooks}/useGetAllMetadataBlocksInfo.tsx | 8 +- .../hooks}/useGetCollectionFacets.tsx | 6 +- .../useGetCollectionMetadataBlocksInfo.tsx | 6 +- .../CreateCollection.stories.tsx | 8 +- .../create-collection/CollectionForm.spec.tsx | 83 +++++--- .../CreateCollection.spec.tsx | 14 +- 39 files changed, 676 insertions(+), 500 deletions(-) create mode 100644 src/sections/edit-collection-general-info/EditCollectionSkeleton.tsx rename src/sections/{create-collection/collection-form => shared/form/EditCreateCollectionForm}/CollectionFormHelper.ts (96%) create mode 100644 src/sections/shared/form/EditCreateCollectionForm/EditCreateCollectionForm.tsx create mode 100644 src/sections/shared/form/EditCreateCollectionForm/EditCreateCollectionFormSkeleton.tsx rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/CollectionForm.module.scss (100%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/CollectionForm.tsx (65%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/browse-search-facets-section/BrowseSearchFacetsSection.module.scss (100%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/browse-search-facets-section/BrowseSearchFacetsSection.tsx (94%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/browse-search-facets-section/FacetsFromParentCheckbox.tsx (92%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/metadata-fields-section/MetadataFieldsSection.tsx (92%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/metadata-fields-section/fields-from-parent-checkbox/ConfirmResetModificationsModal.tsx (100%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/metadata-fields-section/fields-from-parent-checkbox/FieldsFromParentCheckbox.tsx (81%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/metadata-fields-section/metadata-input-level-fields-block/MetadataInputLevelFieldsBlock.tsx (96%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/metadata-fields-section/metadata-input-level-fields-block/input-levels-table/InputLevelFieldRow.tsx (96%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/metadata-fields-section/metadata-input-level-fields-block/input-levels-table/InputLevelsTable.module.scss (100%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/metadata-fields-section/metadata-input-level-fields-block/input-levels-table/InputLevelsTable.tsx (91%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/metadata-fields-section/metadata-input-level-fields-block/input-levels-table/RequiredOptionalRadios.tsx (95%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/top-fields-section/ContactsField.tsx (96%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/top-fields-section/DescriptionField.tsx (100%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/top-fields-section/IdentifierField.tsx (100%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/top-fields-section/TopFieldsSection.module.scss (100%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/top-fields-section/TopFieldsSection.tsx (97%) rename src/sections/{create-collection => shared/form/EditCreateCollectionForm}/collection-form/useSubmitCollection.ts (67%) create mode 100644 src/sections/shared/form/EditCreateCollectionForm/types.ts rename src/{sections/create-collection => shared/hooks}/useGetAllFacetableMetadataFields.ts (81%) rename src/{sections/create-collection => shared/hooks}/useGetAllMetadataBlocksInfo.tsx (77%) rename src/{sections/create-collection => shared/hooks}/useGetCollectionFacets.tsx (83%) rename src/{sections/create-collection => shared/hooks}/useGetCollectionMetadataBlocksInfo.tsx (80%) diff --git a/public/locales/en/createCollection.json b/public/locales/en/createCollection.json index a1f126e15..256e46149 100644 --- a/public/locales/en/createCollection.json +++ b/public/locales/en/createCollection.json @@ -1,83 +1,4 @@ { "pageTitle": "Create Collection", - "fields": { - "hostCollection": { - "label": "Host Collection", - "description": "The collection which contains this data.", - "required": "Host Collection is required" - }, - "name": { - "label": "Collection Name", - "description": "The project, department, university, professor, or journal this collection will contain data for.", - "required": "Collection Name is required" - }, - "affiliation": { - "label": "Affiliation", - "description": "The organization with which this collection is affiliated." - }, - "alias": { - "label": "Identifier", - "description": "Short name used for the URL of this collection.", - "required": "Identifier is required", - "invalid": { - "format": "Identifier is not valid. Valid characters are a-Z, 0-9, '_', and '-'.", - "maxLength": "Identifier must be at most {{maxLength}} characters." - }, - "suggestion": "Psst... try this" - }, - "storage": { - "label": "Storage", - "description": "A storage service to be used for datasets in this collection." - }, - "type": { - "label": "Category", - "description": "The type that most closely reflects this collection.", - "required": "Category is required" - }, - "description": { - "label": "Description", - "description": "A summary describing the purpose, nature or scope of this collection.", - "subLabel": "This field supports only certain HTML tags.", - "htmlAllowedTags": ", ,
,
, , ,
,
,
, ,
,

-

, , , ,
  • ,
      ,

      , 

      , , , , , , ,