[ENG-9728] Collection fixes (#818)

* fix(styles): fixed styles

* fix(collections): fixed status for collection

Author: nsemets

src/app/features/metadata/components/metadata-collection-item/metadata-collection-item.component.html

@@ -16,9 +16,10 @@
   }
 </div>
 
-<div>
-  @let status = submission().reviewsState;
-  <p-tag class="capitalize" [value]="status" [severity]="status | collectionStatusSeverity"></p-tag>
+<div class="mt-2">
+  @let status = submission().reviewsState | collectionStatusSeverity;
+
+  <p-tag class="capitalize" [value]="status.label | translate" [severity]="status.value"></p-tag>
 </div>
 
 @if (showAttributes()) {

src/app/features/project/overview/components/overview-collections/overview-collections.component.html

@@ -22,9 +22,9 @@ <h3 class="mb-2">{{ 'project.overview.metadata.collection' | translate }}</h3>
                     [label]="submission.collectionTitle"
                   ></p-button>
 
-                  @let status = submission.reviewsState;
+                  @let status = submission.reviewsState | collectionStatusSeverity;
 
-                  <p-tag class="capitalize" [value]="status" [severity]="status | collectionStatusSeverity"></p-tag>
+                  <p-tag class="capitalize" [value]="status.label | translate" [severity]="status.value"></p-tag>
                 </div>
               </p-accordion-header>
 

src/app/features/project/overview/project-overview.component.html

@@ -23,7 +23,7 @@
     </div>
   }
 
-  <div class="flex flex-column gap-4 bg-white h-full p-3 sm:p-4 lg:flex-row">
+  <div class="flex flex-column gap-4 bg-white h-full p-3 sm:p-4">
     @if (isCollectionsRoute()) {
       <p-button
         link
@@ -48,42 +48,44 @@
       <osf-view-only-link-message />
     }
 
-    <div class="flex flex-column gap-4 flex-order-2 lg:flex-order-1 lg:w-8">
-      @if (isWikiEnabled()) {
-        <osf-overview-wiki [resourceId]="currentProject()!.id" [canEdit]="hasWriteAccess()" />
-      }
-
-      <osf-files-widget
-        [rootOption]="filesRootOption()"
-        [components]="components()"
-        [areComponentsLoading]="areComponentsLoading()"
-      />
+    <div class="flex flex-column gap-4 lg:flex-row">
+      <div class="flex flex-column gap-4 flex-order-2 lg:flex-order-1 lg:w-8">
+        @if (isWikiEnabled()) {
+          <osf-overview-wiki [resourceId]="currentProject()!.id" [canEdit]="hasWriteAccess()" />
+        }
 
-      @if (parentProject()) {
-        <osf-overview-parent-project
-          [project]="parentProject()!"
-          [isLoading]="isParentProjectLoading()"
-          [anonymous]="isAnonymous()"
+        <osf-files-widget
+          [rootOption]="filesRootOption()"
+          [components]="components()"
+          [areComponentsLoading]="areComponentsLoading()"
         />
-      }
 
-      <osf-project-components [canEdit]="hasWriteAccess()" [anonymous]="isAnonymous()" />
+        @if (parentProject()) {
+          <osf-overview-parent-project
+            [project]="parentProject()!"
+            [isLoading]="isParentProjectLoading()"
+            [anonymous]="isAnonymous()"
+          />
+        }
 
-      @if (!hasViewOnly()) {
-        <osf-linked-resources [canEdit]="hasWriteAccess()" />
-      }
+        <osf-project-components [canEdit]="hasWriteAccess()" [anonymous]="isAnonymous()" />
 
-      @if (configuredCitationAddons().length) {
-        @for (addon of configuredCitationAddons(); track addon.id) {
-          <osf-citation-addon-card [addon]="addon" />
+        @if (!hasViewOnly()) {
+          <osf-linked-resources [canEdit]="hasWriteAccess()" />
         }
-      }
 
-      <osf-project-recent-activity [projectId]="projectId()" />
-    </div>
+        @if (configuredCitationAddons().length) {
+          @for (addon of configuredCitationAddons(); track addon.id) {
+            <osf-citation-addon-card [addon]="addon" />
+          }
+        }
+
+        <osf-project-recent-activity [projectId]="projectId()" />
+      </div>
 
-    <div class="flex flex-column right-section p-4 flex-order-1 lg:flex-order-2 lg:w-4">
-      <osf-project-overview-metadata />
+      <div class="flex flex-column right-section p-4 flex-order-1 lg:flex-order-2 lg:w-4">
+        <osf-project-overview-metadata />
+      </div>
     </div>
   </div>
 } @else {

src/app/features/registry/pages/registration-recent-activity/registration-recent-activity.component.html

@@ -1,4 +1,4 @@
-<div class="flex flex-column gap-3 border-1 surface-border border-round-xl m-4 p-3">
+<div class="flex flex-column gap-3 bg-white border-1 surface-border border-round-xl m-4 p-3">
   <h2 class="mb-2 px-3 pt-3" data-test="recent-activity-title">
     {{ 'project.overview.recentActivity.title' | translate }}
   </h2>

src/app/shared/helpers/collection-submission-status.util.ts

@@ -1,11 +1,18 @@
 import { CollectionSubmissionReviewState } from '@osf/shared/enums/collection-submission-review-state.enum';
 
+import { CustomOption } from '../models/select-option.model';
 import { SeverityType } from '../models/severity.type';
 
-export const COLLECTION_SUBMISSION_STATUS_SEVERITY: Record<CollectionSubmissionReviewState, SeverityType> = {
-  [CollectionSubmissionReviewState.Accepted]: 'success',
-  [CollectionSubmissionReviewState.Rejected]: 'danger',
-  [CollectionSubmissionReviewState.Pending]: 'warn',
-  [CollectionSubmissionReviewState.InProgress]: 'warn',
-  [CollectionSubmissionReviewState.Removed]: 'secondary',
+export const COLLECTION_SUBMISSION_STATUS_SEVERITY: Record<
+  CollectionSubmissionReviewState,
+  CustomOption<SeverityType>
+> = {
+  [CollectionSubmissionReviewState.Accepted]: { label: 'moderation.submissionReviewStatus.approved', value: 'success' },
+  [CollectionSubmissionReviewState.Rejected]: { label: 'moderation.submissionReviewStatus.rejected', value: 'danger' },
+  [CollectionSubmissionReviewState.Pending]: { label: 'moderation.submissionReviewStatus.pending', value: 'warn' },
+  [CollectionSubmissionReviewState.InProgress]: {
+    label: 'moderation.submissionReviewStatus.inProgress',
+    value: 'warn',
+  },
+  [CollectionSubmissionReviewState.Removed]: { label: 'moderation.submissionReviewStatus.removed', value: 'secondary' },
 };

src/app/shared/pipes/collection-status-severity.pipe.ts

@@ -2,13 +2,14 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import { CollectionSubmissionReviewState } from '../enums/collection-submission-review-state.enum';
 import { COLLECTION_SUBMISSION_STATUS_SEVERITY } from '../helpers/collection-submission-status.util';
+import { CustomOption } from '../models/select-option.model';
 import { SeverityType } from '../models/severity.type';
 
 @Pipe({
   name: 'collectionStatusSeverity',
 })
 export class CollectionStatusSeverityPipe implements PipeTransform {
-  transform(status: CollectionSubmissionReviewState): SeverityType {
+  transform(status: CollectionSubmissionReviewState): CustomOption<SeverityType> {
     return COLLECTION_SUBMISSION_STATUS_SEVERITY[status];
   }
 }

src/assets/i18n/en.json

@@ -1468,7 +1468,8 @@
       "pendingUpdates": "Pending Updates",
       "pendingWithdrawal": "Pending Withdrawal",
       "approved": "Approved",
-      "declined": "Declined"
+      "declined": "Declined",
+      "inProgress": "In Progress"
     },
     "makeDecision": {
       "header": "Make decision",