diff --git a/src/app/features/home/constants/data.ts b/src/app/features/home/constants/data.ts index 8b6b300c8..743d3ba10 100644 --- a/src/app/features/home/constants/data.ts +++ b/src/app/features/home/constants/data.ts @@ -62,17 +62,4 @@ export const INTEGRATION_ICONS = [ width: '152', }, }, - { - title: 'home.loggedOut.integrations.categories.storage', - first: { - path: 'assets/images/integrations/dropbox.png', - height: '34', - width: '175', - }, - second: { - path: 'assets/images/integrations/google-drive.png', - height: '35', - width: '207', - }, - }, ]; diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html index 2e89dcf60..d54df5233 100644 --- a/src/app/features/home/home.component.html +++ b/src/app/features/home/home.component.html @@ -1,20 +1,18 @@ -
-
+
+

-

+

{{ 'home.loggedOut.hero.subtitle' | translate }}

-
- -
+
@@ -24,17 +22,15 @@

priority height="377" width="585" - alt="Better research" + [alt]="'home.loggedOut.hero.betterResearchImageAltText' | translate" />
-
+
-
-
-

+
+

-

{{ 'home.loggedOut.discover.subtitle' | translate }}

-
+

{{ 'home.loggedOut.discover.subtitle' | translate }}

(triggerSearch)="redirectToSearchPageWithValue()" />
-
+ -
+

-
-
-
-
- Search - -
- -
-

- {{ 'home.loggedOut.support.sections.search.title' | translate }} -

- -

- {{ 'home.loggedOut.support.sections.search.description' | translate }} -

-
-
- -
-
- Design - -
- -
-

- {{ 'home.loggedOut.support.sections.design.title' | translate }} -

- -

- {{ 'home.loggedOut.support.sections.design.description' | translate }} -

-
-
- -
-
- Collect - -
- -
-

- {{ 'home.loggedOut.support.sections.collect.title' | translate }} -

- -

- {{ 'home.loggedOut.support.sections.collect.description' | translate }} -

-
-
- -
-
- Publish -
- -
-

- {{ 'home.loggedOut.support.sections.publish.title' | translate }} -

- -

- {{ 'home.loggedOut.support.sections.publish.description' | translate }} -

-
-
-
- -
- -
+
+
{{ 'common.labels.learnMore' | translate }}
-
+
-
+

-
-
- - -
-
- +
+ + +
+
+ -
-

{{ slide.title | translate }}

+
+

{{ slide.title | translate }}

-

{{ slide.author }}

-

{{ slide.facility | translate }}

+

{{ slide.author }}

+

{{ slide.facility | translate }}

+
-
- + +
+ + +
+ + +
+

+ + - -

- - + } +
-
- - -
-

{{ icon.title | translate }}

- - Carousel icon - - Carousel icon -
- - +
+ + +
+ +
+ + +
+ +
+ + +
+

{{ icon.title | translate }}

+ + + +
- + diff --git a/src/app/features/home/home.component.scss b/src/app/features/home/home.component.scss index 36e22cde8..7b3740da4 100644 --- a/src/app/features/home/home.component.scss +++ b/src/app/features/home/home.component.scss @@ -7,18 +7,15 @@ object-fit: contain; } - .discover-research-container { - background: var(--gradient-1); - } - - .arrow-down { - color: var(--grey-1); + .connected-record-image { + width: 100%; + max-width: 60%; + height: auto; + object-fit: contain; } - .youtube-frame { - border: none; - width: 100%; - aspect-ratio: 2 / 1; + .discover-research-container { + background: var(--gradient-1); } .carousel-container { diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts index fbd6f7e1b..28f3d25fd 100644 --- a/src/app/features/home/home.component.ts +++ b/src/app/features/home/home.component.ts @@ -3,7 +3,7 @@ import { TranslatePipe } from '@ngx-translate/core'; import { Button } from 'primeng/button'; import { Carousel } from 'primeng/carousel'; -import { NgOptimizedImage } from '@angular/common'; +import { NgOptimizedImage, NgTemplateOutlet } from '@angular/common'; import { Component, inject } from '@angular/core'; import { FormControl } from '@angular/forms'; import { Router, RouterLink } from '@angular/router'; @@ -15,7 +15,16 @@ import { INTEGRATION_ICONS, SLIDES } from './constants/data'; @Component({ selector: 'osf-home', - imports: [Carousel, Button, SearchInputComponent, IconComponent, NgOptimizedImage, TranslatePipe, RouterLink], + imports: [ + Carousel, + Button, + SearchInputComponent, + IconComponent, + NgOptimizedImage, + NgTemplateOutlet, + TranslatePipe, + RouterLink, + ], templateUrl: './home.component.html', styleUrl: './home.component.scss', }) diff --git a/src/app/features/home/pages/dashboard/dashboard.component.html b/src/app/features/home/pages/dashboard/dashboard.component.html index a1c71b4eb..4a005698d 100644 --- a/src/app/features/home/pages/dashboard/dashboard.component.html +++ b/src/app/features/home/pages/dashboard/dashboard.component.html @@ -1,4 +1,4 @@ -
+
@if (areProjectsLoading()) { } @else { @@ -6,18 +6,17 @@ [showButton]="!isWorkflowLauncherEnabled()" [title]="subHeaderTitle() | translate" [icon]="'fas fa-home'" - [title]="'home.loggedIn.dashboard.title' | translate" [buttonLabel]="'home.loggedIn.dashboard.createProject' | translate" (buttonClick)="createProject()" /> + + @if (isWorkflowLauncherEnabled()) { } @if (existsProjects()) { - -

{{ 'home.loggedIn.dashboard.quickSearch.goTo' | translate }} @@ -49,17 +48,12 @@ />

-
- -

{{ 'home.loggedIn.publicProjects.title' | translate }}

-
-

{{ 'home.loggedIn.latestResearch.title' | translate }}

-

{{ 'home.loggedIn.latestResearch.subtitle' | translate }}

+

{{ 'home.loggedIn.latestResearch.subtitle' | translate }}

{{ 'home.loggedIn.latestResearch.title' | translate }} />
} @else { -
-
-

{{ 'home.loggedIn.dashboard.noCreatedProject' | translate }}

+
+

{{ 'home.loggedIn.dashboard.noCreatedProject' | translate }}

-

{{ 'home.loggedIn.dashboard.watchVideoBelow' | translate }}

+

-
- -
+ -
- -
-
+
} -
+
@for (product of dashboardProducts; track product.imageSrc) { @if (product.external) { { SubHeaderComponent, MyProjectsTableComponent, SearchInputComponent, - IconComponent, LoadingSpinnerComponent, ScheduledBannerComponent, WorkflowLauncherSectionComponent @@ -446,10 +444,30 @@ describe('DashboardComponent', () => { vi.useRealTimers(); }); + it('should render empty state when no projects exist', () => { + setup(); + + expect(fixture.nativeElement.querySelector('.connected-record-image')).toBeTruthy(); + expect(fixture.nativeElement.querySelector('osf-my-projects-table')).toBeFalsy(); + expect(fixture.nativeElement.querySelector('.latest-research-container')).toBeFalsy(); + }); + + it('should render projects table and latest research when projects exist', () => { + setup({ + selectorOverrides: [{ selector: MyResourcesSelectors.getProjects, value: [projectItem] }], + }); + + expect(fixture.nativeElement.querySelector('osf-my-projects-table')).toBeTruthy(); + expect(fixture.nativeElement.querySelector('.latest-research-container')).toBeTruthy(); + expect(fixture.nativeElement.querySelector('.connected-record-image')).toBeFalsy(); + }); + it('should render dashboard product links', () => { setup(); - expect(fixture.nativeElement.querySelectorAll('img').length).toBe(DASHBOARD_PRODUCT_LINKS.length); + const productImages = fixture.nativeElement.querySelectorAll('.flex.flex-column.p-4 img'); + + expect(productImages.length).toBe(DASHBOARD_PRODUCT_LINKS.length); }); it('should render external product link with blank target', () => { diff --git a/src/app/features/home/pages/dashboard/dashboard.component.ts b/src/app/features/home/pages/dashboard/dashboard.component.ts index 4ac70be7c..70dbaaf5f 100644 --- a/src/app/features/home/pages/dashboard/dashboard.component.ts +++ b/src/app/features/home/pages/dashboard/dashboard.component.ts @@ -8,7 +8,7 @@ import { TablePageEvent } from 'primeng/table'; import { debounceTime, distinctUntilChanged, filter, tap } from 'rxjs'; -import { isPlatformBrowser } from '@angular/common'; +import { isPlatformBrowser, NgOptimizedImage } from '@angular/common'; import { Component, computed, DestroyRef, effect, inject, OnInit, PLATFORM_ID, signal } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { FormControl } from '@angular/forms'; @@ -17,7 +17,6 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router'; import { ScheduledBannerComponent } from '@osf/core/components/osf-banners/scheduled-banner/scheduled-banner.component'; import { UserSelectors } from '@osf/core/store/user'; import { CreateProjectDialogComponent } from '@osf/features/my-projects/components/create-project-dialog/create-project-dialog.component'; -import { IconComponent } from '@osf/shared/components/icon/icon.component'; import { LoadingSpinnerComponent } from '@osf/shared/components/loading-spinner/loading-spinner.component'; import { MyProjectsTableComponent } from '@osf/shared/components/my-projects-table/my-projects-table.component'; import { SearchInputComponent } from '@osf/shared/components/search-input/search-input.component'; @@ -39,15 +38,15 @@ import { DASHBOARD_PRODUCT_LINKS } from '../../constants/dashboard-products.cons selector: 'osf-dashboard', imports: [ RouterLink, + NgOptimizedImage, Button, SubHeaderComponent, MyProjectsTableComponent, SearchInputComponent, - IconComponent, - TranslatePipe, LoadingSpinnerComponent, ScheduledBannerComponent, WorkflowLauncherSectionComponent, + TranslatePipe, ], templateUrl: './dashboard.component.html', styleUrl: './dashboard.component.scss', diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 48eb87ad8..4a49a62a0 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -821,7 +821,8 @@ } } }, - "noCreatedProject": "You haven’t created a project yet. Click the \"Create New Project\" button above to get started.", + "noCreatedProject": "You haven’t created a project yet.", + "projectTransition": "New projects can no longer be created after November 16th, and all existing projects will become read-only on February 19th. You can read more about the upcoming transition here.", "quickSearch": { "goTo": "Go to", "myProjects": "My Projects", @@ -831,16 +832,12 @@ "toOrganize": "to organize your work or" }, "title": "Dashboard", - "watchVideoBelow": "Watch the short video below or visit the OSF Get Started help guides to learn more.", "welcome": "Welcome to OSF!" }, "latestResearch": { "button": "View Preprints", "subtitle": "Check out the latest preprints hosted on OSF covering a variety of research areas", "title": "Browse the latest research" - }, - "publicProjects": { - "title": "Discover Public Projects" } }, "loggedOut": { @@ -850,6 +847,7 @@ "title": "Discover Public Research" }, "hero": { + "betterResearchImageAltText": "Better research", "signUp": "Sign Up", "subtitle": "OSF is a free, open platform to support your research and enable collaboration", "title": "There's a better way to manage your research" @@ -858,31 +856,14 @@ "categories": { "authentication": "Authentication", "discovery": "Discovery", - "references": "References", - "storage": "Storage" + "references": "References" }, + "iconImageAltText": "Integration icon", "title": "OSF integrations make your workflow more efficient" }, "support": { - "sections": { - "collect": { - "description": "Store your datasets, code, and research materials in trusted repositories then link them to your registration to keep them findable, citable, and preserved for the long term.", - "title": "Collect and Analyze Data" - }, - "design": { - "description": "Register your study design and invite collaborators to review your protocols and research materials before data collection begins.", - "title": "Design Your Study" - }, - "publish": { - "description": "Share papers in OSF Preprints or a community-based preprint provider, so others can find and cite your work. Track impact with metrics like downloads and view counts.", - "title": "Publish Your Reports" - }, - "search": { - "description": "Find papers, data, and materials to inspire your next research project. Search public registrations and preprints to build on the work of others and find new collaborators.", - "title": "Search And Discover" - } - }, - "title": "How OSF Supports your research" + "title": "How OSF Supports your research", + "connectedRecord": "Connected record" }, "testimonials": { "slides": { diff --git a/src/assets/images/connected-record.png b/src/assets/images/connected-record.png new file mode 100644 index 000000000..1ef296672 Binary files /dev/null and b/src/assets/images/connected-record.png differ diff --git a/src/assets/images/integrations/dropbox.png b/src/assets/images/integrations/dropbox.png deleted file mode 100644 index 9ad2193b5..000000000 Binary files a/src/assets/images/integrations/dropbox.png and /dev/null differ diff --git a/src/assets/images/integrations/google-drive.png b/src/assets/images/integrations/google-drive.png deleted file mode 100644 index f56595338..000000000 Binary files a/src/assets/images/integrations/google-drive.png and /dev/null differ