CenterForOpenScience · nsemets · Jun 16, 2025 · Jun 16, 2025 · Jun 16, 2025
diff --git a/src/app/features/collections/collections.component.html b/src/app/features/collections/collections.component.html
@@ -9,18 +9,12 @@ <h1 class="flex align-items-center text-white">Collection Title</h1>
   </div>
 
   <div class="search-input-container">
-    <img
-      ngSrc="assets/icons/colored/question-mark.svg"
-      alt="better-research"
-      tabindex="0"
-      role="button"
-      height="36"
-      width="36"
-      class="cursor-pointer"
-      (click)="openHelpDialog()"
-      (keydown.enter)="openHelpDialog()"
+    <osf-search-input
+      [control]="searchControl"
+      [showHelpIcon]="true"
+      [placeholder]="'collections.searchInput.placeholder' | translate"
+      (helpClicked)="openHelpDialog()"
     />
-    <osf-search-input [control]="searchControl" [placeholder]="'collections.searchInput.placeholder' | translate" />
   </div>
 
   <div class="content-container flex-1">

diff --git a/src/app/features/collections/collections.component.ts b/src/app/features/collections/collections.component.ts
@@ -3,7 +3,6 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 
-import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
@@ -12,7 +11,7 @@ import { SearchInputComponent } from '@shared/components';
 
 @Component({
   selector: 'osf-collections',
-  imports: [NgOptimizedImage, SearchInputComponent, TranslatePipe, Button, CollectionsMainContentComponent],
+  imports: [SearchInputComponent, TranslatePipe, Button, CollectionsMainContentComponent],
   templateUrl: './collections.component.html',
   styleUrl: './collections.component.scss',
   providers: [DialogService],

diff --git a/...ures/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.scss b/...ures/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.scss
@@ -1,13 +1,15 @@
+@use "assets/styles/variables" as var;
+
 :host {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
 
-  @media (max-width: 1200px) {
+  @media (max-width: var.$breakpoint-xl) {
     flex-direction: row;
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: var.$breakpoint-sm) {
     flex-direction: column;
   }
 }
diff --git a/src/app/features/my-profile/components/my-profile-search/my-profile-search.component.html b/src/app/features/my-profile/components/my-profile-search/my-profile-search.component.html
@@ -1,16 +1,10 @@
 <div class="search-container mt-5 mx-3 md:mx-4 xl:mt-6">
-  <img
-    class="cursor-pointer"
-    ngSrc="assets/icons/colored/question-mark.svg"
-    tabindex="0"
-    role="button"
-    height="36"
-    width="36"
-    alt="better-research"
-    (click)="currentStep = 1"
-    (keydown.enter)="currentStep = 1"
+  <osf-search-input
+    [control]="searchControl"
+    [showHelpIcon]="true"
+    [placeholder]="'collections.searchInput.placeholder' | translate"
+    (helpClicked)="showTutorial()"
   />
-  <osf-search-input [control]="searchControl" placeholder="Enter search term(s) here" />
 </div>
 
 <div class="flex-column flex flex-1 w-full resources-tab-panel">
@@ -24,67 +18,11 @@
         <p-tab [value]="ResourceTab.Files">Files</p-tab>
       </p-tablist>
     }
-
-    <p-tabpanels class="p-3 flex-1 sm:p-5">
-      <p-tabpanel [value]="ResourceTab.All" class="flex flex-column gap-4 flex-1"> </p-tabpanel>
-      <p-tabpanel [value]="ResourceTab.Projects" class="flex flex-column gap-5"> </p-tabpanel>
-      <p-tabpanel [value]="ResourceTab.Registrations" class="flex flex-column gap-5"></p-tabpanel>
-      <p-tabpanel [value]="ResourceTab.Preprints" class="flex flex-column gap-5"></p-tabpanel>
-      <p-tabpanel [value]="ResourceTab.Files" class="flex flex-column gap-5"> </p-tabpanel>
-    </p-tabpanels>
   </p-tabs>
 
   <div class="resources py-4 px-3 md:px-5 xl:px-4">
     <osf-my-profile-resources></osf-my-profile-resources>
 
-    @if (currentStep === 1) {
-      <div class="stepper first-stepper">
-        <h3 stepper-title>Improved OSF Search</h3>
-        <p>
-          Enter any term in the search box and filter by specific object types. More information is available on our
-          help guides.
-        </p>
-        <div class="flex align-items-center mt-4">
-          <p>1 of 3</p>
-          <div class="flex column-gap-3 ml-auto wide-button">
-            <p-button (click)="currentStep = 0" label="Skip" severity="secondary" />
-            <p-button (click)="currentStep = currentStep + 1" label="Next"></p-button>
-          </div>
-        </div>
-      </div>
-    }
-
-    @if (currentStep === 2) {
-      <div class="stepper second-stepper">
-        <h3 stepper-title>Refine Your Search</h3>
-        <p>
-          Narrow the source, discipline, and more. For example, find content supported by a specific funder or view only
-          datasets.
-        </p>
-        <div class="flex align-items-center mt-4">
-          <p>2 of 3</p>
-          <div class="flex column-gap-3 ml-auto wide-button">
-            <p-button (click)="currentStep = 0" label="Skip" severity="secondary" />
-            <p-button (click)="currentStep = currentStep + 1" label="Next"></p-button>
-          </div>
-        </div>
-      </div>
-    }
-
-    @if (currentStep === 3) {
-      <div class="stepper third-stepper">
-        <h3 stepper-title>Add Metadata</h3>
-        <p>
-          Remember to add metadata and resources to your own work on OSF to make it more discoverable! Learn more in our
-          help guides.
-        </p>
-        <div class="flex align-items-center mt-4">
-          <p>3 of 3</p>
-          <div class="flex column-gap-3 ml-auto wide-button">
-            <p-button (click)="currentStep = currentStep + 1" label="Done"></p-button>
-          </div>
-        </div>
-      </div>
-    }
+    <osf-search-help-tutorial [(currentStep)]="currentStep"></osf-search-help-tutorial>
   </div>
 </div>
diff --git a/src/app/features/my-profile/components/my-profile-search/my-profile-search.component.ts b/src/app/features/my-profile/components/my-profile-search/my-profile-search.component.ts
@@ -1,17 +1,17 @@
 import { Store } from '@ngxs/store';
 
-import { Button } from 'primeng/button';
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Tab, TabList, Tabs } from 'primeng/tabs';
 
 import { debounceTime, skip } from 'rxjs';
 
-import { NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, untracked } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, signal, untracked } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
 
 import { UserSelectors } from '@osf/core/store/user';
-import { SearchInputComponent } from '@osf/shared/components';
+import { SearchHelpTutorialComponent, SearchInputComponent } from '@osf/shared/components';
 import { ResourceTab } from '@osf/shared/enums';
 import { IS_XSMALL } from '@osf/shared/utils';
 
@@ -23,15 +23,13 @@ import { MyProfileResourcesComponent } from '../my-profile-resources/my-profile-
 @Component({
   selector: 'osf-my-profile-search',
   imports: [
-    Button,
-    NgOptimizedImage,
+    TranslatePipe,
     SearchInputComponent,
     Tab,
     TabList,
-    TabPanel,
-    TabPanels,
     Tabs,
     MyProfileResourcesComponent,
+    SearchHelpTutorialComponent,
   ],
   templateUrl: './my-profile-search.component.html',
   styleUrl: './my-profile-search.component.scss',
@@ -63,7 +61,7 @@ export class MyProfileSearchComponent {
 
   protected selectedTab: ResourceTab = ResourceTab.All;
   protected readonly ResourceTab = ResourceTab;
-  protected currentStep = 0;
+  protected currentStep = signal(0);
   private skipInitializationEffects = 0;
 
   constructor() {
@@ -120,4 +118,8 @@ export class MyProfileSearchComponent {
     this.selectedTab = index;
     this.#store.dispatch(GetAllOptions);
   }
+
+  showTutorial() {
+    this.currentStep.set(1);
+  }
 }
diff --git a/...eatures/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html b/...eatures/preprints/components/preprint-provider-hero/preprint-provider-hero.component.html
@@ -42,23 +42,13 @@ <h1 class="preprint-provider-name">{{ preprintProvider()!.name }}</h1>
   </div>
 
   <div class="search-input-container">
-    <img
-      ngSrc="assets/icons/colored/question-mark.svg"
-      alt="preprints help"
-      tabindex="0"
-      role="button"
-      height="36"
-      width="36"
-      class="cursor-pointer"
-      (click)="openHelpDialog()"
-      (keydown.enter)="openHelpDialog()"
-    />
-
     <osf-search-input
       class="w-full"
+      [showHelpIcon]="true"
       [placeholder]="'preprints.searchPlaceholder' | translate"
       [control]="searchControl()"
       (triggerSearch)="onTriggerSearch($event)"
+      (helpClicked)="openHelpDialog()"
     />
   </div>
 

diff --git a/.../features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts b/.../features/preprints/components/preprint-provider-hero/preprint-provider-hero.component.ts
@@ -4,7 +4,6 @@ import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 import { Skeleton } from 'primeng/skeleton';
 
-import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { RouterLink } from '@angular/router';
@@ -16,7 +15,7 @@ import { DecodeHtmlPipe } from '@shared/pipes';
 
 @Component({
   selector: 'osf-preprint-provider-hero',
-  imports: [Button, RouterLink, SearchInputComponent, Skeleton, TranslatePipe, NgOptimizedImage, DecodeHtmlPipe],
+  imports: [Button, RouterLink, SearchInputComponent, Skeleton, TranslatePipe, DecodeHtmlPipe],
   templateUrl: './preprint-provider-hero.component.html',
   styleUrl: './preprint-provider-hero.component.scss',
   providers: [DialogService],

diff --git a/src/app/features/search/components/filter-chips/filter-chips.component.scss b/src/app/features/search/components/filter-chips/filter-chips.component.scss
@@ -1,13 +1,15 @@
+@use "assets/styles/variables" as var;
+
 :host {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
 
-  @media (max-width: 1200px) {
+  @media (max-width: var.$breakpoint-xl) {
     flex-direction: row;
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: var.$breakpoint-sm) {
     flex-direction: column;
   }
 }
diff --git a/src/app/features/search/search.component.html b/src/app/features/search/search.component.html
@@ -1,107 +1,28 @@
 <div class="xl:mt-6 xl:pt-6">
-  <div class="search-container mt-5 mx-3 md:mx-4">
-    <img
-      class="custom-dark-hover cursor-pointer"
-      ngSrc="assets/icons/colored/question-mark.svg"
-      tabindex="0"
-      role="button"
-      height="36"
-      width="36"
-      alt="better-research"
-      (click)="currentStep = 1"
-      (keydown.enter)="currentStep = 1"
+  <div class="mt-5 mx-3 md:mx-4">
+    <osf-search-input
+      [control]="searchControl"
+      [showHelpIcon]="true"
+      [placeholder]="'collections.searchInput.placeholder' | translate"
+      (helpClicked)="showTutorial()"
     />
-    <osf-search-input [control]="searchControl" placeholder="Enter search term(s) here" />
   </div>
 
   <div class="flex-column flex w-full resources-tab-panel">
     <p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="flex-1">
-      @if (!isMobile()) {
+      @if (isSmall()) {
         <p-tablist>
-          <p-tab [value]="ResourceTab.All">All</p-tab>
-          <p-tab [value]="ResourceTab.Projects">Projects</p-tab>
-          <p-tab [value]="ResourceTab.Registrations">Registrations</p-tab>
-          <p-tab [value]="ResourceTab.Preprints">Preprints</p-tab>
-          <p-tab [value]="ResourceTab.Files">Files</p-tab>
-          @if (!isMyProfilePage()) {
-            <p-tab [value]="ResourceTab.Users">Users</p-tab>
+          @for (item of resourceTabOptions; track $index) {
+            <p-tab [value]="item.value">{{ item.label | translate }}</p-tab>
           }
         </p-tablist>
       }
-
-      <p-tabpanels class="p-3 flex-1 sm:p-5">
-        <p-tabpanel [value]="ResourceTab.All" class="flex flex-column gap-4 flex-1"> </p-tabpanel>
-        <p-tabpanel [value]="ResourceTab.Projects" class="flex flex-column gap-5"> </p-tabpanel>
-        <p-tabpanel [value]="ResourceTab.Registrations" class="flex flex-column gap-5"></p-tabpanel>
-        <p-tabpanel [value]="ResourceTab.Preprints" class="flex flex-column gap-5"></p-tabpanel>
-        <p-tabpanel [value]="ResourceTab.Files" class="flex flex-column gap-5"> </p-tabpanel>
-        @if (!isMyProfilePage()) {
-          <p-tabpanel [value]="ResourceTab.Users" class="flex flex-column gap-5"> </p-tabpanel>
-        }
-      </p-tabpanels>
     </p-tabs>
 
     <div class="resources py-4 px-3 md:px-5 xl:px-4">
       <osf-resources-wrapper></osf-resources-wrapper>
 
-      @if (currentStep === 1) {
-        <div class="stepper first-stepper">
-          <h3 class="stepper-title">Improved OSF Search</h3>
-
-          <p>
-            Enter any term in the search box and filter by specific object types. More information is available on our
-            help guides.
-          </p>
-
-          <div class="flex align-items-center mt-4">
-            <p>1 of 3</p>
-
-            <div class="flex column-gap-3 ml-auto wide-button">
-              <p-button (click)="currentStep = 0" label="Skip" severity="secondary" />
-              <p-button (click)="currentStep = currentStep + 1" label="Next"></p-button>
-            </div>
-          </div>
-        </div>
-      }
-
-      @if (currentStep === 2) {
-        <div class="stepper second-stepper">
-          <h3 class="stepper-title">Refine Your Search</h3>
-
-          <p>
-            Narrow the source, discipline, and more. For example, find content supported by a specific funder or view
-            only datasets.
-          </p>
-
-          <div class="flex align-items-center mt-4">
-            <p>2 of 3</p>
-
-            <div class="flex column-gap-3 ml-auto wide-button">
-              <p-button (click)="currentStep = 0" label="Skip" severity="secondary" />
-              <p-button (click)="currentStep = currentStep + 1" label="Next"></p-button>
-            </div>
-          </div>
-        </div>
-      }
-
-      @if (currentStep === 3) {
-        <div class="stepper third-stepper">
-          <h3 class="stepper-title">Add Metadata</h3>
-
-          <p>
-            Remember to add metadata and resources to your own work on OSF to make it more discoverable! Learn more in
-            our help guides.
-          </p>
-
-          <div class="flex align-items-center mt-4">
-            <p>3 of 3</p>
-
-            <div class="flex column-gap-3 ml-auto wide-button">
-              <p-button (click)="currentStep = currentStep + 1" label="Done"></p-button>
-            </div>
-          </div>
-        </div>
-      }
+      <osf-search-help-tutorial [(currentStep)]="currentStep"></osf-search-help-tutorial>
     </div>
   </div>
 </div>