Fix/519 token bugs (#296)

* fix(menu): added new items

* fix(menu): updated naming

* fix(menu): changed overview to discover and replaced some icons

* fix(menu): added margin

* fix(menu): fixed links to discover

* fix(preprints): fixed routes

* fix(icons): updated menu icons

* fix(icons): removed fantastic icons package

* fix(icons): removed unused svg icons

* fix(icons): updated icons and image across app

* fix(sign-up): added message for sign-up error

* fix(tokens): fixed bugs

* fix(project-settings): fixed region and affiliations

* fix(settings): fixed redirect url

* fix(settings): updated notifications and removed comments

* fix(project-settings): fixed notifications and wiki settings

Author: nsemets

src/app/features/preprints/components/stepper/review-step/review-step.component.html

@@ -28,7 +28,13 @@ <h3>
         }}
       </h3>
       <div class="flex flex-row gap-2 align-items-center">
-        <img [src]="provider()?.squareColorNoTransparentImageUrl" alt="Provider logo" height="36" width="36" />
+        <img
+          class="fit-contain"
+          [src]="provider()?.squareColorNoTransparentImageUrl"
+          alt="Provider logo"
+          height="36"
+          width="36"
+        />
         <p>{{ provider()?.name }}</p>
       </div>
     </section>

src/app/features/project/project.routes.ts

@@ -15,7 +15,6 @@ import {
 import { ActivityLogsState } from '@osf/shared/stores/activity-logs';
 
 import { CollectionsModerationState } from '../moderation/store/collections-moderation';
-import { NotificationSubscriptionState } from '../settings/notifications/store';
 
 import { AnalyticsState } from './analytics/store';
 import { SettingsState } from './settings/store';
@@ -63,7 +62,7 @@ export const projectRoutes: Routes = [
       {
         path: 'settings',
         loadComponent: () => import('../project/settings/settings.component').then((mod) => mod.SettingsComponent),
-        providers: [provideStates([SettingsState, ViewOnlyLinkState, NotificationSubscriptionState])],
+        providers: [provideStates([SettingsState, ViewOnlyLinkState])],
       },
       {
         path: 'contributors',

src/app/features/project/settings/components/index.ts

@@ -1,7 +1,7 @@
 export { ProjectDetailSettingAccordionComponent } from './project-detail-setting-accordion/project-detail-setting-accordion.component';
 export { ProjectSettingNotificationsComponent } from './project-setting-notifications/project-setting-notifications.component';
 export { SettingsAccessRequestsCardComponent } from './settings-access-requests-card/settings-access-requests-card.component';
-export { SettingsCommentingCardComponent } from './settings-commenting-card/settings-commenting-card.component';
+export { SettingsProjectAffiliationComponent } from './settings-project-affiliation/settings-project-affiliation.component';
 export { SettingsProjectFormCardComponent } from './settings-project-form-card/settings-project-form-card.component';
 export { SettingsRedirectLinkComponent } from './settings-redirect-link/settings-redirect-link.component';
 export { SettingsStorageLocationCardComponent } from './settings-storage-location-card/settings-storage-location-card.component';

src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.html

@@ -1,12 +1,12 @@
 <div
-  class="flex justify-between align-items-center mb-2 w-full border-bottom-1 border-gray-300 gap-2 flex-column sm:flex-row sm:gap-4"
+  class="flex justify-content-between align-items-center mb-2 w-full border-bottom-1 border-gray-300 gap-2 flex-column sm:flex-row sm:gap-4"
 >
   <div class="flex align-items-center gap-2 cursor-pointer w-full sm:w-5">
     <p-button
       [icon]="expanded() ? 'fas fa-minus' : 'fas fa-plus'"
       variant="text"
       severity="contrast"
-      (click)="toggle()"
+      (onClick)="toggle()"
     ></p-button>
 
     <span class="font-medium text-color">{{ title() }}</span>
@@ -22,32 +22,21 @@
             </span>
           }
 
-          <p-select
-            class="accordion-dropdown"
+          <osf-select
+            [noBorder]="true"
             [options]="control.options"
-            [(ngModel)]="control.value"
-            (ngModelChange)="emitValueChange.emit({ index: index, value: control.value })"
-          >
-            <ng-template let-item pTemplate="item">
-              <span>{{ item.label | translate }}</span>
-            </ng-template>
-
-            <ng-template let-item pTemplate="selectedItem">
-              {{ item.label | translate }}
-            </ng-template>
-          </p-select>
+            [(selectedValue)]="control.value"
+            [disabled]="disabledRightControls()"
+            (changeValue)="emitValueChange.emit({ index: index, value: control.value })"
+          ></osf-select>
         </div>
       }
     </div>
   }
 </div>
 
 @if (expanded()) {
-  <div
-    class="mt-2 pl-5 border-bottom-1 border-gray-300"
-    [attr.id]="'accordion-content-' + title()"
-    [attr.aria-labelledby]="'accordion-label-' + title()"
-  >
+  <div class="mt-2 pl-5 border-bottom-1 border-gray-300">
     <ng-content></ng-content>
   </div>
 }

src/app/features/project/settings/components/project-detail-setting-accordion/project-detail-setting-accordion.component.ts

@@ -1,23 +1,26 @@
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
-import { SelectModule } from 'primeng/select';
 
 import { ChangeDetectionStrategy, Component, input, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
+import { SelectComponent } from '@osf/shared/components';
+
 import { RightControl } from '../../models';
 
 @Component({
   selector: 'osf-project-detail-setting-accordion',
-  imports: [SelectModule, FormsModule, Button, TranslatePipe],
+  imports: [FormsModule, Button, SelectComponent, TranslatePipe],
   templateUrl: './project-detail-setting-accordion.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectDetailSettingAccordionComponent {
   emitValueChange = output<{ index: number; value: boolean | string }>();
   title = input<string>();
   rightControls = input.required<RightControl[] | undefined>();
+  disabledRightControls = input(false);
+
   expanded = signal(false);
 
   toggle() {

src/app/features/project/settings/components/project-setting-notifications/project-setting-notifications.component.html

@@ -3,23 +3,18 @@ <h2 class="pb-4">{{ 'myProjects.settings.emailNotifications' | translate }}</h2>
 
   <p class="pb-4">{{ 'myProjects.settings.emailNotificationsText' | translate }}</p>
 
-  <osf-project-detail-setting-accordion
-    (emitValueChange)="changeEmittedValue($event)"
-    [rightControls]="allAccordionData"
-    [title]="title()"
-  >
-    <div class="flex align-items-baseline gap-2">
-      <i class="fas fa-minus text-sm icon-space"></i>
-      <span>
-        {{ subscriptionEvent.Comments | notificationDescription: notifications()?.[0]?.frequency | translate }}
-      </span>
-    </div>
-
-    <div class="flex align-items-baseline gap-2 mt-2">
-      <i class="fas fa-minus text-sm icon-space"></i>
-      <span>
-        {{ subscriptionEvent.FileUpdated | notificationDescription: notifications()?.[1]?.frequency | translate }}
-      </span>
-    </div>
-  </osf-project-detail-setting-accordion>
+  @if (notifications().length) {
+    <osf-project-detail-setting-accordion
+      (emitValueChange)="changeEmittedValue($event)"
+      [rightControls]="allAccordionData"
+      [title]="title()"
+    >
+      <div class="flex align-items-baseline gap-2 mt-2">
+        <i class="fas fa-minus text-sm icon-space"></i>
+        <span>
+          {{ subscriptionEvent.FileUpdated | notificationDescription: notifications()[0].frequency | translate }}
+        </span>
+      </div>
+    </osf-project-detail-setting-accordion>
+  }
 </p-card>

src/app/features/project/settings/components/project-setting-notifications/project-setting-notifications.component.ts

@@ -4,8 +4,8 @@ import { Card } from 'primeng/card';
 
 import { ChangeDetectionStrategy, Component, effect, input, output } from '@angular/core';
 
-import { NotificationSubscription } from '@osf/features/settings/notifications/models';
 import { SubscriptionEvent, SubscriptionFrequency } from '@osf/shared/enums';
+import { NotificationSubscription } from '@osf/shared/models';
 
 import { RightControl } from '../../models';
 import { NotificationDescriptionPipe } from '../../pipes';
@@ -19,9 +19,9 @@ import { ProjectDetailSettingAccordionComponent } from '../project-detail-settin
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectSettingNotificationsComponent {
-  notificationEmitValue = output<{ event: SubscriptionEvent; frequency: SubscriptionFrequency }>();
+  notifications = input.required<NotificationSubscription[]>();
   title = input<string>();
-  notifications = input<NotificationSubscription[]>();
+  notificationEmitValue = output<NotificationSubscription>();
 
   allAccordionData: RightControl[] | undefined = [];
 
@@ -33,31 +33,22 @@ export class ProjectSettingNotificationsComponent {
 
   constructor() {
     effect(() => {
-      this.allAccordionData = this.notifications()?.map((notification) => {
-        if (notification.event === SubscriptionEvent.Comments) {
-          return {
-            label: 'settings.notifications.notificationPreferences.items.comments',
-            value: notification.frequency as string,
-            type: 'dropdown',
-            options: this.subscriptionFrequencyOptions,
-            event: notification.event,
-          } as RightControl;
-        } else {
-          return {
-            label: 'settings.notifications.notificationPreferences.items.files',
-            value: notification.frequency as string,
-            type: 'dropdown',
-            options: this.subscriptionFrequencyOptions,
-            event: notification.event,
-          } as RightControl;
-        }
+      this.allAccordionData = this.notifications().map((notification) => {
+        return {
+          label: 'settings.notifications.notificationPreferences.items.files',
+          value: notification.frequency as string,
+          type: 'dropdown',
+          options: this.subscriptionFrequencyOptions,
+          event: notification.event,
+        } as RightControl;
       });
     });
   }
 
   changeEmittedValue(emittedValue: { index: number; value: boolean | string }): void {
     if (this.allAccordionData) {
       this.notificationEmitValue.emit({
+        id: this.notifications()[0].id,
         event: this.allAccordionData[emittedValue.index].event as SubscriptionEvent,
         frequency: emittedValue.value as SubscriptionFrequency,
       });

src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.html

@@ -9,6 +9,7 @@ <h2 class="pb-4">{{ 'myProjects.settings.accessRequests' | translate }}</h2>
       id="accessRequest"
       name="ongoing"
     ></p-checkbox>
+
     <label class="input-label ml-2" for="accessRequest">
       {{ 'myProjects.settings.accessRequestsText' | translate }}
     </label>