fix(severity): updated severity for different components

Author: nsemets

src/app/features/preprints/components/preprint-details/status-banner/status-banner.component.html

@@ -1,4 +1,4 @@
-<p-message styleClass="w-full" [severity]="severity()">
+<p-message styleClass="w-full" [severity]="messageSeverity()">
   <ng-template #container>
     <div class="banner-container w-full flex flex-row gap-2 align-items-start font-bold text-base">
       <osf-icon class="pt-1" [iconClass]="'fas fa-' + iconClass()" />
@@ -7,8 +7,8 @@
         @if (!isWithdrawn()) {
           {{ status() | translate | titlecase }}: {{ bannerContent() }}
 
-          <div>
-            @if (reviewerComment() && !provider().reviewsCommentsPrivate && !isPendingWithdrawal()) {
+          @if (reviewerComment() && !provider().reviewsCommentsPrivate && !isPendingWithdrawal()) {
+            <div>
               <p-button
                 class="cursor-pointer"
                 [link]="true"
@@ -19,11 +19,11 @@
               <p-dialog
                 [header]="'preprints.details.statusBanner.moderatorFeedback' | translate"
                 [modal]="true"
-                draggable="false"
+                [draggable]="false"
                 [(visible)]="feedbackDialogVisible"
               >
-                <div class="flex flex-column gap-2 align-items-start">
-                  <p-tag [severity]="severity()"> {{ status() | translate | titlecase }}</p-tag>
+                <div class="flex flex-column gap-4 align-items-start font-normal">
+                  <p-tag [severity]="tagSeverity()"> {{ status() | translate | titlecase }}</p-tag>
 
                   <p>{{ reviewerComment() }}</p>
 
@@ -36,8 +36,8 @@
                   </div>
                 </div>
               </p-dialog>
-            }
-          </div>
+            </div>
+          }
         } @else {
           {{ bannerContent() }}
         }

src/app/features/preprints/components/preprint-details/status-banner/status-banner.component.ts

@@ -18,6 +18,8 @@ import {
   statusMessageByWorkflow,
   statusSeverityByState,
   statusSeverityByWorkflow,
+  tagStatusSeverityByState,
+  tagStatusSeverityByWorkflow,
 } from '@osf/features/preprints/constants';
 import { ProviderReviewsWorkflow, ReviewsState } from '@osf/features/preprints/enums';
 import { PreprintProviderDetails, PreprintRequestAction } from '@osf/features/preprints/models';
@@ -57,7 +59,7 @@ export class StatusBannerComponent {
     return this.preprint()?.reviewsState ?? ReviewsState.Pending;
   });
 
-  severity = computed(() => {
+  messageSeverity = computed(() => {
     const currentState = this.currentState();
     const workflow = this.provider()?.reviewsWorkflow;
 
@@ -72,6 +74,21 @@ export class StatusBannerComponent {
     return statusSeverityByState[currentState];
   });
 
+  tagSeverity = computed(() => {
+    const currentState = this.currentState();
+    const workflow = this.provider()?.reviewsWorkflow;
+
+    if (this.isWithdrawn()) {
+      return tagStatusSeverityByState[ReviewsState.Withdrawn];
+    }
+
+    if (currentState === ReviewsState.Pending && workflow) {
+      return tagStatusSeverityByWorkflow[workflow];
+    }
+
+    return tagStatusSeverityByState[currentState];
+  });
+
   status = computed(() => statusLabelKeyByState[this.currentState()]!);
   iconClass = computed(() => statusIconByState[this.currentState()]);
 

src/app/features/preprints/constants/status-banner.const.ts

@@ -1,6 +1,6 @@
-import { ProviderReviewsWorkflow, ReviewsState } from '../enums';
+import { MessageSeverityType, TagSeverityType } from '@osf/shared/models/severity.type';
 
-export type StatusSeverity = 'warn' | 'secondary' | 'success' | 'error';
+import { ProviderReviewsWorkflow, ReviewsState } from '../enums';
 
 export const statusLabelKeyByState: Partial<Record<ReviewsState, string>> = {
   [ReviewsState.Pending]: 'preprints.details.statusBanner.pending',
@@ -33,12 +33,12 @@ export const statusMessageByState: Partial<Record<ReviewsState, string>> = {
   [ReviewsState.Withdrawn]: 'preprints.details.statusBanner.messages.withdrawn',
 };
 
-export const statusSeverityByWorkflow: Record<ProviderReviewsWorkflow, StatusSeverity> = {
+export const statusSeverityByWorkflow: Record<ProviderReviewsWorkflow, MessageSeverityType> = {
   [ProviderReviewsWorkflow.PreModeration]: 'warn',
   [ProviderReviewsWorkflow.PostModeration]: 'secondary',
 };
 
-export const statusSeverityByState: Partial<Record<ReviewsState, StatusSeverity>> = {
+export const statusSeverityByState: Partial<Record<ReviewsState, MessageSeverityType>> = {
   [ReviewsState.Accepted]: 'success',
   [ReviewsState.Rejected]: 'error',
   [ReviewsState.PendingWithdrawal]: 'error',
@@ -47,6 +47,20 @@ export const statusSeverityByState: Partial<Record<ReviewsState, StatusSeverity>
   [ReviewsState.Pending]: 'warn',
 };
 
+export const tagStatusSeverityByWorkflow: Record<ProviderReviewsWorkflow, TagSeverityType> = {
+  [ProviderReviewsWorkflow.PreModeration]: 'warn',
+  [ProviderReviewsWorkflow.PostModeration]: 'secondary',
+};
+
+export const tagStatusSeverityByState: Partial<Record<ReviewsState, TagSeverityType>> = {
+  [ReviewsState.Accepted]: 'success',
+  [ReviewsState.Rejected]: 'danger',
+  [ReviewsState.PendingWithdrawal]: 'danger',
+  [ReviewsState.WithdrawalRejected]: 'danger',
+  [ReviewsState.Withdrawn]: 'warn',
+  [ReviewsState.Pending]: 'warn',
+};
+
 type ActivityMap = Partial<Record<ReviewsState, string>>;
 
 export const recentActivityMessageByState: ActivityMap & {

src/app/shared/components/copy-button/copy-button.component.ts

@@ -1,13 +1,12 @@
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { Button } from 'primeng/button';
+import { Button, ButtonSeverity } from 'primeng/button';
 import { Tooltip } from 'primeng/tooltip';
 
 import { Clipboard } from '@angular/cdk/clipboard';
 import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 
 import { ToastService } from '@osf/shared/services/toast.service';
-import { SeverityType } from '@shared/models/severity.type';
 
 @Component({
   selector: 'osf-copy-button',
@@ -20,7 +19,7 @@ export class CopyButtonComponent {
   copyItem = input<string>('');
   tooltip = input<string>('common.buttons.copy');
   label = input<string>('');
-  severity = input<SeverityType>('contrast');
+  severity = input<ButtonSeverity>('contrast');
   ariaLabel = input<string>('common.accessibility.copyButtonInfo');
 
   private readonly clipboard = inject(Clipboard);

src/app/shared/components/status-badge/status-badge.component.ts

@@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 import { RegistryStatusMap } from '@osf/shared/constants/registration-statuses';
 import { RegistryStatus } from '@osf/shared/enums/registry-status.enum';
-import { SeverityType } from '@shared/models/severity.type';
+import { TagSeverityType } from '@osf/shared/models/severity.type';
 
 @Component({
   selector: 'osf-status-badge',
@@ -22,7 +22,7 @@ export class StatusBadgeComponent {
     return RegistryStatusMap[this.status()]?.label ?? 'Unknown';
   }
 
-  get severity(): SeverityType | null {
+  get severity(): TagSeverityType | null {
     return RegistryStatusMap[this.status()]?.severity ?? null;
   }
 }

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

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

src/app/shared/models/severity.type.ts

@@ -1,11 +1,2 @@
-export type SeverityType =
-  | 'success'
-  | 'info'
-  | 'warn'
-  | 'danger'
-  | 'help'
-  | 'primary'
-  | 'secondary'
-  | 'contrast'
-  | null
-  | undefined;
+export type TagSeverityType = 'success' | 'secondary' | 'info' | 'warn' | 'danger' | 'contrast' | undefined | null;
+export type MessageSeverityType = 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined | null;

src/app/shared/models/status-info.model.ts

@@ -1,6 +1,6 @@
-import { SeverityType } from './severity.type';
+import { TagSeverityType } from './severity.type';
 
 export interface StatusInfo {
   label: string;
-  severity: SeverityType | null;
+  severity: TagSeverityType | null;
 }

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

@@ -3,13 +3,13 @@ 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';
+import { TagSeverityType } from '../models/severity.type';
 
 @Pipe({
   name: 'collectionStatusSeverity',
 })
 export class CollectionStatusSeverityPipe implements PipeTransform {
-  transform(status: CollectionSubmissionReviewState): CustomOption<SeverityType> {
+  transform(status: CollectionSubmissionReviewState): CustomOption<TagSeverityType> {
     return COLLECTION_SUBMISSION_STATUS_SEVERITY[status];
   }
 }