diff --git a/CHANGELOG.md b/CHANGELOG.md index ca750cf782a..0a75f5bc032 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). +## [23.10.0] - 2023-08-28 +### Added +- Added search improvement routes and related components + ## [23.09.0] - 2023-08-16 ### Changed - Added Google Tag Manager @@ -1936,6 +1940,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Added - Quick Files +[23.10.0]: https://github.com/CenterForOpenScience/ember-osf-web/releases/tag/23.10.0 [23.09.0]: https://github.com/CenterForOpenScience/ember-osf-web/releases/tag/23.09.0 [23.08.0]: https://github.com/CenterForOpenScience/ember-osf-web/releases/tag/23.08.0 [23.07.0]: https://github.com/CenterForOpenScience/ember-osf-web/releases/tag/23.07.0 diff --git a/app/adapters/index-card-search.ts b/app/adapters/index-card-search.ts new file mode 100644 index 00000000000..c30f0c69128 --- /dev/null +++ b/app/adapters/index-card-search.ts @@ -0,0 +1,12 @@ +import ShareAdapter from './share-adapter'; +export default class IndexCardSearchAdapter extends ShareAdapter { + pathForType() { + return 'index-card-search'; + } +} + +declare module 'ember-data/types/registries/adapter' { + export default interface AdapterRegistry { + 'index-card-search': IndexCardSearchAdapter; + } // eslint-disable-line semi +} diff --git a/app/adapters/index-card.ts b/app/adapters/index-card.ts new file mode 100644 index 00000000000..3bd54888714 --- /dev/null +++ b/app/adapters/index-card.ts @@ -0,0 +1,13 @@ +import ShareAdapter from './share-adapter'; + +export default class IndexCardAdapter extends ShareAdapter { + pathForType() { + return 'index-card'; + } +} + +declare module 'ember-data/types/registries/adapter' { + export default interface AdapterRegistry { + 'index-card': IndexCardAdapter; + } // eslint-disable-line semi +} diff --git a/app/adapters/index-value-search.ts b/app/adapters/index-value-search.ts new file mode 100644 index 00000000000..552cc0c5c29 --- /dev/null +++ b/app/adapters/index-value-search.ts @@ -0,0 +1,13 @@ +import ShareAdapter from './share-adapter'; + +export default class IndexValueSearchAdapter extends ShareAdapter { + pathForType() { + return 'index-value-search'; + } +} + +declare module 'ember-data/types/registries/adapter' { + export default interface AdapterRegistry { + 'index-value-search': IndexValueSearchAdapter; + } // eslint-disable-line semi +} diff --git a/app/adapters/related-property-path.ts b/app/adapters/related-property-path.ts new file mode 100644 index 00000000000..ecac9f5d8eb --- /dev/null +++ b/app/adapters/related-property-path.ts @@ -0,0 +1,10 @@ +import ShareAdapter from './share-adapter'; + +export default class RelatedPropertyPathAdapter extends ShareAdapter { +} + +declare module 'ember-data/types/registries/adapter' { + export default interface AdapterRegistry { + 'related-property-path': RelatedPropertyPathAdapter; + } // eslint-disable-line semi +} diff --git a/app/adapters/search-result.ts b/app/adapters/search-result.ts new file mode 100644 index 00000000000..1fa4045fe5b --- /dev/null +++ b/app/adapters/search-result.ts @@ -0,0 +1,10 @@ +import ShareAdapter from './share-adapter'; + +export default class SearchResultAdapter extends ShareAdapter { +} + +declare module 'ember-data/types/registries/adapter' { + export default interface AdapterRegistry { + 'search-result': SearchResultAdapter; + } // eslint-disable-line semi +} diff --git a/app/adapters/share-adapter.ts b/app/adapters/share-adapter.ts new file mode 100644 index 00000000000..b8ce1c88dd6 --- /dev/null +++ b/app/adapters/share-adapter.ts @@ -0,0 +1,7 @@ +import JSONAPIAdapter from '@ember-data/adapter/json-api'; +import config from 'ember-get-config'; + +export default class ShareAdapter extends JSONAPIAdapter { + host = config.OSF.shareBaseUrl.replace(/\/$/, ''); // Remove trailing slash to avoid // in URLs + namespace = 'api/v3'; +} diff --git a/app/app.ts b/app/app.ts index c39a959450f..f61def4be6b 100644 --- a/app/app.ts +++ b/app/app.ts @@ -56,6 +56,7 @@ const App = Application.extend({ 'osf-router', ], externalRoutes: { + search: 'search', 'guid-registration': 'guid-registration', 'guid-registration.analytics': 'guid-registration.analytics', 'guid-registration.forks': 'guid-registration.forks', diff --git a/app/dashboard/template.hbs b/app/dashboard/template.hbs index 40bb5818cc0..229e237ca59 100644 --- a/app/dashboard/template.hbs +++ b/app/dashboard/template.hbs @@ -239,7 +239,7 @@ {{t 'dashboard.noteworthy.search_more'}} diff --git a/app/helpers/get-localized-property.ts b/app/helpers/get-localized-property.ts new file mode 100644 index 00000000000..848a9f4607a --- /dev/null +++ b/app/helpers/get-localized-property.ts @@ -0,0 +1,40 @@ +import Helper from '@ember/component/helper'; +import { inject as service } from '@ember/service'; +import IntlService from 'ember-intl/services/intl'; + +import { LanguageText } from 'ember-osf-web/models/index-card'; + +/** + * This helper is used to get a locale-appropriate string for a property from a metadata hash. + * It is used to fetch metadata fields from a index-card's resourceMetadata attribute, but can be used for any + * hash that contains an array of LangaugeText objects. + * If the property is not found, the first value in the array is returned, or if the property is found, + * but there is no locale-appropriate value, the first value in the array is returned. + * + * @example + * ```handlebars + * {{get-localized-property indexCard.resourceMetadata 'title'}} + * ``` + * where `indexCard` is an index-card model instance. + * @class get-localized-property + * @param {Object} metadataHash The metadata hash to search for the property + * @param {String} propertyName The name of the property to search for + * @return {String} The locale-appropriate string or the first value in the array or 'Not provided' message + */ +export default class GetLocalizedPropertyHelper extends Helper { + @service intl!: IntlService; + + compute([metadataHash, propertyName]: [Record, string]): string { + const locale = this.intl.locale; + const valueOptions = metadataHash?.[propertyName]; + if (!metadataHash || !valueOptions || valueOptions.length === 0) { + return this.intl.t('helpers.get-localized-property.not-provided'); + } + + const index = valueOptions.findIndex((valueOption: LanguageText) => valueOption['@language'] === locale); + if (index === -1) { + return valueOptions[0]['@value']; + } + return valueOptions[index]['@value']; + } +} diff --git a/app/home/-components/hero-banner/component.ts b/app/home/-components/hero-banner/component.ts index 214d3b2049e..0ee4b144f34 100644 --- a/app/home/-components/hero-banner/component.ts +++ b/app/home/-components/hero-banner/component.ts @@ -2,13 +2,12 @@ import { tagName } from '@ember-decorators/component'; import Component from '@ember/component'; import { action } from '@ember/object'; import { alias } from '@ember/object/computed'; +import RouterService from '@ember/routing/router-service'; import { inject as service } from '@ember/service'; import { camelize } from '@ember/string'; import Features from 'ember-feature-flags/services/features'; import config from 'ember-get-config'; -import { serviceLinks } from 'ember-osf-web/const/service-links'; - import { layout } from 'ember-osf-web/decorators/component'; import styles from './styles'; @@ -20,13 +19,13 @@ const { featureFlagNames: { ABTesting } } = config; @tagName('') export default class HomeHeroBanner extends Component { @service features!: Features; + @service router!: RouterService; @alias(`features.${camelize(ABTesting.homePageHeroTextVersionB)}`) shouldShowVersionB!: boolean; @action search(query: string) { - const { search } = serviceLinks; - window.location.href = `${search}?q=${query}&page=1`; + this.router.transitionTo('search', { queryParams: { q: query }}); } } diff --git a/app/institutions/dashboard/controller.ts b/app/institutions/dashboard/controller.ts index 796197bcef3..785f77100c5 100644 --- a/app/institutions/dashboard/controller.ts +++ b/app/institutions/dashboard/controller.ts @@ -1,6 +1,6 @@ +import { alias } from '@ember/object/computed'; import Controller from '@ember/controller'; import { computed } from '@ember/object'; -import { alias } from '@ember/object/computed'; import { inject as service } from '@ember/service'; import { InstitutionsDashboardModel } from 'ember-osf-web/institutions/dashboard/route'; diff --git a/app/institutions/discover/controller.ts b/app/institutions/discover/controller.ts new file mode 100644 index 00000000000..66502e85cbb --- /dev/null +++ b/app/institutions/discover/controller.ts @@ -0,0 +1,31 @@ +import Controller from '@ember/controller'; +import { inject as service } from '@ember/service'; +import CurrentUser from 'ember-osf-web/services/current-user'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; +import pathJoin from 'ember-osf-web/utils/path-join'; +import config from 'ember-get-config'; +import { OnSearchParams, ResourceTypeFilterValue } from 'osf-components/components/search-page/component'; + +export default class InstitutionDiscoverController extends Controller { + @service currentUser!: CurrentUser; + + @tracked cardSearchText?: string = ''; + @tracked sort?: string = '-relevance'; + @tracked resourceType?: ResourceTypeFilterValue | null = null; + + queryParams = ['cardSearchText', 'page', 'sort', 'resourceType']; + + get defaultQueryOptions() { + return { + publisher: pathJoin(config.OSF.url, 'institutions', this.model.id), + }; + } + + @action + onSearch(queryOptions: OnSearchParams) { + this.cardSearchText = queryOptions.cardSearchText; + this.sort = queryOptions.sort; + this.resourceType = queryOptions.resourceType; + } +} diff --git a/app/institutions/discover/route.ts b/app/institutions/discover/route.ts new file mode 100644 index 00000000000..de06d3125f4 --- /dev/null +++ b/app/institutions/discover/route.ts @@ -0,0 +1,8 @@ +import Route from '@ember/routing/route'; +import RouterService from '@ember/routing/router-service'; +import { inject as service } from '@ember/service'; + + +export default class InstitutionDiscoverRoute extends Route { + @service router!: RouterService; +} diff --git a/app/institutions/discover/template.hbs b/app/institutions/discover/template.hbs new file mode 100644 index 00000000000..7a30ee06cb5 --- /dev/null +++ b/app/institutions/discover/template.hbs @@ -0,0 +1,11 @@ + diff --git a/app/models/index-card-search.ts b/app/models/index-card-search.ts new file mode 100644 index 00000000000..da7f647128c --- /dev/null +++ b/app/models/index-card-search.ts @@ -0,0 +1,54 @@ +import Model, { AsyncHasMany, attr, hasMany } from '@ember-data/model'; + +import RelatedPropertyPathModel from './related-property-path'; +import SearchResultModel from './search-result'; + +export interface SearchFilter { + propertyPath: string; + filterValue: string[]; + filterType?: string; +} + +export const ShareMoreThanTenThousand = 'https://share.osf.io/vocab/2023/trove/ten-thousands-and-more'; + +export default class IndexCardSearchModel extends Model { + @attr('string') cardSearchText!: string; + @attr('array') cardSearchFilters!: SearchFilter[]; + @attr('string') totalResultCount!: number | typeof ShareMoreThanTenThousand; + + @hasMany('search-result', { inverse: null }) + searchResultPage!: AsyncHasMany & SearchResultModel[]; + + @hasMany('related-property-path', { inverse: null }) + relatedProperties!: RelatedPropertyPathModel[]; + + get firstPageCursor() { + if (this.searchResultPage.links.first?.href) { + const firstPageLinkUrl = new URL(this.searchResultPage.links.first?.href); + return firstPageLinkUrl.searchParams.get('page[cursor]'); + } + return null; + } + + get prevPageCursor() { + if (this.searchResultPage.links.prev?.href) { + const prevPageLinkUrl = new URL(this.searchResultPage.links.prev?.href); + return prevPageLinkUrl.searchParams.get('page[cursor]'); + } + return null; + } + + get nextPageCursor() { + if (this.searchResultPage.links.next?.href) { + const nextPageLinkUrl = new URL(this.searchResultPage.links.next?.href); + return nextPageLinkUrl.searchParams.get('page[cursor]'); + } + return null; + } +} + +declare module 'ember-data/types/registries/model' { + export default interface ModelRegistry { + 'index-card-search': IndexCardSearchModel; + } // eslint-disable-line semi +} diff --git a/app/models/index-card.ts b/app/models/index-card.ts new file mode 100644 index 00000000000..15b179cd90d --- /dev/null +++ b/app/models/index-card.ts @@ -0,0 +1,53 @@ +import { inject as service } from '@ember/service'; +import Model, { AsyncHasMany, attr, hasMany } from '@ember-data/model'; +import IntlService from 'ember-intl/services/intl'; + +import GetLocalizedPropertyHelper from 'ember-osf-web/helpers/get-localized-property'; +import { getOwner } from '@ember/application'; + +export interface LanguageText { + '@language': string; + '@value': string; +} + +export default class IndexCardModel extends Model { + @service intl!: IntlService; + + @attr('array') resourceType!: string[]; + @attr('array') resourceIdentifier!: string[]; + // TODO: can we add a type for resourceMetadata? + @attr('object') resourceMetadata!: any; + + @hasMany('index-card', { inverse: null }) + relatedRecordSet!: AsyncHasMany & IndexCardModel[]; + + getLocalizedString = new GetLocalizedPropertyHelper(getOwner(this)); + + get resourceId() { + return this.resourceIdentifier[0]; + } + + get label() { + const possibleLabelKeys = ['displayLabel', 'name', 'title']; + for (const key of possibleLabelKeys) { + if (this.resourceMetadata[key]) { + const label = this.getLocalizedString.compute([this.resourceMetadata, key]); + // TODO: Get rid of this special casing once we have a decision on how BE should represents OSF provider + if (label === 'OSF') { + return 'OSF Projects'; + } + if (label === 'Open Science Framework') { + return 'OSF Preprints'; + } + return label; + } + } + return ''; + } +} + +declare module 'ember-data/types/registries/model' { + export default interface ModelRegistry { + 'index-card': IndexCardModel; + } // eslint-disable-line semi +} diff --git a/app/models/index-value-search.ts b/app/models/index-value-search.ts new file mode 100644 index 00000000000..6caf36d254a --- /dev/null +++ b/app/models/index-value-search.ts @@ -0,0 +1,21 @@ +import Model, { AsyncHasMany, attr, hasMany } from '@ember-data/model'; + +import { SearchFilter } from './index-card-search'; +import SearchResultModel from './search-result'; + +export default class IndexValueSearchModel extends Model { + @attr('string') valueSearchText!: string; + @attr('string') valueSearchPropertyPath!: string; + @attr('string') cardSearchText!: string; + @attr('array') cardSearchFilter!: SearchFilter[]; + @attr('number') totalResultCount!: number; + + @hasMany('search-result', { inverse: null }) + searchResultPage!: AsyncHasMany & SearchResultModel[]; +} + +declare module 'ember-data/types/registries/model' { + export default interface ModelRegistry { + 'index-value-search': IndexValueSearchModel; + } // eslint-disable-line semi +} diff --git a/app/models/preprint-provider.ts b/app/models/preprint-provider.ts index 7661f66766f..1b4d7ff6285 100644 --- a/app/models/preprint-provider.ts +++ b/app/models/preprint-provider.ts @@ -2,17 +2,19 @@ import { attr, hasMany, AsyncHasMany, belongsTo, AsyncBelongsTo } from '@ember-d import { computed } from '@ember/object'; import { alias } from '@ember/object/computed'; import { inject as service } from '@ember/service'; +import config from 'ember-get-config'; import Intl from 'ember-intl/services/intl'; import BrandModel from 'ember-osf-web/models/brand'; import { RelatedLinkMeta } from 'osf-api'; import PreprintModel from './preprint'; -import ProviderModel from './provider'; +import ProviderModel, { ReviewPermissions } from './provider'; export type PreprintWord = 'default' | 'work' | 'paper' | 'preprint' | 'thesis'; export type PreprintWordGrammar = 'plural' | 'pluralCapitalized' | 'singular' | 'singularCapitalized'; +const { defaultProvider } = config; export default class PreprintProviderModel extends ProviderModel { @service intl!: Intl; @@ -22,7 +24,7 @@ export default class PreprintProviderModel extends ProviderModel { @attr('string') preprintWord!: PreprintWord; // Reviews settings - @attr('array') permissions!: string[]; + @attr('array') permissions!: ReviewPermissions[]; @attr('boolean', { allowNull: true }) reviewsCommentsPrivate!: boolean | null; // Relationships @@ -49,6 +51,25 @@ export default class PreprintProviderModel extends ProviderModel { singularCapitalized: this.intl.t(`${documentType}.singularCapitalized`), }; } + + @computed('id') + get preprintWordInTitle() { + return this.id !== 'thesiscommons'; + } + + // Is either OSF Preprints if provider is the default provider, + // name+preprintWord.pluralCapitalized(e.g.AfricArXiv Preprints or MarXiv Papers), or "Thesis Commons" + @computed('documentType.pluralCapitalized', 'id', 'name', 'preprintWordInTitle') + get providerTitle() { + if (this.id !== defaultProvider) { + if (this.preprintWordInTitle) { + return this.intl.t('preprints.provider-title', + { name: this.name, pluralizedPreprintWord: this.documentType.pluralCapitalized }); + } + return this.name; + } + return this.intl.t('preprints.osf-title'); + } } declare module 'ember-data/types/registries/model' { diff --git a/app/models/related-property-path.ts b/app/models/related-property-path.ts new file mode 100644 index 00000000000..604c8e15e43 --- /dev/null +++ b/app/models/related-property-path.ts @@ -0,0 +1,54 @@ +import { attr } from '@ember-data/model'; +import { getOwner } from '@ember/application'; + +import GetLocalizedPropertyHelper from 'ember-osf-web/helpers/get-localized-property'; + +import OsfModel from './osf-model'; +import { LanguageText } from './index-card'; + +interface PropertyPath { + '@id': string; + resourceType: Array<{ '@id': string }>; + displayLabel: LanguageText[]; + shortFormLabel: LanguageText[]; +} + +export default class RelatedPropertyPathModel extends OsfModel { + @attr('string') propertyPathKey!: string; + @attr('number') cardSearchResultCount!: number; + @attr('array') osfmapPropertyPath!: string[]; + @attr('array') propertyPath!: PropertyPath[]; + + getLocalizedString = new GetLocalizedPropertyHelper(getOwner(this)); + + get shortFormLabel() { + const labelArray = []; + // propertyPath is likely an array of length 1, + // unless it is nested property(e.g. file's isContainedBy.funder, file's isContainedBy.license) + for (const property of this.propertyPath) { + const label = this.getLocalizedString.compute( + [property as unknown as Record, 'shortFormLabel'], + ); + if (label) { + labelArray.push(label); + } + } + return labelArray.join(','); + } + + get displayLabel() { + // propertyPath is likely an array of length 1, + // unless it is nested property(e.g. file's isContainedBy.funder, file's isContainedBy.license) + // in which case we just use the last property + const hash = this.propertyPath[this.propertyPath.length-1] as unknown as Record; + const label = this.getLocalizedString.compute([hash, 'displayLabel']); + return label || ''; + } + +} + +declare module 'ember-data/types/registries/model' { + export default interface ModelRegistry { + 'related-property-path': RelatedPropertyPathModel; + } // eslint-disable-line semi +} diff --git a/app/models/search-result.ts b/app/models/search-result.ts new file mode 100644 index 00000000000..d3a5fa9412e --- /dev/null +++ b/app/models/search-result.ts @@ -0,0 +1,288 @@ +import Model, { attr, belongsTo } from '@ember-data/model'; +import { inject as service } from '@ember/service'; +import { htmlSafe } from '@ember/template'; +import IntlService from 'ember-intl/services/intl'; +import { languageFromLanguageCode } from 'osf-components/components/file-metadata-manager/component'; + +import IndexCardModel from './index-card'; + +const textMatchEvidenceType = 'https://share.osf.io/vocab/2023/trove/TextMatchEvidence'; + +export interface IriMatchEvidence { + '@type': [string]; + matchingIri: string; + osfmapPropertyPath: string[]; +} + +export interface TextMatchEvidence { + '@type': [string]; + matchingHighlight: string; + osfmapPropertyPath: string[]; +} + +export default class SearchResultModel extends Model { + @service intl!: IntlService; + + @attr('array') matchEvidence!: Array; + @attr('number') cardSearchResultCount!: number; + + @belongsTo('index-card', { inverse: null }) + indexCard!: IndexCardModel; + + get resourceMetadata() { + return this.indexCard.get('resourceMetadata'); + } + + // TODO: double check how matchEvidence works + get context() { + if (this.matchEvidence) { + const matchEvidenceString = this.matchEvidence.reduce( + (acc, current) => acc.concat( + `${current.osfmapPropertyPath[0]}: ${current['@type'][0] === textMatchEvidenceType + ? (current as TextMatchEvidence).matchingHighlight + : (current as IriMatchEvidence).matchingIri}; `, + ), + '', + ); + return htmlSafe(matchEvidenceString); + } + return null; + } + + get displayTitle() { + if (this.resourceType === 'user') { + return this.resourceMetadata['name'][0]['@value']; + } else if (this.resourceType === 'file') { + return this.resourceMetadata['fileName'][0]['@value']; + } + return this.resourceMetadata['title']?.[0]['@value']; + } + + get fileTitle() { + if (this.resourceType === 'file') { + return this.resourceMetadata.title?.[0]['@value']; + } + return null; + } + + get description() { + return this.resourceMetadata.description?.[0]?.['@value']; + } + + get absoluteUrl() { + return this.resourceMetadata['@id']; + } + + // returns list of contributors for osf objects + // returns list of affiliated institutions for osf users + get affiliatedEntities() { + if (this.resourceType === 'user') { + // return something + } else if (this.resourceMetadata.creator) { + return this.resourceMetadata.creator?.map((item: any) => + ({ name: item.name[0]['@value'], absoluteUrl: item['@id'] })); + } else if (this.isContainedBy?.[0]?.creator) { + return this.isContainedBy[0].creator.map((item: any) => + ({ name: item.name?.[0]?.['@value'], absoluteUrl: item['@id'] })); + } + } + + get dateFields() { + switch (this.resourceType) { + case 'user': + return []; + case 'registration': + case 'registration_component': + return [ + { + label: this.intl.t('osf-components.search-result-card.date_registered'), + date: this.resourceMetadata.dateCreated?.[0]['@value'], + }, + { + label: this.intl.t('osf-components.search-result-card.date_modified'), + date: this.resourceMetadata.dateModified?.[0]['@value'], + }, + ]; + default: + return [ + { + label: this.intl.t('osf-components.search-result-card.date_created'), + date: this.resourceMetadata.dateCreated?.[0]['@value'], + }, + { + label: this.intl.t('osf-components.search-result-card.date_modified'), + date: this.resourceMetadata.dateModified?.[0]['@value'], + }, + ]; + } + } + + get isPartOf() { + return this.resourceMetadata.isPartOf; + } + + get isContainedBy() { + return this.resourceMetadata.isContainedBy; + } + + get isPartOfTitleAndUrl() { + if (this.isPartOf) { + return { + title: this.isPartOf[0]?.title?.[0]?.['@value'], + absoluteUrl: this.isPartOf[0]?.['@id'], + }; + } + return null; + } + + get isContainedByTitleAndUrl() { + if (this.isContainedBy) { + return { + title: this.isContainedBy[0]?.title?.[0]?.['@value'], + absoluteUrl: this.isContainedBy[0]?.['@id'], + }; + } + return null; + } + + get isPartOfCollection() { + const isPartOfCollection = this.resourceMetadata.isPartOfCollection; + if (isPartOfCollection) { + return { + title: this.resourceMetadata.isPartOfCollection?.[0]?.title?.[0]?.['@value'], + absoluteUrl: this.resourceMetadata.isPartOfCollection?.[0]?.['@id'], + }; + } + return null; + } + + get languageFromCode() { + if (this.resourceMetadata.language) { + return languageFromLanguageCode(this.resourceMetadata.language[0]['@value']); + } + return null; + } + + get funders() { + if (this.resourceMetadata.funder) { + return this.resourceMetadata.funder.map( (item: any) => ({ + name: item.name[0]['@value'], + identifier: item.identifier?.[0]['@value'], + })); + } + return null; + } + + get nodeFunders() { + if (this.resourceMetadata.isContainedBy?.[0]?.funder) { + return this.resourceMetadata.isContainedBy[0].funder.map( (item: any) => ({ + name: item.name[0]['@value'], + identifier: item.identifier?.[0]['@value'], + })); + } + return null; + } + + get provider() { + if (this.resourceMetadata.publisher) { + return { + name: this.resourceMetadata.publisher[0]?.name?.[0]['@value'], + identifier: this.resourceMetadata.publisher[0]['@id'], + }; + } + return null; + } + + get doi() { + return this.indexCard.get('resourceIdentifier').filter(id => id.includes('https://doi.org')); + } + + get license() { + if (this.resourceMetadata.rights) { + return { + name: this.resourceMetadata.rights?.[0]?.name?.[0]?.['@value'], + identifier: this.resourceMetadata.rights?.[0]?.['@id'], + }; + } + return null; + } + + get nodeLicense() { + if (this.resourceMetadata.isContainedBy?.[0]?.rights) { + return { + name: this.resourceMetadata.isContainedBy[0].rights?.[0]?.name?.[0]?.['@value'], + identifier: this.resourceMetadata.rights?.[0]?.['@id'] || + this.resourceMetadata.isContainedBy[0].rights[0]?.['@id'], + }; + } + return null; + } + + get resourceType() { + const types = this.resourceMetadata.resourceType.map( (item: any) => item['@id']); + if (types.includes('Project')) { + return 'project'; + } else if (types.includes('Registration')) { + return 'registration'; + } else if (types.includes('Preprint')) { + return 'preprint'; + } else if (types.includes('ProjectComponent')) { + return 'project_component'; + } else if (types.includes('RegistrationComponent')) { + return 'registration_component'; + } else if (types.includes('Person')) { + return 'user'; + } else if(types.includes('File')) { + return 'file'; + } + return 'unknown'; + } + + get orcids() { + if (this.resourceMetadata.identifier) { + const orcids = this.resourceMetadata.identifier.filter( + (item: any) => item['@value'].includes('http://orcid.org/'), + ); + return orcids.map( (item: any) => item['@value']); + } + return null; + } + + get resourceNature() { + return this.resourceMetadata.resourceNature?.[0]?.displayLabel?.[0]?.['@value']; + } + + get hasDataResource() { + return this.resourceMetadata.hasDataResource; + } + + get hasAnalyticCodeResource() { + return this.resourceMetadata.hasAnalyticCodeResource; + } + + get hasMaterialsResource() { + return this.resourceMetadata.hasMaterialsResource; + } + + get hasPapersResource() { + return this.resourceMetadata.hasPapersResource; + } + + get hasSupplementalResource() { + return this.resourceMetadata.hasSupplementalResource; + } + + get registrationTemplate() { + return this.resourceMetadata.conformsTo?.[0]?.title?.[0]?.['@value']; + } + + get isWithdrawn() { + return this.resourceMetadata.dateWithdrawn || this.resourceMetadata['https://osf.io/vocab/2022/withdrawal']; + } +} + +declare module 'ember-data/types/registries/model' { + export default interface ModelRegistry { + 'search-result': SearchResultModel; + } // eslint-disable-line semi +} diff --git a/app/preprints/controller.ts b/app/preprints/controller.ts new file mode 100644 index 00000000000..77d77211532 --- /dev/null +++ b/app/preprints/controller.ts @@ -0,0 +1,9 @@ + +import Controller from '@ember/controller'; +import { inject as service } from '@ember/service'; + +import Theme from 'ember-osf-web/services/theme'; + +export default class PreprintController extends Controller { + @service theme!: Theme; +} diff --git a/app/preprints/discover/controller.ts b/app/preprints/discover/controller.ts new file mode 100644 index 00000000000..20563261c84 --- /dev/null +++ b/app/preprints/discover/controller.ts @@ -0,0 +1,34 @@ + +import Store from '@ember-data/store'; +import Controller from '@ember/controller'; +import { action } from '@ember/object'; +import { inject as service } from '@ember/service'; +import { tracked } from '@glimmer/tracking'; +import config from 'ember-get-config'; + +import Theme from 'ember-osf-web/services/theme'; +import pathJoin from 'ember-osf-web/utils/path-join'; +import { OnSearchParams } from 'osf-components/components/search-page/component'; + +export default class PreprintDiscoverController extends Controller { + @service store!: Store; + @service theme!: Theme; + + @tracked cardSearchText?: string = ''; + @tracked sort?: string = '-relevance'; + + queryParams = ['cardSearchText', 'page', 'sort']; + + get defaultQueryOptions() { + return { + // TODO: get this from the API? + publisher: pathJoin(config.OSF.url, 'preprints', this.theme.id), + }; + } + + @action + onSearch(queryOptions: OnSearchParams) { + this.cardSearchText = queryOptions.cardSearchText; + this.sort = queryOptions.sort; + } +} diff --git a/app/preprints/discover/route.ts b/app/preprints/discover/route.ts new file mode 100644 index 00000000000..529014833ca --- /dev/null +++ b/app/preprints/discover/route.ts @@ -0,0 +1,37 @@ +import Store from '@ember-data/store'; +import Route from '@ember/routing/route'; +import RouterService from '@ember/routing/router-service'; +import { inject as service } from '@ember/service'; + +import Theme from 'ember-osf-web/services/theme'; + +export default class PreprintDiscoverRoute extends Route { + @service store!: Store; + @service theme!: Theme; + @service router!: RouterService; + + buildRouteInfoMetadata() { + return { + osfMetrics: { + isSearch: true, + providerId: this.theme.id, + }, + }; + } + + async model(args: any) { + try { + const provider = await this.store.findRecord('preprint-provider', args.provider_id); + this.theme.providerType = 'preprint'; + this.theme.id = args.provider_id; + return provider; + } catch (e) { + this.router.transitionTo('not-found', `preprints/${args.provider_id}/discover`); + return null; + } + } + + deactivate() { + this.theme.reset(); + } +} diff --git a/app/preprints/discover/template.hbs b/app/preprints/discover/template.hbs new file mode 100644 index 00000000000..6a0bc4bc5cc --- /dev/null +++ b/app/preprints/discover/template.hbs @@ -0,0 +1,14 @@ +{{page-title (t 'preprints.discover.title')}} +
+ +
diff --git a/app/preprints/route.ts b/app/preprints/route.ts new file mode 100644 index 00000000000..d72fd19a9e2 --- /dev/null +++ b/app/preprints/route.ts @@ -0,0 +1,8 @@ +import Route from '@ember/routing/route'; +import { inject as service } from '@ember/service'; + +import Theme from 'ember-osf-web/services/theme'; + +export default class Preprints extends Route { + @service theme!: Theme; +} diff --git a/app/preprints/template.hbs b/app/preprints/template.hbs new file mode 100644 index 00000000000..21847e39d8d --- /dev/null +++ b/app/preprints/template.hbs @@ -0,0 +1,9 @@ +{{page-title this.theme.provider.providerTitle replace=true}} +
+ + {{outlet}} +
diff --git a/app/router.ts b/app/router.ts index 06be6e4c76a..01aab62a1f7 100644 --- a/app/router.ts +++ b/app/router.ts @@ -20,9 +20,14 @@ Router.map(function() { this.route('home', { path: '/' }); this.route('dashboard'); this.route('goodbye'); + this.route('search'); this.route('institutions', function() { + // this.route('discover', { path: '/:institution_id' }); this.route('dashboard', { path: '/:institution_id/dashboard' }); }); + // this.route('preprints', function() { + // this.route('discover', { path: '/:provider_id/discover' }); + // }); this.route('register'); this.route('settings', function() { this.route('profile', function() { diff --git a/app/search/controller.ts b/app/search/controller.ts new file mode 100644 index 00000000000..62edd10c54d --- /dev/null +++ b/app/search/controller.ts @@ -0,0 +1,21 @@ +import Controller from '@ember/controller'; +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { OnSearchParams, ResourceTypeFilterValue } from 'osf-components/components/search-page/component'; + +export default class SearchController extends Controller { + @tracked q?: string = ''; + @tracked sort?: string = '-relevance'; + @tracked resourceType?: ResourceTypeFilterValue | null = null; + @tracked page?: string = ''; + + queryParams = ['q', 'page', 'sort', 'resourceType']; + + @action + onSearch(queryOptions: OnSearchParams) { + this.q = queryOptions.cardSearchText; + this.sort = queryOptions.sort; + this.resourceType = queryOptions.resourceType; + this.page = queryOptions.page; + } +} diff --git a/app/search/route.ts b/app/search/route.ts new file mode 100644 index 00000000000..0a451bd304d --- /dev/null +++ b/app/search/route.ts @@ -0,0 +1,11 @@ +import Route from '@ember/routing/route'; + +export default class Search extends Route { + buildRouteInfoMetadata() { + return { + osfMetrics: { + isSearch: true, + }, + }; + } +} diff --git a/app/search/template.hbs b/app/search/template.hbs new file mode 100644 index 00000000000..f6c7bab398a --- /dev/null +++ b/app/search/template.hbs @@ -0,0 +1,12 @@ +{{page-title (t 'search.page-title')}} + + diff --git a/app/serializers/index-card-search.ts b/app/serializers/index-card-search.ts new file mode 100644 index 00000000000..5b86f0c5600 --- /dev/null +++ b/app/serializers/index-card-search.ts @@ -0,0 +1,10 @@ +import ShareSerializer from './share-serializer'; + +export default class IndexCardSearchSerializer extends ShareSerializer { +} + +declare module 'ember-data/types/registries/serializer' { + export default interface SerializerRegistry { + 'index-card-search': IndexCardSearchSerializer; + } // eslint-disable-line semi +} diff --git a/app/serializers/index-card.ts b/app/serializers/index-card.ts new file mode 100644 index 00000000000..9b5b13575f5 --- /dev/null +++ b/app/serializers/index-card.ts @@ -0,0 +1,10 @@ +import ShareSerializer from './share-serializer'; + +export default class IndexCardSerializer extends ShareSerializer { +} + +declare module 'ember-data/types/registries/serializer' { + export default interface SerializerRegistry { + 'index-card': IndexCardSerializer; + } // eslint-disable-line semi +} diff --git a/app/serializers/index-value-search.ts b/app/serializers/index-value-search.ts new file mode 100644 index 00000000000..fca2709c0f7 --- /dev/null +++ b/app/serializers/index-value-search.ts @@ -0,0 +1,10 @@ +import ShareSerializer from './share-serializer'; + +export default class IndexValueSearchSerializer extends ShareSerializer { +} + +declare module 'ember-data/types/registries/serializer' { + export default interface SerializerRegistry { + 'index-value-search': IndexValueSearchSerializer; + } // eslint-disable-line semi +} diff --git a/app/serializers/related-property-path.ts b/app/serializers/related-property-path.ts new file mode 100644 index 00000000000..8bcadfc2161 --- /dev/null +++ b/app/serializers/related-property-path.ts @@ -0,0 +1,10 @@ +import ShareSerializer from './share-serializer'; + +export default class RelatedPropertyPathSerializer extends ShareSerializer { +} + +declare module 'ember-data/types/registries/serializer' { + export default interface SerializerRegistry { + 'related-property-path': RelatedPropertyPathSerializer; + } // eslint-disable-line semi +} diff --git a/app/serializers/search-result.ts b/app/serializers/search-result.ts new file mode 100644 index 00000000000..20208cd602e --- /dev/null +++ b/app/serializers/search-result.ts @@ -0,0 +1,10 @@ +import ShareSerializer from './share-serializer'; + +export default class SearchResultSerializer extends ShareSerializer { +} + +declare module 'ember-data/types/registries/serializer' { + export default interface SerializerRegistry { + 'search-result': SearchResultSerializer; + } // eslint-disable-line semi +} diff --git a/app/serializers/share-serializer.ts b/app/serializers/share-serializer.ts new file mode 100644 index 00000000000..8db52140260 --- /dev/null +++ b/app/serializers/share-serializer.ts @@ -0,0 +1,12 @@ +import JSONAPISerializer from '@ember-data/serializer/json-api'; +import { camelize } from '@ember/string'; + +export default class ShareSerializer extends JSONAPISerializer { + keyForAttribute(key: string) { + return camelize(key); + } + + keyForRelationship(key: string) { + return camelize(key); + } +} diff --git a/app/services/theme.ts b/app/services/theme.ts index dbbdcc33a3d..6777ed08bfd 100644 --- a/app/services/theme.ts +++ b/app/services/theme.ts @@ -2,6 +2,7 @@ import Store from '@ember-data/store'; import { assert } from '@ember/debug'; import { computed } from '@ember/object'; import Service, { inject as service } from '@ember/service'; +import { tracked } from '@glimmer/tracking'; import config from 'ember-get-config'; import Provider from 'ember-osf-web/models/provider'; @@ -36,13 +37,13 @@ const settings: { [P in ProviderType]: Setting } = { export default class Theme extends Service { @service store!: Store; - id = defaultProvider; - defaultProvider = defaultProvider; + @tracked id = defaultProvider; + @tracked defaultProvider = defaultProvider; - providerType?: ProviderType; + @tracked providerType?: ProviderType; // If we're using a provider domain - isDomain = window.isProviderDomain; + @tracked isDomain = window.isProviderDomain; // If we're using a branded provider @computed('id') diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss index aaf92e733c5..fac0785e012 100644 --- a/app/styles/_variables.scss +++ b/app/styles/_variables.scss @@ -156,3 +156,9 @@ $color-black: #000; .bg-color-grey { background-color: $color-grey; } + +/* +* Affiliated Institutions Color Palette +*/ + +$orcid-logo-color: #a6ce39; diff --git a/lib/app-components/addon/components/branded-navbar/component.ts b/lib/app-components/addon/components/branded-navbar/component.ts index b4695b5b57e..286b82d4d43 100644 --- a/lib/app-components/addon/components/branded-navbar/component.ts +++ b/lib/app-components/addon/components/branded-navbar/component.ts @@ -3,6 +3,7 @@ import Component from '@ember/component'; import { action, computed } from '@ember/object'; import { alias } from '@ember/object/computed'; import { inject as service } from '@ember/service'; +import config from 'ember-get-config'; import Intl from 'ember-intl/services/intl'; import Media from 'ember-responsive'; import Session from 'ember-simple-auth/services/session'; @@ -10,13 +11,20 @@ import { tracked } from 'tracked-built-ins'; import { serviceLinks } from 'ember-osf-web/const/service-links'; import { layout, requiredAction } from 'ember-osf-web/decorators/component'; +import BrandModel from 'ember-osf-web/models/brand'; +import PreprintProviderModel from 'ember-osf-web/models/preprint-provider'; +import ProviderModel from 'ember-osf-web/models/provider'; import Analytics from 'ember-osf-web/services/analytics'; +import CurrentUserService from 'ember-osf-web/services/current-user'; import Theme from 'ember-osf-web/services/theme'; + import styles from './styles'; import template from './template'; type ObjectType = 'collection' | 'preprint' | 'registration'; +const osfURL = config.OSF.url; + @layout(template, styles) @tagName('') export default class BrandedNavbar extends Component { @@ -25,6 +33,7 @@ export default class BrandedNavbar extends Component { @service media!: Media; @service session!: Session; @service theme!: Theme; + @service currentUser!: CurrentUserService; brandRoute!: string; objectType!: ObjectType; @@ -35,20 +44,41 @@ export default class BrandedNavbar extends Component { myProjectsUrl = serviceLinks.myProjects; + get reviewUrl() { + return `${osfURL}reviews`; + } + + get submitPreprintUrl() { + return this.theme.isProvider ? `${osfURL}preprints/${this.theme.id}/submit/` : `${osfURL}preprints/submit/`; + } + + @alias('theme.provider') provider!: ProviderModel; @alias('theme.provider.id') providerId!: string; + @alias('theme.provider.brand.primaryColor') brandPrimaryColor!: BrandModel; - @computed('intl.locale', 'theme.provider', 'translateKey') - get brandTitle(): string { - const { name } = this.theme.provider!; + get useWhiteBackground(): boolean { + const { provider } = this.theme; + if (provider) { + return this.theme.providerType === 'preprint' && ['biohackrxiv', 'nutrixiv'].includes(provider.id); + } + return false; + } - return this.intl.t(this.translateKey, { name }); + @computed('intl.locale', 'theme.{providerType,provider.providerTitle}', 'translateKey') + get brandTitle(): string { + if (this.theme.providerType === 'collection') { + const { name } = this.theme.provider!; + return this.intl.t(this.translateKey, { name }); + } else { // preprint + return (this.theme.provider as PreprintProviderModel).providerTitle; + } } @requiredAction loginAction!: () => void; @action toggleSecondaryNavigation() { - this.toggleProperty('showNavLinks'); + this.showNavLinks = !this.showNavLinks; } get isMobileOrTablet() { diff --git a/lib/app-components/addon/components/branded-navbar/styles.scss b/lib/app-components/addon/components/branded-navbar/styles.scss index 8653354bd74..53ae3242693 100644 --- a/lib/app-components/addon/components/branded-navbar/styles.scss +++ b/lib/app-components/addon/components/branded-navbar/styles.scss @@ -63,6 +63,9 @@ background-position-y: center; background-size: contain; background-repeat: no-repeat; + // Preprints uses the brand's navbar logo + // Collections uses the theme-styles component and will overwrite this + background-image: var(--navbar-logo-img-url); } .NavBarBuffer { @@ -103,3 +106,38 @@ right: 0; } } + +// preprint-branded navbar uses brand relationship and not custom CSS +// Extra specificity needed to override the default styles set in app/styles/_components.scss +// branded-navbar dark/light text only used for preprint providers, as collection providers currently use custom CSS +.preprint-branded-navbar.preprint-branded-navbar { + background-color: var(--primary-color); + background-image: none; + + .secondary-navigation { + border-color: transparent; + } + + &.light-text { + a, + :global(.secondary-nav-dropdown) { + color: $color-text-white !important; + } + } + + &.dark-text { + a, + :global(.secondary-nav-dropdown) { + color: $color-text-black !important; + } + } +} + +.white-background-branded-navbar.white-background-branded-navbar.white-background-branded-navbar { + background-color: #fff; + + a, + :global(.secondary-nav-dropdown) { + color: $color-text-black !important; + } +} diff --git a/lib/app-components/addon/components/branded-navbar/template.hbs b/lib/app-components/addon/components/branded-navbar/template.hbs index c9db3e9233a..fcf8a480c0e 100644 --- a/lib/app-components/addon/components/branded-navbar/template.hbs +++ b/lib/app-components/addon/components/branded-navbar/template.hbs @@ -1,6 +1,9 @@
{{/if}} diff --git a/lib/osf-components/addon/components/open-badges-list/open-badge-card/template.hbs b/lib/osf-components/addon/components/open-badges-list/open-badge-card/template.hbs index e77dd16ce03..f3b9c0ea9a3 100644 --- a/lib/osf-components/addon/components/open-badges-list/open-badge-card/template.hbs +++ b/lib/osf-components/addon/components/open-badges-list/open-badge-card/template.hbs @@ -2,8 +2,9 @@ - {{#unless this.isMobile}} -
- {{t 'osf-components.open-badges-list.title'}} -
- {{/unless}} - - - - - - +{{#if @verticalLayout}} +
+ {{#unless this.isMobile}} +
+ {{t 'osf-components.open-badges-list.title'}} +
+ {{/unless}} + + + + + +
+{{else}} +
+ {{t 'osf-components.open-badges-list.title'}} +
+
+ + + + + +
+{{/if}} diff --git a/lib/osf-components/addon/components/osf-dialog/heading/styles.scss b/lib/osf-components/addon/components/osf-dialog/heading/styles.scss index 18f21b6f9d6..43ffb9281f0 100644 --- a/lib/osf-components/addon/components/osf-dialog/heading/styles.scss +++ b/lib/osf-components/addon/components/osf-dialog/heading/styles.scss @@ -3,14 +3,12 @@ justify-content: space-between; max-height: 15vh; overflow-y: auto; - border-bottom: 1px solid #ddd; } .Heading { padding: 1rem 0.75rem 1rem 1.25rem; margin: 0; - color: $color-text-gray-blue; font-size: 24px; font-weight: 600; @@ -18,4 +16,5 @@ .CloseButton.CloseButton { align-self: flex-start; + margin: 10px; } diff --git a/lib/osf-components/addon/components/osf-layout/component.ts b/lib/osf-components/addon/components/osf-layout/component.ts index 10c29704d0c..775193dd3ea 100644 --- a/lib/osf-components/addon/components/osf-layout/component.ts +++ b/lib/osf-components/addon/components/osf-layout/component.ts @@ -47,6 +47,11 @@ export default class OsfLayout extends Component { this.toggleProperty('sidenavGutterClosed'); } + @action + openSidenavGutter() { + this.set('sidenavGutterClosed', false); + } + @action toggleMetadata() { this.toggleProperty('metadataGutterClosed'); diff --git a/lib/osf-components/addon/components/osf-layout/template.hbs b/lib/osf-components/addon/components/osf-layout/template.hbs index 65e7f382bfd..0bf4dc3d098 100644 --- a/lib/osf-components/addon/components/osf-layout/template.hbs +++ b/lib/osf-components/addon/components/osf-layout/template.hbs @@ -2,6 +2,7 @@ heading=(element 'div') sidenavGutterClosed=this.sidenavGutterClosed toggleSidenav=(action this.toggleSidenav) + openSidenavGutter=(action this.openSidenavGutter) metadataGutterClosed=this.metadataGutterClosed toggleMetadata=(action this.toggleMetadata) )}} @@ -18,6 +19,7 @@ @leftClosed={{this.sidenavGutterClosed}} @rightMode={{this.metadataGutterMode}} @rightClosed={{this.metadataGutterClosed}} + ...attributes as |gutters| > {{yield (hash diff --git a/lib/osf-components/addon/components/osf-navbar/auth-dropdown/styles.scss b/lib/osf-components/addon/components/osf-navbar/auth-dropdown/styles.scss index 2ca45b12ba3..f61e96a984f 100644 --- a/lib/osf-components/addon/components/osf-navbar/auth-dropdown/styles.scss +++ b/lib/osf-components/addon/components/osf-navbar/auth-dropdown/styles.scss @@ -28,6 +28,7 @@ .auth-trigger.auth-trigger.auth-trigger.auth-trigger { padding: 11px 15px; + cursor: pointer; } @media (max-width: 767px) { diff --git a/lib/osf-components/addon/components/osf-navbar/x-links/component.ts b/lib/osf-components/addon/components/osf-navbar/x-links/component.ts index 8dbb3e70094..b713e643914 100644 --- a/lib/osf-components/addon/components/osf-navbar/x-links/component.ts +++ b/lib/osf-components/addon/components/osf-navbar/x-links/component.ts @@ -15,7 +15,6 @@ const osfURL = config.OSF.url; export default class XLinks extends Component { @service session!: Session; - searchURL = `${osfURL}search/`; myProjectsURL = `${osfURL}myprojects/`; myRegistrationsURL = `${osfURL}myprojects/#registrations`; supportURL = `${config.support.faqPageUrl}`; diff --git a/lib/osf-components/addon/components/osf-navbar/x-links/template.hbs b/lib/osf-components/addon/components/osf-navbar/x-links/template.hbs index 5dc77d9e6cf..e43191e9d0e 100644 --- a/lib/osf-components/addon/components/osf-navbar/x-links/template.hbs +++ b/lib/osf-components/addon/components/osf-navbar/x-links/template.hbs @@ -15,13 +15,6 @@ text=(t 'navbar.my_registrations') onClicked=this.onLinkClicked ) - search=(component 'osf-navbar/x-links/hyper-link' - this.searchURL - analyticsLabel='Search' - tagName='li' - text=(t 'navbar.search') - onClicked=this.onLinkClicked - ) support=(component 'osf-navbar/x-links/hyper-link' this.supportURL analyticsLabel='Support' @@ -42,7 +35,16 @@ {{yield links}} {{else}} - +
  • + + {{t 'navbar.search'}} + +
    • {{/if}} diff --git a/lib/osf-components/addon/components/search-page/component.ts b/lib/osf-components/addon/components/search-page/component.ts new file mode 100644 index 00000000000..4719bfb774d --- /dev/null +++ b/lib/osf-components/addon/components/search-page/component.ts @@ -0,0 +1,286 @@ +import { tracked } from '@glimmer/tracking'; +import Component from '@glimmer/component'; +import { inject as service } from '@ember/service'; +import IndexCardModel from 'ember-osf-web/models/index-card'; +import { waitFor } from '@ember/test-waiters'; +import { taskFor } from 'ember-concurrency-ts'; +import { task, timeout } from 'ember-concurrency'; +import Intl from 'ember-intl/services/intl'; +import { A } from '@ember/array'; +import Store from '@ember-data/store'; +import { action } from '@ember/object'; +import Media from 'ember-responsive'; + +import { ShareMoreThanTenThousand } from 'ember-osf-web/models/index-card-search'; +import SearchResultModel from 'ember-osf-web/models/search-result'; +import ProviderModel from 'ember-osf-web/models/provider'; +import RelatedPropertyPathModel from 'ember-osf-web/models/related-property-path'; +import uniqueId from 'ember-osf-web/utils/unique-id'; + +import { booleanFilterProperties } from './filter-facet/component'; + +interface ResourceTypeOption { + display: string; + value?: ResourceTypeFilterValue | null; +} + +export enum ResourceTypeFilterValue { + Registrations = 'Registration,RegistrationComponent', + Projects = 'Project,ProjectComponent', + Preprints = 'Preprint', + Users = 'Agent', + Files = 'File', +} + +interface SortOption { + display: string; + value: string; +} + +export interface Filter { + propertyVisibleLabel: string; + propertyShortFormLabel: string; // OSFMAP shorthand label + value: string; + label: string; +} + +export interface OnSearchParams { + cardSearchText?: string; + page?: string; + sort?: string; + resourceType?: ResourceTypeFilterValue | null; +} + +interface SearchArgs { + onSearch?: (obj: OnSearchParams) => void; + cardSearchText: string; + cardSearchFilters: Filter[]; + propertyCard: IndexCardModel; + propertySearch: SearchResultModel; + toggleFilter: (filter: Filter) => void; + sort: string; + resourceType?: ResourceTypeFilterValue; + defaultQueryOptions: Record; + provider?: ProviderModel; + showResourceTypeFilter: boolean; + page: string; +} + +const searchDebounceTime = 100; + +export default class SearchPage extends Component { + @service intl!: Intl; + @service toast!: Toastr; + @service store!: Store; + @service media!: Media; + + @tracked cardSearchText?: string; + @tracked searchResults?: SearchResultModel[]; + @tracked relatedProperties?: RelatedPropertyPathModel[] = []; + @tracked page?: string = ''; + @tracked totalResultCount?: string | number; + @tracked firstPageCursor?: string | null; + @tracked prevPageCursor?: string | null; + @tracked nextPageCursor?: string | null; + + @tracked filterQueryObject: Record = {}; + + constructor( owner: unknown, args: SearchArgs) { + super(owner, args); + this.cardSearchText = this.args.cardSearchText; + this.sort = this.args.sort; + this.resourceType = this.args.resourceType; + taskFor(this.search).perform(); + } + + showTooltip1?: boolean; + showTooltip2?: boolean; + showTooltip3?: boolean; + + sidePanelToggleId = uniqueId(['side-panel-toggle']); + leftPanelObjectDropdownId = uniqueId(['left-panel-object-dropdown']); + firstTopbarObjectTypeLinkId = uniqueId(['first-topbar-object-type-link']); + searchInputWrapperId = uniqueId(['search-input-wrapper']); + leftPanelHeaderId = uniqueId(['left-panel-header']); + firstFilterId = uniqueId(['first-filter']); + + get tooltipTarget1Id() { + if (this.showSidePanelToggle) { + return this.sidePanelToggleId; + } + if (this.args.showResourceTypeFilter) { + return this.firstTopbarObjectTypeLinkId; + } + return this.searchInputWrapperId; + } + + get tooltipTarget2Id() { + if (this.showSidePanelToggle) { + return this.sidePanelToggleId; + } + return this.leftPanelHeaderId; + } + + get tooltipTarget3Id() { + if (this.showSidePanelToggle) { + return this.sidePanelToggleId; + } + if (this.relatedProperties) { + return this.firstFilterId; + } + return this.leftPanelHeaderId; + } + + get showSidePanelToggle() { + return this.media.isMobile || this.media.isTablet; + } + + get selectedResourceTypeOption() { + return this.resourceTypeOptions.find(option => option.value === this.resourceType); + } + + get showResultCountMiddle() { + return this.totalResultCount && !this.args.showResourceTypeFilter && !this.showSidePanelToggle; + } + + get showResultCountLeft() { + return this.totalResultCount && this.args.showResourceTypeFilter; + } + + get selectedSortOption() { + return this.sortOptions.find(option => option.value === this.sort);// || this.sortOptions[0]; + } + + // Resource type + resourceTypeOptions: ResourceTypeOption[] = [ + { + display: this.intl.t('search.resource-type.all'), + value: null, + }, + { + display: this.intl.t('search.resource-type.projects'), + value: ResourceTypeFilterValue.Projects, + }, + { + display: this.intl.t('search.resource-type.registrations'), + value: ResourceTypeFilterValue.Registrations, + }, + { + display: this.intl.t('search.resource-type.preprints'), + value: ResourceTypeFilterValue.Preprints, + }, + { + display: this.intl.t('search.resource-type.files'), + value: ResourceTypeFilterValue.Files, + }, + { + display: this.intl.t('search.resource-type.users'), + value: ResourceTypeFilterValue.Users, + }, + ]; + + // Sort + sortOptions: SortOption[] = [ + { display: this.intl.t('search.sort.relevance'), value: '-relevance' }, + { display: this.intl.t('search.sort.created-date-descending'), value: '-dateCreated' }, + { display: this.intl.t('search.sort.created-date-ascending'), value: 'dateCreated' }, + { display: this.intl.t('search.sort.modified-date-descending'), value: '-dateModified' }, + { display: this.intl.t('search.sort.modified-date-ascending'), value: 'dateModified' }, + ]; + + @tracked resourceType?: ResourceTypeFilterValue | null; + @tracked sort: string; + @tracked activeFilters = A([]); + + @task({ restartable: true }) + @waitFor + async search() { + try { + const cardSearchText = this.cardSearchText; + const { page, sort, activeFilters, resourceType } = this; + let filterQueryObject = activeFilters.reduce((acc, filter) => { + // boolean filters should look like cardSearchFilter[hasDataResource][is-present] + if (booleanFilterProperties.includes(filter.propertyShortFormLabel)) { + acc[filter.propertyShortFormLabel] = {}; + acc[filter.propertyShortFormLabel][filter.value] = true; + return acc; + } + // other filters should look like cardSearchFilter[propertyName]=IRI + const currentValue = acc[filter.propertyShortFormLabel]; + acc[filter.propertyShortFormLabel] = currentValue ? currentValue.concat(filter.value) : [filter.value]; + return acc; + }, {} as { [key: string]: any }); + let resourceTypeFilter = this.resourceType as string; + // If resourceType is null, we want to search all resource types + if (!resourceTypeFilter) { + resourceTypeFilter = Object.values(ResourceTypeFilterValue).join(','); + } + filterQueryObject['resourceType'] = resourceTypeFilter; + filterQueryObject = { ...filterQueryObject, ...this.args.defaultQueryOptions }; + this.filterQueryObject = filterQueryObject; + const searchResult = await this.store.queryRecord('index-card-search', { + cardSearchText, + 'page[cursor]': page, + sort, + cardSearchFilter: filterQueryObject, + 'page[size]': 10, + }); + await searchResult.relatedProperties; + this.relatedProperties = searchResult.relatedProperties; + this.firstPageCursor = searchResult.firstPageCursor; + this.nextPageCursor = searchResult.nextPageCursor; + this.prevPageCursor = searchResult.prevPageCursor; + this.searchResults = searchResult.searchResultPage.toArray(); + this.totalResultCount = searchResult.totalResultCount === ShareMoreThanTenThousand ? '10,000+' : + searchResult.totalResultCount; + if (this.args.onSearch) { + this.args.onSearch({cardSearchText, sort, resourceType, page}); + } + } catch (e) { + this.toast.error(e); + } + } + + @action + switchPage(pageCursor: string) { + this.page = pageCursor; + taskFor(this.search).perform(); + document.querySelector('[data-test-topbar-wrapper]')?.scrollIntoView({ behavior: 'smooth' }); + } + + @task({ restartable: true }) + @waitFor + async doDebounceSearch() { + await timeout(searchDebounceTime); + taskFor(this.search).perform(); + } + + @action + toggleFilter(filter: Filter) { + const filterIndex = this.activeFilters.findIndex( + f => f.propertyShortFormLabel === filter.propertyShortFormLabel && f.value === filter.value, + ); + if (filterIndex > -1) { + this.activeFilters.removeAt(filterIndex); + } else { + this.activeFilters.pushObject(filter); + } + this.page = ''; + taskFor(this.search).perform(); + } + + @action + updateSort(sortOption: SortOption) { + this.sort = sortOption.value; + this.page = ''; + taskFor(this.search).perform(); + } + + @action + updateResourceType(resourceTypeOption: ResourceTypeOption) { + this.resourceType = resourceTypeOption.value; + this.activeFilters = A([]); + this.page = ''; + taskFor(this.search).perform(); + } +} diff --git a/lib/osf-components/addon/components/search-page/filter-facet/after-options/template.hbs b/lib/osf-components/addon/components/search-page/filter-facet/after-options/template.hbs new file mode 100644 index 00000000000..9b05720a2e5 --- /dev/null +++ b/lib/osf-components/addon/components/search-page/filter-facet/after-options/template.hbs @@ -0,0 +1,5 @@ +{{#if @fetchValues.isRunning}} + +{{else if @hasMoreValues}} + +{{/if}} diff --git a/lib/osf-components/addon/components/search-page/filter-facet/component.ts b/lib/osf-components/addon/components/search-page/filter-facet/component.ts new file mode 100644 index 00000000000..ebecb1bfb07 --- /dev/null +++ b/lib/osf-components/addon/components/search-page/filter-facet/component.ts @@ -0,0 +1,159 @@ +import Store from '@ember-data/store'; +import { action } from '@ember/object'; +import { inject as service } from '@ember/service'; +import { waitFor } from '@ember/test-waiters'; +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { task, timeout } from 'ember-concurrency'; +import { taskFor } from 'ember-concurrency-ts'; +import IntlService from 'ember-intl/services/intl'; +import RelatedPropertyPathModel from 'ember-osf-web/models/related-property-path'; + +import SearchResultModel from 'ember-osf-web/models/search-result'; + +import { Filter } from '../component'; + +interface FakeIndexCard { + resourceId: string; + indexCard: { + label: string, + resourceId: string, + }; +} + + +interface FilterFacetArgs { + cardSearchText: string; + cardSearchFilter: Filter[]; + property: RelatedPropertyPathModel; + toggleFilter: (filter: Filter) => void; +} + +const searchDebounceTime = 500; + +export const booleanFilterProperties = [ + 'hasAnalyticCodeResource', // registrations + 'hasMaterialsResource', // registrations + 'hasPapersResource', // registrations + 'hasSupplementalResource', // registrations + 'hasDataResource', // registrations and preprints + 'hasPreregisteredAnalysisPlan', // preprints + 'hasPreregisteredStudyDesign', // preprints + 'isSupplementedBy', // preprints + 'supplements', // projects +]; + +export default class FilterFacet extends Component { + @service store!: Store; + @service intl!: IntlService; + @service toast!: Toastr; + + @tracked page = ''; + @tracked sort = '-relevance'; + @tracked collapsed = true; + @tracked filterableValues: SearchResultModel[] | FakeIndexCard[] = []; + @tracked modalValueOptions: SearchResultModel[] = []; + @tracked seeMoreModalShown = false; + @tracked selectedProperty: SearchResultModel | null = null; + @tracked showSeeMoreButton = false; + @tracked filterString = ''; + @tracked hasMoreValueOptions = false; + @tracked nextPageCursor = ''; + + @action + toggleFacet() { + if (this.filterableValues.length === 0 && !taskFor(this.fetchFacetValues).lastComplete) { + taskFor(this.fetchFacetValues).perform(); + } + this.collapsed = !this.collapsed; + } + + @action + updateSelectedProperty(property: SearchResultModel) { + this.selectedProperty = property; + } + + @action + openSeeMoreModal() { + this.seeMoreModalShown = true; + this.modalValueOptions = [...this.filterableValues] as SearchResultModel[]; + } + + @task + @waitFor + async applySelectedProperty() { + if (this.selectedProperty) { + const { toggleFilter, property } = this.args; + const card = this.selectedProperty.indexCard; + const filter = { + propertyVisibleLabel: property.displayLabel, + propertyShortFormLabel: property.shortFormLabel, + label: card.get('label'), + value: card.get('resourceId'), + }; + toggleFilter(filter); + this.selectedProperty = null; + } + } + + @task({ restartable: true }) + @waitFor + async debouncedValueSearch(filterString: string) { + await timeout(searchDebounceTime); + this.filterString = filterString; + this.page = ''; + this.modalValueOptions = []; + await taskFor(this.fetchFacetValues).perform(); + } + + @task + @waitFor + async loadMoreValues() { + this.page = this.nextPageCursor; + await taskFor(this.fetchFacetValues).perform(); + } + + @task + @waitFor + async fetchFacetValues() { + const { cardSearchText, cardSearchFilter, property } = this.args; + const { page, sort, filterString } = this; + // If the property is a boolean filter (e.g. hasDataResource), we don't want to fetch IRI values + // SHARE API filters on these properties using: + // `share.osf.io/api/v3/index-card-search?cardSearchFilter[hasDataResource][is-present]` + // or cardSearchFilter[hasDataResource][is-absent] (although this one is not used in the app) + if (booleanFilterProperties.includes(property.shortFormLabel)) { + this.filterableValues = [ + { + resourceId: 'is-present', + indexCard: { + label: this.intl.t('search.filter-facet.has-resource', { resource: property.displayLabel }), + resourceId: 'is-present', + }, + }, + ]; + return; + } + const valueSearch = await this.store.queryRecord('index-value-search', { + cardSearchText, + cardSearchFilter, + valueSearchPropertyPath: property.shortFormLabel, + valueSearchText: filterString || '', + 'page[cursor]': page, + sort, + }); + const searchResultPage = valueSearch.get('searchResultPage'); + const results = searchResultPage.toArray(); + if (!this.seeMoreModalShown) { + this.filterableValues = results; + this.showSeeMoreButton = Boolean(searchResultPage.links?.next); + } + this.modalValueOptions = [...this.modalValueOptions, ...results]; + this.hasMoreValueOptions = Boolean(searchResultPage.links?.next); + if (searchResultPage.links?.next) { + this.nextPageCursor = new URL(searchResultPage.links.next.href).searchParams.get('page[cursor]') || ''; + } else { + this.nextPageCursor = ''; + } + } +} diff --git a/lib/osf-components/addon/components/search-page/filter-facet/styles.scss b/lib/osf-components/addon/components/search-page/filter-facet/styles.scss new file mode 100644 index 00000000000..d34f64884fe --- /dev/null +++ b/lib/osf-components/addon/components/search-page/filter-facet/styles.scss @@ -0,0 +1,52 @@ +.facet-wrapper { + padding: 0.5rem 0; +} + +.facet-wrapper:not(:first-of-type) { + border-top: 1px solid $color-border-gray; +} + +.facet-expand-button { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + + &:active { + box-shadow: none; + } +} + +.facet-list { + list-style: none; + max-height: 300px; + overflow-y: auto; + margin: 0; + padding: 0.2rem; + + &.collapsed { + display: none; + } +} + +.facet-value { + display: flex; + justify-content: space-between; + margin: 10px 0; + + .facet-link { + margin: 0 5px; + max-width: 90%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + .facet-count { + flex-shrink: 0; + } +} + +.see-more-dialog { + min-width: 50vw; +} diff --git a/lib/osf-components/addon/components/search-page/filter-facet/template.hbs b/lib/osf-components/addon/components/search-page/filter-facet/template.hbs new file mode 100644 index 00000000000..d7e05aabd02 --- /dev/null +++ b/lib/osf-components/addon/components/search-page/filter-facet/template.hbs @@ -0,0 +1,116 @@ +{{#if @property.cardSearchResultCount}} +
    + {{#let (unique-id @property.displayLabel) as |facetElementId|}} + + {{#if (and this.fetchFacetValues.isRunning (not this.seeMoreModalShown))}} + + {{else if this.fetchFacetValues.isError}} + {{t 'search.filter-facet.facet-load-failed'}} + {{else}} +
      + {{#each this.filterableValues as |value|}} +
    • + + + {{value.cardSearchResultCount}} + +
      • + {{/each}} + {{#if this.showSeeMoreButton}} +
    • + +
      • + {{/if}} +
    + {{/if}} + + + {{@property.displayLabel}} + + + {{t 'search.filter-facet.see-more-modal-text'}} + + {{property.indexCard.label}} ({{property.cardSearchResultCount}}) + + + + + + + + {{/let}} +
    +{{/if}} diff --git a/lib/osf-components/addon/components/search-page/styles.scss b/lib/osf-components/addon/components/search-page/styles.scss new file mode 100644 index 00000000000..df46ea157dd --- /dev/null +++ b/lib/osf-components/addon/components/search-page/styles.scss @@ -0,0 +1,416 @@ +// stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type + +.search-page { + background: $color-bg-gray-blue-light; +} + +.search-page-mobile { + background: $color-bg-gray-blue-light; + + > div:first-of-type { + margin-left: 0; + } +} + +.heading-wrapper-mobile { + background-image: url('images/default-brand/bg-dark.jpg'); + background-color: $osf-dark-blue-navbar; + color: $color-text-white; + display: flex; + flex-direction: column; + padding: 0; + + label > h1 { + font-weight: 500; + margin: 0.2rem; + padding: 0.75rem 0 0.5rem 0.5rem; + white-space: nowrap; + } + + span { + display: flex; + flex-direction: row; + justify-content: flex-start; + margin-left: 0; + padding: 0 0 0.5rem 0.5rem; + width: 100%; + + .help-button-mobile { + transform: scale(0.5); + border-radius: 50%; + margin-left: 0; + position: absolute; + right: 0.1rem; + margin-right: -5px; + } + } +} + +.left-panel-mobile { + padding: 1rem; + width: 75vw; + + .object-type-dropdown { + label > div { + width: 195px; + } + } + + .object-sort-dropdown { + margin-bottom: 1rem; + + label > div { + width: 195px; + } + } +} + +.search-main-mobile { + > div { + margin: 25px auto; + padding: 20px; + width: 90vw; + } + + .pagination-buttons { + padding-right: 0; + padding-top: 0; + } +} + +.search-page > div:first-of-type { + max-width: 95vw; + margin-left: 5rem; +} + +.heading-wrapper { + background-image: url('images/default-brand/bg-dark.jpg'); + background-color: $osf-dark-blue-navbar; + color: $color-text-white; + display: flex; + align-items: center; + padding: 35px; + + label { + padding: 30px; + margin: 0 3rem 0 2rem; + } + + .heading-label > h1 { + margin: 0; + white-space: nowrap; + } +} + +.provider-logo { + background: var(--hero-logo-img-url) top center no-repeat; + background-size: contain; + height: 70px; + margin: 2em 0 1em; + width: 100%; +} + +.hero-overlay { + background-color: transparent; + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + min-height: 100%; + min-width: 100%; + position: relative; + + &::after { + background: var(--hero-background-img-url); + background-size: cover; + content: ''; + height: 100%; + width: 100%; + position: absolute; + left: 0; + top: 0; + z-index: -1; + } +} + +.search-input-wrapper { + display: flex; + white-space: nowrap; + width: 70vw; + + .search-input { + color: $color-text-black; + font-size: 1.5em; + min-width: 250px; + width: 90%; + max-width: 70vw; + padding: 9px; + } + + .search-button-wrapper { + .help-button { + border-radius: 5px; + } + + .search-button { + border-radius: 0 5px 5px 0; + margin-right: 30px; + } + } +} + +.topbar { + border-bottom: 1px solid $color-text-black; + display: flex; + margin: 0 auto; + max-height: 55px; + margin-top: 1rem; + width: 60vw; + + .object-type-nav { + display: flex; + width: 100%; + + ul { + display: flex; + align-items: center; + justify-content: space-evenly; + list-style: none; + margin-bottom: 0; + padding-left: 0; + + width: 100%; + } + + li { + display: inline-flex; + white-space: nowrap; + margin-right: 10px; + + &.active, + &:hover { + background-color: $color-bg-gray; + } + } + + a { + padding-bottom: 10px; + } + } + + .help-button { + margin-left: 1.2rem; + } +} + +.search-main { + display: grid; + justify-content: center; +} + +.search-help-tutorial { + background-color: $osf-dark-blue-navbar; + color: $color-text-white; + width: 400px; + max-width: 100%; + z-index: 100; + // prevent overriding popover styling + white-space: wrap; + text-align: initial; + display: flex; + flex-direction: column; + justify-content: space-around; + margin-left: -0.2rem; + + a { + font-weight: bold; + color: var(--primary-color); + } + + .enumeration { + float: left; + white-space: nowrap; + } + + h2 { + font-weight: 400; + height: 22px; + margin-top: 0.5rem; + margin-left: 0.2rem; + } + + p { + white-space: normal; + margin: 25px 5px 0; + } + + .skip-button { + color: $color-text-white; + overflow: visible; + } + + .pagination { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: 0.5rem; + } + + .help-button-wrapper { + display: flex; + justify-content: flex-end; + padding: 0; + + .skip-button { + margin-right: 20px; + } + } +} + +.object-type-filter-link { + font-size: 1.3em; + padding: 18px 15px; + + &:global(.active), + &:hover { + background-color: $color-bg-white; + border-bottom: 1px solid $color-text-black; + color: $color-text-black; + text-decoration: none; + } +} + +.sort-dropdown { + background-color: $color-bg-gray-blue-light; + align-self: flex-end; + padding-bottom: 10px; + margin-left: 10px; + + p { + margin: 0 0 0 2px; + } + + div { + background-color: $color-bg-gray-blue-light; + border: 0 solid transparent; + color: $color-bg-blue-dark; + width: 170px; + } + + > div { + display: flex; + } +} + +.sidenav-toggle { + float: left; +} + +.no-results { + display: flex; + align-items: center; + justify-content: center; + + p { + font-size: 1.2em; + margin: 10px 20px; + text-align: center; + } +} + +.ember-power-select-options { + max-height: 20em; +} + +.left-panel { + background-color: $color-bg-gray-blue-light; + margin-bottom: 0; + min-width: 300px; + padding: 2rem 12px; + width: 340px; + + .left-panel-header { + border-bottom: 1px solid $alto; + font-weight: 300; + margin: 1rem 0; + padding: 0 0 1.5rem; + } +} + +.search-count { + font-size: 1.5em; + font-weight: 600; + margin: 5px 0; + padding: 0 0.2rem 0.2rem; +} + +.active-filter-list { + padding-left: 0; + list-style: none; +} + +.active-filter-item { + display: flex; + justify-content: space-between; + margin: 0.5rem 0.2rem; + + button { + margin-right: -5px; + } +} + +.no-properties { + padding: 1rem 0; +} + +.pagination-buttons { + display: flex; + padding: 2rem; + align-items: center; + justify-content: flex-end; + height: fit-content; + + button { + color: $color-bg-blue-dark; + margin-left: 5px; + } +} + +// for tablet displays +@media screen and (min-width: 650px) { + .left-panel-mobile { + width: 60vw; + } +} + +// for sizing between mobile and desktop +@media screen and (min-width: 899px) and (max-width: 1275px) { + .search-page > div:first-of-type { + margin: 0 auto; + } + + .heading-wrapper > label { + white-space: nowrap; + padding-left: 0; + margin: 0; + } + + .search-main { + gap: 1rem; + } + + .topbar { + display: flex; + flex-direction: column; + } + + .sort-dropdown { + align-self: flex-end; + margin: 0.5rem 0; + + > div { + background-color: $color-bg-white; + margin-top: 0.4rem; + } + } +} diff --git a/lib/osf-components/addon/components/search-page/template.hbs b/lib/osf-components/addon/components/search-page/template.hbs new file mode 100644 index 00000000000..5c98e110f36 --- /dev/null +++ b/lib/osf-components/addon/components/search-page/template.hbs @@ -0,0 +1,387 @@ + + + {{#if @provider}} +
    +
    +

    + {{html-safe @provider.description}} +

    + {{else if @institution}} +
    + +
    + {{else}} + + {{/if}} + + +
    + + +
    +     + {{#if this.showSidePanelToggle}} + + {{/if}} +     + + {{#if this.showResultCountLeft}} +

    + {{t 'search.total-results' count=this.totalResultCount}} +

    + {{/if}} +

    {{t 'search.left-panel.header'}}

    + {{#if this.showSidePanelToggle}} + {{#if @showResourceTypeFilter}} +
    + +
    + {{/if}} +
    + +
    + {{/if}} + {{#if this.activeFilters.length}} +
      + {{#each this.activeFilters as |filter|}} +
    • + + {{filter.propertyVisibleLabel}}: + {{filter.label}} + + +
      • + {{/each}} +
    + {{/if}} + {{#if this.search.isRunning}} + + {{else}} + {{#each this.relatedProperties as |filterableProperty index|}} + + {{else}} +

    + {{t 'search.left-panel.no-filterable-properties'}} +

    + {{/each}} + {{/if}} +     + + {{#unless this.showSidePanelToggle}} +
    + {{#if @showResourceTypeFilter}} + +
    + +

    {{sortOption.display}}

    +     +
    + {{else if this.showResultCountMiddle}} +

    + {{t 'search.total-results' count=this.totalResultCount}} +

    + {{/if}} +
    + {{/unless}} + {{#if this.search.isRunning}} + + {{else}} + {{#each this.searchResults as |item|}} + + {{else}} +
    +

    {{t 'search.no-results'}}

    +
    + {{/each}} + {{/if}} +
    + {{#if this.firstPageCursor}} + + {{/if}} + {{#if this.prevPageCursor}} + + {{/if}} + {{#if this.nextPageCursor}} + + {{/if}} +
    +     +     +{{#if this.showTooltip1}} + +
    +

    + {{t 'search.search-help.header-1'}} +

    +

    {{t 'search.search-help.body-1' htmlSafe=true}}

    + +

    {{t 'search.search-help.index-1'}}

    + + + + +     +
    +     +{{/if}} +{{#if this.showTooltip2}} + +
    +

    + {{t 'search.search-help.header-2'}} +

    +

    {{t 'search.search-help.body-2'}}

    + +

    {{t 'search.search-help.index-2'}}

    + + + + +     +
    +     +{{/if}} +{{#if this.showTooltip3}} + +
    +

    + {{t 'search.search-help.header-3'}} +

    +

    {{t 'search.search-help.body-3' htmlSafe=true}}

    + +

    {{t 'search.search-help.index-3'}}

    + + + +     +
    +     +{{/if}} \ No newline at end of file diff --git a/lib/osf-components/addon/components/search-result-card/component.ts b/lib/osf-components/addon/components/search-result-card/component.ts new file mode 100644 index 00000000000..d487ff36a03 --- /dev/null +++ b/lib/osf-components/addon/components/search-result-card/component.ts @@ -0,0 +1,31 @@ +import { action } from '@ember/object'; +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import SearchResultModel from 'ember-osf-web/models/search-result'; +import { inject as service } from '@ember/service'; +import Intl from 'ember-intl/services/intl'; + +interface Args { + result: SearchResultModel; +} + +export default class SearchResultCard extends Component { + @service intl!: Intl; + @tracked isOpenSecondaryMetadata = false; + + @action + toggleSecondaryMetadata() { + this.isOpenSecondaryMetadata = !this.isOpenSecondaryMetadata; + } + + get cardTypeLabel() { + return this.intl.t(`osf-components.search-result-card.${this.args.result.resourceType}`); + } + + // not sure if this is the best way, as there was a resourceType of "unknown" out in the wild + get secondaryMetadataComponent() { + const { resourceType } = this.args.result; + + return `search-result-card/${resourceType.replace('_component', '')}-secondary-metadata`; + } +} diff --git a/lib/osf-components/addon/components/search-result-card/file-secondary-metadata/styles.scss b/lib/osf-components/addon/components/search-result-card/file-secondary-metadata/styles.scss new file mode 100644 index 00000000000..d10e838958c --- /dev/null +++ b/lib/osf-components/addon/components/search-result-card/file-secondary-metadata/styles.scss @@ -0,0 +1,3 @@ +.description { + white-space: pre-wrap; +} diff --git a/lib/osf-components/addon/components/search-result-card/file-secondary-metadata/template.hbs b/lib/osf-components/addon/components/search-result-card/file-secondary-metadata/template.hbs new file mode 100644 index 00000000000..e8c08b6b2e7 --- /dev/null +++ b/lib/osf-components/addon/components/search-result-card/file-secondary-metadata/template.hbs @@ -0,0 +1,52 @@ +
    + {{#if @result.fileTitle}} +
    {{t 'osf-components.search-result-card.title'}}
    +
    {{@result.fileTitle}}
    + {{/if}} + {{#if @result.description}} +
    {{t 'osf-components.search-result-card.description'}}
    +
    {{@result.description}}
    + {{/if}} + {{#if @result.nodeFunders}} +
    {{t 'osf-components.search-result-card.funder'}}
    +
    + + {{#if list.item}} + {{list.item.name}} + {{else if list.remainingCount}} + {{t 'osf-components.search-result-card.remaining_count' count=list.remainingCount}} + {{/if}} + +
    + {{/if}} + {{#if @result.resourceNature}} +
    {{t 'osf-components.search-result-card.resource_type'}}
    +
    {{@result.resourceNature}}
    + {{/if}} + {{#if @result.nodeLicense}} +
    {{t 'osf-components.search-result-card.license'}}
    +
    {{@result.nodeLicense.name}}
    + {{/if}} + {{#if @result.absoluteUrl}} +
    {{t 'osf-components.search-result-card.url'}}
    +
    {{@result.absoluteUrl}}
    + {{/if}} + {{#if @result.doi}} +
    {{t 'osf-components.search-result-card.doi'}}
    +
    + + {{list.item}} + +
    + {{/if}} +
    diff --git a/lib/osf-components/addon/components/search-result-card/preprint-secondary-metadata/styles.scss b/lib/osf-components/addon/components/search-result-card/preprint-secondary-metadata/styles.scss new file mode 100644 index 00000000000..d10e838958c --- /dev/null +++ b/lib/osf-components/addon/components/search-result-card/preprint-secondary-metadata/styles.scss @@ -0,0 +1,3 @@ +.description { + white-space: pre-wrap; +} diff --git a/lib/osf-components/addon/components/search-result-card/preprint-secondary-metadata/template.hbs b/lib/osf-components/addon/components/search-result-card/preprint-secondary-metadata/template.hbs new file mode 100644 index 00000000000..5ed73f65c5d --- /dev/null +++ b/lib/osf-components/addon/components/search-result-card/preprint-secondary-metadata/template.hbs @@ -0,0 +1,93 @@ +
    + {{!-- Description --}} + {{#if @result.description}} +
    {{t 'osf-components.search-result-card.description'}}:
    +
    {{@result.description}}
    + {{/if}} + + {{!-- Preprint Provider --}} + {{#if @result.provider}} +
    {{t 'osf-components.search-result-card.preprint_provider'}}
    +
    {{@result.provider.name}}
    + {{/if}} + + {{!-- Associated Data --}} + {{#if @result.resourceMetadata.hasDataResource}} +
    {{t 'osf-components.search-result-card.associated_data'}}
    +
    + + {{list.item.[@id]}} + +
    + {{/if}} + + {{!-- Associated Preregistration: hasPreregisteredAnalysisPlan and/or hasPreregisteredStudyDesign --}} + {{#if @result.resourceMetadata.hasPreregisteredAnalysisPlan}} +
    {{t 'osf-components.search-result-card.associated_analysis_plan'}}
    +
    + + {{list.item.[@id]}} + +
    + {{/if}} + {{#if @result.resourceMetadata.hasPreregisteredStudyDesign}} +
    {{t 'osf-components.search-result-card.associated_study_design'}}
    +
    + + {{list.item.[@id]}} + +
    + {{/if}} + + {{!-- Conflict of interest statement --}} + {{#if @result.resourceMetadata.statedConflictOfInterest}} +
    {{t 'osf-components.search-result-card.conflict_of_interest'}}
    +
    + {{#if @result.resourceMetadata.statedConflictOfInterest.[0].[@value]}} + {{@result.resourceMetadata.statedConflictOfInterest.[0].[@value]}} + {{else}} + {{t 'osf-components.search-result-card.no_conflict_of_interest'}} + {{/if}} +
    + {{/if}} + + {{!-- License --}} + {{#if @result.license}} +
    {{t 'osf-components.search-result-card.license'}}
    +
    {{@result.license.name}}
    + {{/if}} + + {{#if @result.absoluteUrl}} +
    {{t 'osf-components.search-result-card.url'}}
    +
    {{@result.absoluteUrl}}
    + {{/if}} + + {{!-- DOI --}} + {{#if @result.doi}} +
    {{t 'osf-components.search-result-card.doi'}}
    +
    + + {{#if list.item}} + {{list.item}} + {{else if list.remainingCount}} + {{t 'osf-components.search-result-card.remaining_count' count=list.remainingCount}} + {{/if}} + +
    + {{/if}} +
    + diff --git a/lib/osf-components/addon/components/search-result-card/project-secondary-metadata/styles.scss b/lib/osf-components/addon/components/search-result-card/project-secondary-metadata/styles.scss new file mode 100644 index 00000000000..d10e838958c --- /dev/null +++ b/lib/osf-components/addon/components/search-result-card/project-secondary-metadata/styles.scss @@ -0,0 +1,3 @@ +.description { + white-space: pre-wrap; +} diff --git a/lib/osf-components/addon/components/search-result-card/project-secondary-metadata/template.hbs b/lib/osf-components/addon/components/search-result-card/project-secondary-metadata/template.hbs new file mode 100644 index 00000000000..87a2d0a1b6c --- /dev/null +++ b/lib/osf-components/addon/components/search-result-card/project-secondary-metadata/template.hbs @@ -0,0 +1,60 @@ +
    + {{#if @result.description}} +
    {{t 'osf-components.search-result-card.description'}}
    +
    {{@result.description}}
    + {{/if}} + {{#if @result.funders}} +
    {{t 'osf-components.search-result-card.funder'}}
    +
    + + {{#if list.item}} + {{list.item.name}} + {{else if list.remainingCount}} + {{t 'osf-components.search-result-card.remaining_count' count=list.remainingCount}} + {{/if}} + +
    + {{/if}} + {{#if @result.resourceNature}} +
    {{t 'osf-components.search-result-card.resource_type'}}
    +
    {{@result.resourceNature}}
    + {{/if}} + {{#if @result.isPartOfCollection}} +
    {{t 'osf-components.search-result-card.collection'}}
    +
    {{@result.isPartOfCollection.title}}
    + {{/if}} + {{#if @result.languageFromCode}} +
    {{t 'osf-components.search-result-card.language'}}
    +
    {{@result.languageFromCode}}
    + {{/if}} + {{#if @result.license}} +
    {{t 'osf-components.search-result-card.license'}}
    +
    {{@result.license.name}}
    + {{/if}} + {{#if @result.absoluteUrl}} +
    {{t 'osf-components.search-result-card.url'}}
    +
    {{@result.absoluteUrl}}
    + {{/if}} + {{#if @result.doi}} +
    {{t 'osf-components.search-result-card.doi'}}
    +
    + + {{#if list.item}} + {{list.item}} + {{else if list.remainingCount}} + {{t 'osf-components.search-result-card.remaining_count' count=list.remainingCount}} + {{/if}} + +
    + {{/if}} +
    \ No newline at end of file diff --git a/lib/osf-components/addon/components/search-result-card/registration-secondary-metadata/styles.scss b/lib/osf-components/addon/components/search-result-card/registration-secondary-metadata/styles.scss new file mode 100644 index 00000000000..d10e838958c --- /dev/null +++ b/lib/osf-components/addon/components/search-result-card/registration-secondary-metadata/styles.scss @@ -0,0 +1,3 @@ +.description { + white-space: pre-wrap; +} diff --git a/lib/osf-components/addon/components/search-result-card/registration-secondary-metadata/template.hbs b/lib/osf-components/addon/components/search-result-card/registration-secondary-metadata/template.hbs new file mode 100644 index 00000000000..72492d58ed6 --- /dev/null +++ b/lib/osf-components/addon/components/search-result-card/registration-secondary-metadata/template.hbs @@ -0,0 +1,56 @@ +
    + {{#if @result.description}} +
    {{t 'osf-components.search-result-card.description'}}
    +
    {{@result.description}}
    + {{/if}} + {{#if @result.funders}} +
    {{t 'osf-components.search-result-card.funder'}}
    +
    + + {{#if list.item}} + {{list.item.name}} + {{else if list.remainingCount}} + {{t 'osf-components.search-result-card.remaining_count' count=list.remainingCount}} + {{/if}} + +
    + {{/if}} + {{#if @result.provider}} +
    {{t 'osf-components.search-result-card.registration_provider'}}
    +
    {{@result.provider.name}}
    + {{/if}} + {{#if @result.registrationTemplate}} +
    {{t 'osf-components.search-result-card.registration_template'}}
    +
    {{@result.registrationTemplate}}
    + {{/if}} + {{#if @result.license}} +
    {{t 'osf-components.search-result-card.license'}}
    +
    {{@result.license.name}}
    + {{/if}} + {{#if @result.absoluteUrl}} +
    {{t 'osf-components.search-result-card.url'}}
    +
    {{@result.absoluteUrl}}
    + {{/if}} + {{#if @result.doi}} +
    {{t 'osf-components.search-result-card.doi'}}
    +
    + + {{#if list.item}} + {{list.item}} + {{else if list.remainingCount}} + {{t 'osf-components.search-result-card.remaining_count' count=list.remainingCount}} + {{/if}} + +
    + {{/if}} +
    diff --git a/lib/osf-components/addon/components/search-result-card/styles.scss b/lib/osf-components/addon/components/search-result-card/styles.scss new file mode 100644 index 00000000000..2a53b47ab83 --- /dev/null +++ b/lib/osf-components/addon/components/search-result-card/styles.scss @@ -0,0 +1,87 @@ +.result-card-container { + background-color: $color-bg-white; + margin: 35px 35px 0; + padding: 10px; + width: 60vw; +} + +.primary-metadata-container { + display: flex; + flex-direction: column; + + h4 { + font-weight: bold; + } + + h4, + div:not(:first-child) { + margin: 0 0 15px 15px; + } + + > div:last-child { + margin-bottom: 0; + padding-bottom: 5px; + } +} + +.header { + display: flex; + justify-content: space-between; + + button { + border: 1px solid transparent; + color: $color-text-blue-dark; + height: 30px; + margin: 5px; + padding: 0 10px; + } +} + +.type-label { + background-color: $color-gradient-primary; + margin: 15px; + padding: 0.2rem 0.4rem; + width: fit-content; + text-transform: uppercase; +} + +.orcid-logo { + color: $orcid-logo-color; + margin-left: 3px; +} + +.withdrawn-label { + background-color: $color-bg-gray-darker; + color: $color-text-white; + border-radius: 0.25em; + padding: 0.2em 0.6em 0.3em; + font-size: 75%; + font-weight: bold; + margin-left: 3px; + position: relative; + bottom: 2px; +} + +.date-fields { + padding-bottom: 5px; + + span { + &:not(:last-child)::after { + content: ' | '; + } + } +} + +.cp-panel { + padding: 0 10px; + + dl { + border-top: 2px solid $color-border-gray; + padding-top: 10px; + } + + dt, + dd { + margin: 15px 0 0 5px; + } +} diff --git a/lib/osf-components/addon/components/search-result-card/template.hbs b/lib/osf-components/addon/components/search-result-card/template.hbs new file mode 100644 index 00000000000..0708c16e8cd --- /dev/null +++ b/lib/osf-components/addon/components/search-result-card/template.hbs @@ -0,0 +1,99 @@ +
    +
    +
    +
    + {{this.cardTypeLabel}} +
    + {{#if (not-eq @result.resourceType 'user')}} + + {{/if}} +
    +

    + {{@result.displayTitle}} + {{#if @result.isWithdrawn}} + {{t 'osf-components.search-result-card.withdrawn'}} + {{/if}} + {{#if @result.orcids}} + {{#each @result.orcids as |item|}} + + + + {{/each}} + {{/if}} +

    + + {{#if @result.affiliatedEntities}} +
    + + {{#if list.item}} + {{list.item.name}} + {{else if list.remainingCount}} + {{t 'osf-components.search-result-card.remaining_count' count=list.remainingCount}} + {{/if}} + +
    + {{/if}} + {{#if @result.isPartOf}} +
    + {{t 'osf-components.search-result-card.from'}}: {{@result.isPartOfTitleAndUrl.title}} +
    + {{/if}} + {{#if @result.isContainedBy}} +
    + {{t 'osf-components.search-result-card.from'}}: {{@result.isContainedByTitleAndUrl.title}} +
    + {{/if}} +
    + {{#each @result.dateFields as |field|}} + {{#if field.date}} + {{field.label}}: {{field.date}} + {{/if}} + {{/each}} +
    + {{#if @result.context}} +
    + {{t 'osf-components.search-result-card.context'}}: {{@result.context}} +
    + {{/if}} + {{#if (or (eq @result.resourceType 'registration') (eq @result.resourceType 'registration_component'))}} +
    + +
    + {{/if}} +
    + + +
    + {{component this.secondaryMetadataComponent result=@result}} +     +     +
    \ No newline at end of file diff --git a/lib/osf-components/addon/components/tags-widget/component.ts b/lib/osf-components/addon/components/tags-widget/component.ts index cba7a0f7840..6679bb35326 100644 --- a/lib/osf-components/addon/components/tags-widget/component.ts +++ b/lib/osf-components/addon/components/tags-widget/component.ts @@ -2,25 +2,24 @@ import { attribute } from '@ember-decorators/component'; import Component from '@ember/component'; import { assert } from '@ember/debug'; import { action } from '@ember/object'; +import RouterService from '@ember/routing/router-service'; import { inject as service } from '@ember/service'; -import config from 'ember-get-config'; import { layout } from 'ember-osf-web/decorators/component'; import OsfModel from 'ember-osf-web/models/osf-model'; import Analytics from 'ember-osf-web/services/analytics'; -import pathJoin from 'ember-osf-web/utils/path-join'; import styles from './styles'; import template from './template'; -const { OSF: { url: baseUrl } } = config; - interface Taggable extends OsfModel { tags: string[]; } @layout(template, styles) export default class TagsWidget extends Component.extend({ styles }) { + @service router!: RouterService; + // required arguments taggable!: Taggable; @@ -64,7 +63,7 @@ export default class TagsWidget extends Component.extend({ styles }) { @action _clickTag(tag: string): void { - window.location.assign(`${pathJoin(baseUrl, 'search')}?q=(tags:"${encodeURIComponent(tag)}")`); + this.router.transitionTo('search', { queryParams: { q: `${encodeURIComponent(tag)}` } }); } _onChange() { diff --git a/lib/osf-components/addon/helpers/sufficient-contrast.ts b/lib/osf-components/addon/helpers/sufficient-contrast.ts new file mode 100644 index 00000000000..d167563f00e --- /dev/null +++ b/lib/osf-components/addon/helpers/sufficient-contrast.ts @@ -0,0 +1,79 @@ +import { helper } from '@ember/component/helper'; + +/** + * Criteria is based on WCAG 2.0 Guidelines. + * https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast-contrast + * + * Relative Luminance is calculated using the formula from WCAG 2.0 Guidelines. + * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + * + * @param {Array} backgroundColor The background color in hex format + * @param {Array} foregroundColor The foreground color in hex format + * @param {Object} options {largeText: true if text is at least 18 point if not bold and at least 14 point if bold} + * @return {Boolean} Whether the contrast between the two colors is sufficient + */ + +const wcagAA = { + normalText: 4.5, + largeText: 3, +}; +const wcagAAA = { + normalText: 7, + largeText: 4.5, +}; + +function threeDigitHexToSixDigit(hex: string): string { + if (hex.length === 3) { + return hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; + } + return hex; +} + +export function sufficientContrast( + [backgroundColor, foregroundColor]: [string, string], { largeText = false, useAAA = false }, +): boolean { + const standard = useAAA ? wcagAAA : wcagAA; + const threshold = largeText ? standard.largeText : standard.normalText; + + if (!backgroundColor || !foregroundColor) { + return false; + } + + let bg = backgroundColor.replace('#', ''); + let fg = foregroundColor.replace('#', ''); + bg = bg.length === 3 ? threeDigitHexToSixDigit(bg) : bg; + fg = fg.length === 3 ? threeDigitHexToSixDigit(fg) : fg; + + // convert background and foreground color hex to sRGB + const bgSRGB = { + r: parseInt('0x' + bg.substring(0, 2), 16) / 255, + g: parseInt('0x' + bg.substring(2, 4), 16) / 255, + b: parseInt('0x' + bg.substring(4, 6), 16) / 255, + }; + const fgSRGB = { + r: parseInt('0x' + fg.substring(0, 2), 16) / 255, + g: parseInt('0x' + fg.substring(2, 4), 16) / 255, + b: parseInt('0x' + fg.substring(4, 6), 16) / 255, + }; + + const bgRGBLuminance = { + r: bgSRGB.r <= 0.03928 ? bgSRGB.r / 12.92 : Math.pow((bgSRGB.r + 0.055) / 1.055, 2.4), + g: bgSRGB.g <= 0.03928 ? bgSRGB.g / 12.92 : Math.pow((bgSRGB.g + 0.055) / 1.055, 2.4), + b: bgSRGB.b <= 0.03928 ? bgSRGB.b / 12.92 : Math.pow((bgSRGB.b + 0.055) / 1.055, 2.4), + }; + const fgRGBLuminance = { + r: fgSRGB.r <= 0.03928 ? fgSRGB.r / 12.92 : Math.pow((fgSRGB.r + 0.055) / 1.055, 2.4), + g: fgSRGB.g <= 0.03928 ? fgSRGB.g / 12.92 : Math.pow((fgSRGB.g + 0.055) / 1.055, 2.4), + b: fgSRGB.b <= 0.03928 ? fgSRGB.b / 12.92 : Math.pow((fgSRGB.b + 0.055) / 1.055, 2.4), + }; + + // calculate relative luminance + const bgLuminance = 0.2126 * bgRGBLuminance.r + 0.7152 * bgRGBLuminance.g + 0.0722 * bgRGBLuminance.b; + const fgLuminance = 0.2126 * fgRGBLuminance.r + 0.7152 * fgRGBLuminance.g + 0.0722 * fgRGBLuminance.b; + + // calculate contrast ratio + const contrastRatio = (Math.max(bgLuminance, fgLuminance) + 0.05) / (Math.min(bgLuminance, fgLuminance) + 0.05); + return contrastRatio >= threshold; +} + +export default helper(sufficientContrast); diff --git a/lib/osf-components/app/components/search-page/component.js b/lib/osf-components/app/components/search-page/component.js new file mode 100644 index 00000000000..2e83fa9360e --- /dev/null +++ b/lib/osf-components/app/components/search-page/component.js @@ -0,0 +1 @@ +export { default } from 'osf-components/components/search-page/component'; diff --git a/lib/osf-components/app/components/search-page/filter-facet/after-options/template.js b/lib/osf-components/app/components/search-page/filter-facet/after-options/template.js new file mode 100644 index 00000000000..ead78170e59 --- /dev/null +++ b/lib/osf-components/app/components/search-page/filter-facet/after-options/template.js @@ -0,0 +1 @@ +export { default } from 'osf-components/components/search-page/filter-facet/after-options/template'; diff --git a/lib/osf-components/app/components/search-page/filter-facet/component.js b/lib/osf-components/app/components/search-page/filter-facet/component.js new file mode 100644 index 00000000000..2aea79fdf23 --- /dev/null +++ b/lib/osf-components/app/components/search-page/filter-facet/component.js @@ -0,0 +1 @@ +export { default } from 'osf-components/components/search-page/filter-facet/component'; diff --git a/lib/osf-components/app/components/search-page/filter-facet/template.js b/lib/osf-components/app/components/search-page/filter-facet/template.js new file mode 100644 index 00000000000..43c36976ad4 --- /dev/null +++ b/lib/osf-components/app/components/search-page/filter-facet/template.js @@ -0,0 +1 @@ +export { default } from 'osf-components/components/search-page/filter-facet/template'; diff --git a/lib/osf-components/app/components/search-page/template.js b/lib/osf-components/app/components/search-page/template.js new file mode 100644 index 00000000000..ad34c5c2daf --- /dev/null +++ b/lib/osf-components/app/components/search-page/template.js @@ -0,0 +1 @@ +export { default } from 'osf-components/components/search-page/template'; diff --git a/lib/osf-components/app/components/search-result-card/component.js b/lib/osf-components/app/components/search-result-card/component.js new file mode 100644 index 00000000000..9ca7a8b5cfc --- /dev/null +++ b/lib/osf-components/app/components/search-result-card/component.js @@ -0,0 +1 @@ +export { default } from 'osf-components/components/search-result-card/component'; diff --git a/lib/osf-components/app/components/search-result-card/file-secondary-metadata/template.js b/lib/osf-components/app/components/search-result-card/file-secondary-metadata/template.js new file mode 100644 index 00000000000..7f534b8c7d3 --- /dev/null +++ b/lib/osf-components/app/components/search-result-card/file-secondary-metadata/template.js @@ -0,0 +1 @@ +export { default } from 'osf-components/components/search-result-card/file-secondary-metadata/template'; diff --git a/lib/osf-components/app/components/search-result-card/preprint-secondary-metadata/template.js b/lib/osf-components/app/components/search-result-card/preprint-secondary-metadata/template.js new file mode 100644 index 00000000000..6ebd4c96408 --- /dev/null +++ b/lib/osf-components/app/components/search-result-card/preprint-secondary-metadata/template.js @@ -0,0 +1 @@ +export { default } from 'osf-components/components/search-result-card/preprint-secondary-metadata/template'; diff --git a/lib/osf-components/app/components/search-result-card/project-secondary-metadata/template.js b/lib/osf-components/app/components/search-result-card/project-secondary-metadata/template.js new file mode 100644 index 00000000000..7ab736d92f1 --- /dev/null +++ b/lib/osf-components/app/components/search-result-card/project-secondary-metadata/template.js @@ -0,0 +1 @@ +export { default } from 'osf-components/components/search-result-card/project-secondary-metadata/template'; diff --git a/lib/osf-components/app/components/search-result-card/registration-secondary-metadata/template.js b/lib/osf-components/app/components/search-result-card/registration-secondary-metadata/template.js new file mode 100644 index 00000000000..f76c747316b --- /dev/null +++ b/lib/osf-components/app/components/search-result-card/registration-secondary-metadata/template.js @@ -0,0 +1 @@ +export { default } from 'osf-components/components/search-result-card/registration-secondary-metadata/template'; diff --git a/lib/osf-components/app/components/search-result-card/template.js b/lib/osf-components/app/components/search-result-card/template.js new file mode 100644 index 00000000000..f99efc30de7 --- /dev/null +++ b/lib/osf-components/app/components/search-result-card/template.js @@ -0,0 +1 @@ +export { default } from 'osf-components/components/search-result-card/template'; diff --git a/lib/osf-components/app/helpers/sufficient-contrast.js b/lib/osf-components/app/helpers/sufficient-contrast.js new file mode 100644 index 00000000000..addd1fd326d --- /dev/null +++ b/lib/osf-components/app/helpers/sufficient-contrast.js @@ -0,0 +1 @@ +export { default } from 'osf-components/helpers/sufficient-contrast'; diff --git a/lib/registries/addon/branded/discover/template.hbs b/lib/registries/addon/branded/discover/template.hbs new file mode 100644 index 00000000000..47e7abedca6 --- /dev/null +++ b/lib/registries/addon/branded/discover/template.hbs @@ -0,0 +1,17 @@ +{{page-title (t 'registries.discover.page_title') prepend=false}} + + + diff --git a/lib/registries/addon/branded/index/route.ts b/lib/registries/addon/branded/index/route.ts index c4adf376592..b2b0de51ff7 100644 --- a/lib/registries/addon/branded/index/route.ts +++ b/lib/registries/addon/branded/index/route.ts @@ -1,8 +1,12 @@ import Route from '@ember/routing/route'; - +import config from 'ember-get-config'; export default class BrandedRegistriesIndexRoute extends Route { beforeModel() { const params: { providerId?: string } = this.paramsFor('branded'); + if (params.providerId === config.defaultProvider) { + return this.replaceWith('index'); + } + return this.replaceWith('branded.discover', params.providerId); } } diff --git a/lib/registries/addon/components/registries-recent-list/template.hbs b/lib/registries/addon/components/registries-recent-list/template.hbs index d07ce2928fe..a3ec7a5c8cb 100644 --- a/lib/registries/addon/components/registries-recent-list/template.hbs +++ b/lib/registries/addon/components/registries-recent-list/template.hbs @@ -4,9 +4,12 @@ {{t 'registries.index.recent.title'}}
    - + {{t 'registries.index.recent.more'}} - +
    diff --git a/lib/registries/addon/components/registries-search-result/template.hbs b/lib/registries/addon/components/registries-search-result/template.hbs index 63ecf039f8a..60d924c1f8e 100644 --- a/lib/registries/addon/components/registries-search-result/template.hbs +++ b/lib/registries/addon/components/registries-search-result/template.hbs @@ -77,6 +77,7 @@ @hasAnalyticCode={{@result.relatedResourceTypes.analytic_code}} @hasPapers={{@result.relatedResourceTypes.papers}} @hasSupplements={{@result.relatedResourceTypes.supplements}} + @verticalLayout={{true}} /> {{/if}} diff --git a/lib/registries/addon/discover/route.ts b/lib/registries/addon/discover/route.ts index f0755af90c5..9c10dfe213f 100644 --- a/lib/registries/addon/discover/route.ts +++ b/lib/registries/addon/discover/route.ts @@ -1,6 +1,13 @@ import Route from '@ember/routing/route'; +import RouterService from '@ember/routing/router-service'; +import { inject as service } from '@ember/service'; export default class RegistriesDiscoverRoute extends Route { + @service router!: RouterService; + afterModel() { + this.router.transitionTo('search', { queryParams: { resourceType: 'Registration,RegistrationComponent' }}); + } + buildRouteInfoMetadata() { return { osfMetrics: { diff --git a/lib/registries/addon/drafts/draft/-components/tags-manager/component.ts b/lib/registries/addon/drafts/draft/-components/tags-manager/component.ts index 64d1f2c87dc..3ce72e4b556 100644 --- a/lib/registries/addon/drafts/draft/-components/tags-manager/component.ts +++ b/lib/registries/addon/drafts/draft/-components/tags-manager/component.ts @@ -1,25 +1,22 @@ import { tagName } from '@ember-decorators/component'; import Component from '@ember/component'; import { action, set } from '@ember/object'; +import RouterService from '@ember/routing/router-service'; +import { inject as service } from '@ember/service'; import { BufferedChangeset } from 'ember-changeset/types'; -import config from 'ember-get-config'; import { layout } from 'ember-osf-web/decorators/component'; import DraftRegistrationModel from 'ember-osf-web/models/draft-registration'; -import pathJoin from 'ember-osf-web/utils/path-join'; import { TagsManager } from 'osf-components/components/editable-field/tags-manager/component'; import template from './template'; -const { - OSF: { url: baseUrl }, -} = config; - export type MetadataTagsManager = Pick; @tagName('') @layout(template) export default class MetadataTagsManagerComponent extends Component { + @service router!: RouterService; // required changeset!: BufferedChangeset; valuePath!: string; @@ -58,6 +55,6 @@ export default class MetadataTagsManagerComponent extends Component { @action clickTag(tag: string): void { - window.location.assign(`${pathJoin(baseUrl, 'search')}?q=(tags:"${encodeURIComponent(tag)}")`); + this.router.transitionTo('search', { queryParams: { q: `${encodeURIComponent(tag)}` } }); } } diff --git a/lib/registries/addon/engine.js b/lib/registries/addon/engine.js index 641b1c9863b..5afdc88298f 100644 --- a/lib/registries/addon/engine.js +++ b/lib/registries/addon/engine.js @@ -30,6 +30,7 @@ const engine = Engine.extend({ 'store', ], externalRoutes: [ + 'search', 'guid-registration', 'guid-registration.analytics', 'guid-registration.forks', diff --git a/lib/registries/addon/index/controller.ts b/lib/registries/addon/index/controller.ts index 9a13d76df75..1dc2d89976a 100644 --- a/lib/registries/addon/index/controller.ts +++ b/lib/registries/addon/index/controller.ts @@ -34,8 +34,11 @@ export default class Index extends Controller { @action onSearch(query: string) { - this.router.transitionTo('registries.discover', { - queryParams: { q: query }, + this.router.transitionTo('search', { + queryParams: { + q: query, + resourceType: 'Registration,RegistrationComponent', + }, }); } } diff --git a/mirage/config.ts b/mirage/config.ts index 4fee24ca92b..aadb879e9b3 100644 --- a/mirage/config.ts +++ b/mirage/config.ts @@ -37,6 +37,7 @@ import { createNewSchemaResponse } from './views/schema-response'; import { createSchemaResponseAction } from './views/schema-response-action'; import { rootDetail } from './views/root'; import { shareSearch } from './views/share-search'; +import { cardSearch, valueSearch } from './views/search'; import { createToken } from './views/token'; import { createEmails, updateEmails } from './views/update-email'; import { @@ -48,17 +49,24 @@ import { updatePassword } from './views/user-password'; import * as userSettings from './views/user-setting'; import * as wb from './views/wb'; -const { OSF: { apiUrl } } = config; +const { OSF: { apiUrl, shareBaseUrl } } = config; export default function(this: Server) { this.passthrough(); // pass through all requests on currrent domain this.passthrough('https://api.crossref.org/*'); - // SHARE search + + // SHARE-powered registration discover endpoint this.urlPrefix = 'https://share.osf.io'; this.namespace = '/api/v2/'; - this.post('/search/creativeworks/_search', shareSearch); + // SHARE-powered search endpoints + this.urlPrefix = shareBaseUrl; + this.namespace = '/api/v3/'; + this.get('/index-card-search', cardSearch); + this.get('/index-value-search', valueSearch); + // this.get('/index-card/:id', Detail); + this.urlPrefix = apiUrl; this.namespace = '/v2'; diff --git a/mirage/fixtures/preprint-providers.ts b/mirage/fixtures/preprint-providers.ts index 738d808ff68..097df9fd028 100644 --- a/mirage/fixtures/preprint-providers.ts +++ b/mirage/fixtures/preprint-providers.ts @@ -51,6 +51,24 @@ const preprintProviders: Array> = [ preprintWord: 'default', assets: randomAssets(), }, + { + id: 'agrixiv', + name: 'AgriXiv', + preprintWord: 'preprint', + assets: randomAssets(), + }, + { + id: 'biohackrxiv', + name: 'BioHackrXiv', + preprintWord: 'preprint', + assets: randomAssets(), + }, + { + id: 'nutrixiv', + name: 'NutriXiv', + preprintWord: 'preprint', + assets: randomAssets(), + }, ]; export default preprintProviders; diff --git a/mirage/scenarios/default.ts b/mirage/scenarios/default.ts index 3556cb32f26..be9188c86fa 100644 --- a/mirage/scenarios/default.ts +++ b/mirage/scenarios/default.ts @@ -8,6 +8,7 @@ import { import { dashboardScenario } from './dashboard'; import { forksScenario } from './forks'; import { meetingsScenario } from './meetings'; +import { preprintsScenario } from './preprints'; import { manyProjectRegistrationsScenario, registrationScenario } from './registrations'; import { settingsScenario } from './settings'; @@ -56,4 +57,7 @@ export default function(server: Server) { if (mirageScenarios.includes('manyProjectRegistrations')) { manyProjectRegistrationsScenario(server, currentUser); } + if (mirageScenarios.includes('preprints')) { + preprintsScenario(server, currentUser); + } } diff --git a/mirage/scenarios/preprints.ts b/mirage/scenarios/preprints.ts new file mode 100644 index 00000000000..12bbf7f0d14 --- /dev/null +++ b/mirage/scenarios/preprints.ts @@ -0,0 +1,61 @@ +import { ModelInstance, Server } from 'ember-cli-mirage'; + +import PreprintProvider from 'ember-osf-web/models/preprint-provider'; +import User from 'ember-osf-web/models/user'; + +export function preprintsScenario( + server: Server, + currentUser: ModelInstance, +) { + const thesisCommons = server.schema.preprintProviders.find('thesiscommons') as ModelInstance; + const brand = server.create('brand', { + primaryColor: '#821e1e', + secondaryColor: '#94918e', + heroBackgroundImage: 'https://singlecolorimage.com/get/94918e/1000x1000', + }); + const currentUserModerator = server.create('moderator', + { id: currentUser.id, user: currentUser, provider: thesisCommons }, 'asAdmin'); + + const preprints = server.createList('preprint', 3, { + provider: thesisCommons, + }); + thesisCommons.update({ + brand, + moderators: [currentUserModerator], + preprints, + description: '

    This is the description for Thesis Commons and it has an inline-style!

    ', + }); + + const agrixiv = server.schema.preprintProviders.find('agrixiv') as ModelInstance; + const agrixivBrand = server.create('brand', { + primaryColor: '#85BF9B', + secondaryColor: '#E7F7E1', + heroBackgroundImage: 'https://singlecolorimage.com/get/E7F7E1/1000x1000', + }); + agrixiv.update({ + brand: agrixivBrand, + description: '

    This is the description for agrixiv!

    ', + }); + + const nutrixiv = server.schema.preprintProviders.find('nutrixiv') as ModelInstance; + const nutrixivBrand = server.create('brand', { + primaryColor: '#000000', + secondaryColor: '#888888', + heroBackgroundImage: 'https://singlecolorimage.com/get/4a4a4a/1000x1000', + }); + nutrixiv.update({ + brand: nutrixivBrand, + description: '

    This is the description for nutrixiv!

    ', + }); + + const biohackrxiv = server.schema.preprintProviders.find('biohackrxiv') as ModelInstance; + const biohackrxivBrand = server.create('brand', { + primaryColor: '#000000', + secondaryColor: '#ccc', + heroBackgroundImage: 'https://singlecolorimage.com/get/ffffff/1000x1000', + }); + biohackrxiv.update({ + brand: biohackrxivBrand, + description: '

    This is the description for biohackrxiv!

    ', + }); +} diff --git a/mirage/serializers/preprint-provider.ts b/mirage/serializers/preprint-provider.ts new file mode 100644 index 00000000000..e2349cab283 --- /dev/null +++ b/mirage/serializers/preprint-provider.ts @@ -0,0 +1,73 @@ +import { ModelInstance } from 'ember-cli-mirage'; +import config from 'ember-get-config'; +import PreprintProvider from 'ember-osf-web/models/preprint-provider'; +import ApplicationSerializer, { SerializedRelationships } from './application'; + +const { OSF: { apiUrl } } = config; + +export default class PreprintProviderSerializer extends ApplicationSerializer { + buildNormalLinks(model: ModelInstance) { + return { + self: `${apiUrl}/v2/providers/preprints/${model.id}/`, + }; + } + + buildRelationships(model: ModelInstance) { + const relationships: SerializedRelationships = { + subjects: { + links: { + related: { + href: `${apiUrl}/v2/providers/preprints/${model.id}/subjects/`, + meta: this.buildRelatedLinkMeta(model, 'subjects'), + }, + }, + }, + highlightedSubjects: { + links: { + related: { + href: `${apiUrl}/v2/providers/preprints/${model.id}/highlightedSubjects/`, + meta: this.buildRelatedLinkMeta(model, 'highlightedSubjects'), + }, + }, + }, + licensesAcceptable: { + links: { + related: { + href: `${apiUrl}/v2/providers/preprints/${model.id}/licenses/`, + meta: {}, + }, + }, + }, + moderators: { + links: { + related: { + href: `${apiUrl}/v2/providers/preprints/${model.id}/moderators/`, + meta: this.buildRelatedLinkMeta(model, 'moderators'), + }, + }, + }, + preprints: { + links: { + related: { + href: `${apiUrl}/v2/providers/preprints/${model.id}/preprints/`, + meta: {}, + }, + }, + }, + // TODO: subscriptions when we move ember-osf-reviews¥ + }; + + if (model.brand) { + relationships.brand = { + links: { + related: { + href: `${apiUrl}/v2/brands/${model.brand.id}/`, + meta: {}, + }, + }, + }; + } + + return relationships; + } +} diff --git a/mirage/views/search.ts b/mirage/views/search.ts new file mode 100644 index 00000000000..bbdabe24d1b --- /dev/null +++ b/mirage/views/search.ts @@ -0,0 +1,523 @@ +import { Request, Schema } from 'ember-cli-mirage'; +import faker from 'faker'; + +export function cardSearch(_: Schema, __: Request) { + // TODO: replace with a real index-card-search and use request to populate attrs + return { + data: { + type: 'index-card-search', + id: 'zzzzzz', + attributes:{ + cardSearchText: 'hello', + cardSearchFilter: [ + { + osfmapPropertyPath: 'resourceType', + filterType: 'eq', + filterValues: [ + 'osf:Registration', + ], + }, + { + osfmapPropertyPath: 'subject', + filterType: 'eq', + filterValues: [ + 'https://subjects.org/subjectId', + ], + }, + ], + totalResultCount: 3, + }, + relationships: { + searchResultPage: { + data: [ + { + type: 'search-result', + id: 'abc', + }, + { + type: 'search-result', + id: 'def', + }, + { + type: 'search-result', + id: 'ghi', + }, + ], + links: { + next: { + href: 'https://staging-share.osf.io/api/v3/index-card-search?page%5Bcursor%5D=lmnop', + }, + }, + }, + relatedProperties: { + data: [ + { + type: 'related-property-path', + id: 'propertyMatch1', + }, + { + type: 'related-property-path', + id: 'propertyMatch2', + }, + { + type: 'related-property-path', + id: 'propertyMatch3', + }, + ], + links: { + next: { + href: 'https://staging-share.osf.io/api/v3/index-card-search?page%5Bcursor%5D=lmnop', + }, + }, + }, + }, + }, + included: [ + { + type: 'search-result', + id: 'abc', + attributes: { + matchEvidence: [ + { + '@type': ['https://share.osf.io/vocab/2023/trove/TextMatchEvidence'], + osfmapPropertyPath: 'description', + matchingHighlight: '... say hello!', + }, + { + '@type': ['https://share.osf.io/vocab/2023/trove/TextMatchEvidence'], + osfmapPropertyPath: 'title', + matchingHighlight: '... shout hello!', + }, + ], + }, + relationships: { + indexCard: { + data: { + type: 'index-card', + id: 'abc', + }, + links: { + related: 'https://share.osf.io/api/v2/index-card/abc', + }, + }, + }, + }, + { + type: 'search-result', + id: 'def', + attributes: { + matchEvidence: [ + { + '@type': ['https://share.osf.io/vocab/2023/trove/TextMatchEvidence'], + osfmapPropertyPath: 'description', + matchingHighlight: '... computer said hello world!', + }, + ], + }, + relationships: { + indexCard: { + data: { + type: 'index-card', + id: 'def', + }, + links: { + related: 'https://share.osf.io/api/v2/index-card/def', + }, + }, + }, + }, + { + type: 'search-result', + id: 'ghi', + attributes: { + matchEvidence: [ + { + '@type': ['https://share.osf.io/vocab/2023/trove/TextMatchEvidence'], + osfmapPropertyPath: 'title', + matchingHighlight: '... you said hello!', + }, + ], + }, + relationships: { + indexCard: { + data: { + type: 'index-card', + id: 'ghi', + }, + links: { + related: 'https://share.osf.io/api/v2/index-card/abc', + }, + }, + }, + }, + { + type: 'index-card', + id: 'abc', + attributes: { + resourceIdentifier: [ + 'https://osf.example/abcfoo', + 'https://doi.org/10.0000/osf.example/abcfoo', + ], + resourceMetadata: { + resourceType: [ + 'osf:Registration', + 'dcterms:Dataset', + ], + '@id': 'https://osf.example/abcfoo', + '@type': 'osf:Registration', + title: [ + { + '@value': 'I shout hello!', + '@language': 'en', + }, + ], + description: [ + { + '@value': 'I say hello!', + '@language': 'en', + }, + ], + isPartOf: [ + { + '@id': 'https://osf.example/xyzfoo', + '@type': 'osf:Registration', + title: [ + { + '@value': 'a parent!', + '@language': 'en', + }, + ], + }, + ], + hasPart: [ + { + '@id': 'https://osf.example/deffoo', + '@type': 'osf:Registration', + title: [ + { + '@value': 'a child!', + '@language': 'en', + }, + ], + }, + { + '@id': 'https://osf.example/ghifoo', + '@type': 'osf:Registration', + title: [ + { + '@value': 'another child!', + '@language': 'en', + }, + ], + }, + ], + subject: [ + { + '@id': 'https://subjects.org/subjectId', + '@type': 'dcterms:Subject', + label: [ + { + '@value': 'wibbleplop', + '@language': 'wi-bl', + }, + ], + }, + ], + creator: [{ + '@id': 'https://osf.example/person', + '@type': 'dcterms:Agent', + specificType: 'foaf:Person', + name: 'person person, prsn', + }], + }, + }, + links: { + self: 'https://share.osf.io/api/v2/index-card/abc', + resource: 'https://osf.example/abcfoo', + }, + }, + { + type: 'index-card', + id: 'def', + attributes: { + resourceIdentifier: [ + 'https://osf.example/abcfoo', + 'https://doi.org/10.0000/osf.example/abcfoo', + ], + resourceMetadata: { + resourceType: [ + 'osf:Registration', + 'dcterms:Dataset', + ], + '@id': 'https://osf.example/abcfoo', + '@type': 'osf:Registration', + title: [ + { + '@value': 'Hi!', + '@language': 'en', + }, + ], + }, + }, + links: { + self: 'https://share.osf.io/api/v2/index-card/ghi', + resource: 'https://osf.example/abcfoo', + }, + }, + { + type: 'index-card', + id: 'ghi', + attributes: { + resourceIdentifier: [ + 'https://osf.example/abcfoo', + 'https://doi.org/10.0000/osf.example/abcfoo', + ], + resourceMetadata: { + resourceType: [ + 'osf:Registration', + 'dcterms:Dataset', + ], + '@id': 'https://osf.example/abcfoo', + '@type': 'osf:Registration', + title: [ + { + '@value': 'Ahoj! That\'s hello in Czech!', + '@language': 'en', + }, + ], + description: [ + { + '@value': 'Some description', + '@language': 'en', + }, + ], + }, + }, + links: { + self: 'https://share.osf.io/api/v2/index-card/ghi', + resource: 'https://osf.example/abcfoo', + }, + }, + // Related properties + { + type: 'related-property-path', + id: 'propertyMatch1', + attributes: { + matchEvidence: [ + { + '@type': ['https://share.osf.io/vocab/2023/trove/IriMatchEvidence'], + osfmapPropertyPath: 'resourceType', + matchingIri: 'rdf:Property', + }, + ], + cardSearchResultCount: 345, + propertyPath: [ + { + '@id': 'http://purl.org/dc/terms/license', + resourceType: [ + { + '@id': 'Property', + }, + ], + displayLabel: [ + { + '@value': 'License', + '@language': 'en', + }, + ], + shortFormLabel: [ + { + '@value': 'rights', + '@language': 'en', + }, + ], + }, + ], + }, + }, + { + type: 'related-property-path', + id: 'propertyMatch2', + attributes: { + matchEvidence: [ + { + '@type': ['https://share.osf.io/vocab/2023/trove/IriMatchEvidence'], + osfmapPropertyPath: 'resourceType', + matchingIri: 'rdf:Property', + }, + ], + cardSearchResultCount: 123, + propertyPath: [ + { + '@id': 'http://purl.org/dc/terms/published', + resourceType: [ + { + '@id': 'Property', + }, + ], + displayLabel: [ + { + '@value': 'Date Published', + '@language': 'en', + }, + ], + shortFormLabel: [ + { + '@value': 'datePublished', + '@language': 'en', + }, + ], + }, + ], + }, + }, + { + type: 'related-property-path', + id: 'propertyMatch3', + attributes: { + matchEvidence: [ + { + '@type': ['https://share.osf.io/vocab/2023/trove/IriMatchEvidence'], + osfmapPropertyPath: 'resourceType', + matchingIri: 'rdf:Property', + }, + ], + cardSearchResultCount: 33, + propertyPath: [ + { + '@id': 'http://purl.org/dc/terms/funder', + resourceType: [ + { + '@id': 'Property', + }, + ], + displayLabel: [ + { + '@value': 'Funder', + '@language': 'en', + }, + ], + shortFormLabel: [ + { + '@value': 'funder', + '@language': 'en', + }, + ], + }, + ], + }, + }, + ], + }; +} + +export function valueSearch(_: Schema, __: Request) { + const property1Id = faker.random.uuid(); + const property2Id = faker.random.uuid(); + return { + data: { + type: 'index-value-search', + id: 'lmnop', + attributes: { + valueSearchText: 'Institute of Health', + valueSearchFilter: [ + { + osfmapPropertyPath: 'resourceType', + filterType: 'eq', + filterValues: ['datacite:Funder'], + }, + ], + cardSearchText: 'influenza', + cardSearchFilter: [ + { + osfmapPropertyPath: 'resourceType', + filterType: 'eq', + filterValues: ['datacite:Dataset'], + }, + ], + totalResultCount: 2, + }, + relationships: { + searchResultPage: { + data: [ + {type: 'search-result', id: property1Id}, + {type: 'search-result', id: property2Id}, + ], + links: { + next: { + href: 'https://staging-share.osf.io/api/v3/index-value-search?page%5Bcursor%5D=lmnop', + }, + }, + }, + }, + }, + included: [ + { + type: 'search-result', + id: property1Id, + attributes: { + matchEvidence: [ + { + '@type': ['https://share.osf.io/vocab/2023/trove/TextMatchEvidence'], + osfmapPropertyPath: 'title', + matchingHighlight: 'National Institute of Health', + }, + ], + cardSearchResultCount: 2134, + }, + relationships: { + indexCard: { + data: {type: 'index-card', id: property1Id}, + links: {related: 'https://share.osf.example/index-card/abc'}, + }, + }, + }, + { + type: 'search-result', + id: property2Id, + attributes: { + matchEvidence: [ + { + '@type': ['https://share.osf.io/vocab/2023/trove/TextMatchEvidence'], + osfmapPropertyPath: 'title', + matchingHighlight: 'Virginia Institute of Health', + }, + ], + cardSearchResultCount: 2, + }, + relationships: { + indexCard: { + data: {type: 'index-card', id: property2Id}, + links: {related: 'https://share.osf.example/index-card/def'}, + }, + }, + }, + { + type: 'index-card', + id: property1Id, + attributes: { + resourceType: 'osf:Funder', + resourceIdentifier: 'http://dx.doi.org/10.10000/505000005050', + resourceMetadata: { + '@id': 'http://dx.doi.org/10.10000/505000005050', + '@type': 'datacite:Funder', + title: [{'@value': faker.lorem.words(3), '@language':'en'}], + }, + }, + }, + { + type: 'index-card', + id: property2Id, + attributes: { + resourceType: 'osf:Funder', + resourceIdentifier: 'https://doi.org/10.10000/100000001', + resourceMetadata: { + '@id': 'http://dx.doi.org/10.10000/100000001', + '@type': 'datacite:Funder', + title: [{'@value':faker.lorem.word(), '@language':'en'}], + }, + }, + }, + ], + }; +} diff --git a/package.json b/package.json index 1306487c4a0..4bf66885a4d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ember-osf-web", - "version": "23.09.0", + "version": "23.10.0", "private": true, "description": "Ember front-end for the Open Science Framework", "homepage": "https://github.com/CenterForOpenScience/ember-osf-web#readme", @@ -267,6 +267,7 @@ "lib/analytics-page", "lib/assets-prefix-middleware", "lib/collections", + "lib/app-components", "lib/osf-components", "lib/registries" ] diff --git a/tests/acceptance/institutions/discover-test.ts b/tests/acceptance/institutions/discover-test.ts new file mode 100644 index 00000000000..e7925b7322a --- /dev/null +++ b/tests/acceptance/institutions/discover-test.ts @@ -0,0 +1,49 @@ +import { currentURL, visit } from '@ember/test-helpers'; +import { setupMirage } from 'ember-cli-mirage/test-support'; +import { percySnapshot } from 'ember-percy'; +import { setBreakpoint } from 'ember-responsive/test-support'; +import { module, skip } from 'qunit'; +import { click, setupOSFApplicationTest} from 'ember-osf-web/tests/helpers'; + +module('Acceptance | institutions | discover', hooks => { + setupOSFApplicationTest(hooks); + setupMirage(hooks); + + skip('Desktop: Default colors', async assert => { + server.create('institution', { + id: 'has-users', + }, 'withMetrics'); + await visit('/institutions/has-users'); + // verify institutions route + assert.equal(currentURL(), '/institutions/has-users', 'Current route is institutions discover'); + assert.dom('[data-test-heading-wrapper]').exists('Institutions heading wrapper shown'); + // verify banner and description + assert.dom('[data-test-institution-banner]').exists('Institution banner shown'); + assert.dom('[data-test-institution-description]').exists('Institution description shown'); + // verify topbar and sort dropdown + assert.dom('[data-test-topbar-wrapper]').exists('Topbar not shown on mobile'); + assert.dom('[data-test-topbar-sort-dropdown]').exists('Sort dropdown shown on desktop'); + await percySnapshot(assert); + }); + + skip('Mobile: Default colors', async assert => { + setBreakpoint('mobile'); + server.create('institution', { + id: 'has-users', + }, 'withMetrics'); + // verify institutions route + await visit('/institutions/has-users'); + assert.equal(currentURL(), '/institutions/has-users', 'Current route is institutions discover'); + // verify logo and description + assert.dom('[data-test-institution-logo]').exists('Institution header logo shown'); + assert.dom('[data-test-institution-description]').exists('Institution description is shown'); + // verify mobile menu display + assert.dom('[data-test-topbar-wrapper]').doesNotExist('Topbar not shown on mobile'); + assert.dom('[data-test-toggle-side-panel]').exists('Institution header logo shown'); + await click('[data-test-toggle-side-panel]'); + // verify resource type and sort by dropdown + assert.dom('[data-test-left-panel-object-type-dropdown]').exists('Mobile resource type dropdown is shown'); + assert.dom('[data-test-left-panel-sort-dropdown]').exists('Mobile sort by dropdown is shown'); + await percySnapshot(assert); + }); +}); diff --git a/tests/acceptance/preprints/discover-test.ts b/tests/acceptance/preprints/discover-test.ts new file mode 100644 index 00000000000..0804d81b7e3 --- /dev/null +++ b/tests/acceptance/preprints/discover-test.ts @@ -0,0 +1,60 @@ +import { click, currentRouteName } from '@ember/test-helpers'; +import { ModelInstance } from 'ember-cli-mirage'; +import { setupMirage } from 'ember-cli-mirage/test-support'; +import { TestContext } from 'ember-test-helpers'; +import { percySnapshot } from 'ember-percy'; +import { setBreakpoint } from 'ember-responsive/test-support'; +import { module, skip } from 'qunit'; + +import { setupOSFApplicationTest, visit } from 'ember-osf-web/tests/helpers'; +import PreprintProviderModel from 'ember-osf-web/models/preprint-provider'; + +interface PreprintDiscoverTestContext extends TestContext { + provider: ModelInstance; +} + +module('Acceptance | preprints | discover', hooks => { + setupOSFApplicationTest(hooks); + setupMirage(hooks); + + hooks.beforeEach(async function(this: PreprintDiscoverTestContext) { + server.loadFixtures('preprint-providers'); + const provider = server.schema.preprintProviders.find('thesiscommons') as ModelInstance; + const brand = server.create('brand'); + provider.update({ + brand, + description: 'This is the description for Thesis Commons', + }); + this.provider = provider; + }); + + skip('Desktop', async function(this: PreprintDiscoverTestContext, assert) { + await visit(`/preprints/${this.provider.id}/discover`); + assert.equal(currentRouteName(), 'preprints.discover', 'Current route is preprints discover'); + const pageTitle = document.getElementsByTagName('title')[0].innerText; + assert.equal(pageTitle, 'Thesis Commons | Search', 'Page title is correct'); + assert.dom('[data-test-search-provider-logo]').exists('Desktop: Preprint provider logo is shown'); + assert.dom('[data-test-search-provider-description]').exists('Desktop: Preprint provider description is shown'); + assert.dom('[data-test-search-header]').doesNotExist('Desktop: Non-branded search header is not shown'); + assert.dom('[data-test-topbar-object-type-nav]').doesNotExist('Desktop: Object type nav is not shown'); + assert.dom('[data-test-middle-search-count]').exists('Desktop: Result count is shown in middle panel'); + await percySnapshot(assert); + }); + + skip('mobile', async function(this: PreprintDiscoverTestContext, assert) { + setBreakpoint('mobile'); + await visit(`/preprints/${this.provider.id}/discover`); + assert.equal(currentRouteName(), 'preprints.discover', 'Current route is preprints discover'); + assert.dom('[data-test-search-provider-logo]').exists('Mobile: Preprint provider logo is shown'); + assert.dom('[data-test-search-provider-description]').exists('Mobile: Preprint provider description is shown'); + assert.dom('[data-test-search-header]').doesNotExist('Mobile: Non-branded search header is not shown'); + assert.dom('[data-test-topbar-object-type-nav]').doesNotExist('Mobile: Object type nav is not shown'); + assert.dom('[data-test-middle-search-count]').doesNotExist('Mobile: Result count is not shown in middle panel'); + assert.dom('[data-test-toggle-side-panel]').exists('Mobile: Toggle side panel button is shown'); + await click('[data-test-toggle-side-panel]'); + assert.dom('[data-test-left-search-count]').exists('Mobile: Result count is shown in side panel'); + assert.dom('[data-test-left-panel-object-type-dropdown]') + .doesNotExist('Mobile: Object type dropdown is not shown'); + await percySnapshot(assert); + }); +}); diff --git a/tests/acceptance/search/search-filters-test.ts b/tests/acceptance/search/search-filters-test.ts new file mode 100644 index 00000000000..ef31ca35de8 --- /dev/null +++ b/tests/acceptance/search/search-filters-test.ts @@ -0,0 +1,60 @@ +import { click as untrackedClick, visit } from '@ember/test-helpers'; +import { setupMirage } from 'ember-cli-mirage/test-support'; +import { click, setupOSFApplicationTest } from 'ember-osf-web/tests/helpers'; +import { clickTrigger } from 'ember-power-select/test-support/helpers'; +import { module, test } from 'qunit'; + + +const moduleName = 'Acceptance | search | filters'; + +module(moduleName, hooks => { + setupOSFApplicationTest(hooks); + setupMirage(hooks); + + test('add and remove search filters', async assert => { + // Load search page + await visit('/search'); + // assert there are search filters after initial search + assert.dom('[data-test-filter-facet]').exists({ count: 3 }, 'Filterable properties shown after initial search'); + // assert that mobile only side panel toggle is not shown + assert.dom('[data-test-toggle-side-panel]').doesNotExist('Side panel toggle not shown in desktop view'); + // assert there are no active filters + assert.dom('[data-test-active-filter]').doesNotExist('No active filters shown initially'); + // expand a filterable property + await click('[data-test-filter-facet-toggle="License"]'); + // ensure there are filter options + assert.dom('[data-test-filter-facet-value]') + .exists({ count: 2 }, 'Filter options shown after expanding a filterable property'); + // click on a filter option + await click('[data-test-filter-facet-value] button'); + // assert there is one active filter + assert.dom('[data-test-active-filter]') + .exists({ count: 1 }, 'Active filter shown after clicking a filter option'); + // remove the active filter + await click('[data-test-remove-active-filter]'); + }); + + test('add a search filter using the see-more modal', async assert => { + // Load search page + await visit('/search'); + // assert there are no search filters + assert.dom('[data-test-filter-facet]').exists({ count: 3 }, 'Filterable properties shown after initial search'); + // click the first filterable property + await click('[data-test-filter-facet-toggle="License"]'); + // open the see-more modal + await click('[data-test-see-more-filterable-values]'); + assert.dom('[data-test-see-more-dialog-heading]').containsText('License', 'See more modal shown'); + assert.dom('[data-test-property-value-select]') + .containsText('Search for a filter to apply', 'Placeholder message shown in select'); + assert.dom('[data-test-see-more-dialog-apply-button]').isDisabled('Apply button disabled initially'); + // select a filter value + await clickTrigger('[data-test-dialog]'); + await untrackedClick('[data-option-index="0"]'); + assert.dom('[data-test-see-more-dialog-apply-button]') + .isNotDisabled('Apply button enabled after selecting a filter'); + // apply the filter + await click('[data-test-see-more-dialog-apply-button]'); + assert.dom('[data-test-see-more-dialog-heading]').doesNotExist('See more modal closed after applying filter'); + assert.dom('[data-test-active-filter]').exists({ count: 1 }, 'Active filter shown after applying filter'); + }); +}); diff --git a/tests/acceptance/search/search-help-test.ts b/tests/acceptance/search/search-help-test.ts new file mode 100644 index 00000000000..9fb15922353 --- /dev/null +++ b/tests/acceptance/search/search-help-test.ts @@ -0,0 +1,80 @@ +import { click, currentURL, visit } from '@ember/test-helpers'; +import { setupMirage } from 'ember-cli-mirage/test-support'; +import { module, test } from 'qunit'; +import { setupOSFApplicationTest } from 'ember-osf-web/tests/helpers'; +import { EnginesIntlTestContext } from 'ember-engines/test-support'; + +module('Integration | Component | Search help', hooks => { + setupOSFApplicationTest(hooks); + setupMirage(hooks); + + test('ember popover renders', async function(this: EnginesIntlTestContext, assert) { + await visit('/search'); + assert.equal(currentURL(), '/search'); + + // start help tutorial + assert.dom('[data-test-start-help]').exists(); + await click('[data-test-start-help]'); + + // verify first popover displays + assert.dom('[data-test-search-help-1]').exists(); + // verify skip button present + assert.dom('[data-test-help-skip-1]').exists(); + assert.dom('[data-test-help-skip-1]').hasText('Skip'); + // verify next button works + assert.dom('[data-test-help-next-1]').exists(); + assert.dom('[data-test-help-next-1]').hasText('Next'); + // verify first popover content + assert.dom('[data-test-help-heading-1]').exists(); + assert.dom('[data-test-help-heading-1]').hasText('Improved OSF Search'); + assert.dom('[data-test-help-body-1]').exists(); + assert.dom('[data-test-help-body-1]').hasText(`Enter any term in the search box + and filter by specific object types. More information is available on our help guides.`); + assert.dom('[data-test-help-enumeration-1]').exists(); + assert.dom('[data-test-help-enumeration-1]').hasText('1 of 3'); + + // verify second popover displays + await click('[data-test-help-next-1]'); + assert.dom('[data-test-search-help-2]').exists(); + // verify second popover content + assert.dom('[data-test-help-heading-2]').exists(); + assert.dom('[data-test-help-heading-2]').hasText('Refine Your Search'); + assert.dom('[data-test-help-body-2]').exists(); + assert.dom('[data-test-help-body-2]').hasText(`Narrow the source, discipline, and more. + For example, find content supported by a specific funder or view only datasets.`); + assert.dom('[data-test-help-enumeration-2]').exists(); + assert.dom('[data-test-help-enumeration-2]').hasText('2 of 3'); + + // verify third popover displays + await click('[data-test-help-next-2]'); + assert.dom('[data-test-search-help-3]').exists(); + // verify third popover content + assert.dom('[data-test-help-heading-3]').exists(); + assert.dom('[data-test-help-heading-3]').hasText('Add Metadata'); + assert.dom('[data-test-help-body-3]').exists(); + assert.dom('[data-test-help-body-3]').hasText(`Remember to add metadata and resources + to your own work on OSF to make it more discoverable! Learn more in our help guides.`); + assert.dom('[data-test-help-enumeration-3]').exists(); + assert.dom('[data-test-help-enumeration-3]').hasText('3 of 3'); + + // verify popover closes + assert.dom('[data-test-help-done]').exists(); + assert.dom('[data-test-help-done]').hasText('Done'); + await click('[data-test-help-done]'); + assert.dom('[data-test-search-help-1]').isNotVisible(); + }); + + test('help tutorial can be skipped', async assert => { + await visit('/search'); + assert.equal(currentURL(), '/search'); + + // verify help tutorial starts + assert.dom('[data-test-start-help]').exists(); + await click('[data-test-start-help]'); + + // verify skip button works + assert.dom('[data-test-help-skip-1]').exists(); + await click('[data-test-help-skip-1]'); + assert.dom('[data-test-search-help-1]').isNotVisible(); + }); +}); diff --git a/tests/acceptance/search/search-query-params-test.ts b/tests/acceptance/search/search-query-params-test.ts new file mode 100644 index 00000000000..c0156b960d3 --- /dev/null +++ b/tests/acceptance/search/search-query-params-test.ts @@ -0,0 +1,96 @@ +import { click as untrackedClick, visit } from '@ember/test-helpers'; +import { setupMirage } from 'ember-cli-mirage/test-support'; +import { setBreakpoint } from 'ember-responsive/test-support'; +import { clickTrigger } from 'ember-power-select/test-support/helpers'; +import { module, test } from 'qunit'; + +import { click, currentURL, setupOSFApplicationTest } from 'ember-osf-web/tests/helpers'; + +const moduleName = 'Acceptance | search | query-params'; + +module(moduleName, hooks => { + setupOSFApplicationTest(hooks); + setupMirage(hooks); + + test('default query-parameters', async assert => { + // Load search page + await visit('/search'); + // assert object type nav is shown + assert.dom('[data-test-topbar-object-type-nav]').exists('Object type nav shown in desktop view'); + assert.dom('[data-test-left-panel-object-type-dropdown]') + .doesNotExist('Left-panel object type dropdown not shown in desktop view'); + // assert sort dropdown is shown + assert.dom('[data-test-topbar-sort-dropdown]').exists('Sort dropdown shown in desktop view'); + assert.dom('[data-test-left-panel-sort-dropdown]') + .doesNotExist('Left-panel sort dropdown not shown in desktop view'); + // assert default query-param values + assert.equal(currentURL(), '/search', 'Default query-params are empty'); + assert.dom('[data-test-topbar-object-type-link="All"]').hasClass('active', 'All is the default object type'); + assert.dom('[data-test-topbar-sort-dropdown]').containsText('Relevance', 'Relevance is the default sort'); + // change object type + await click('[data-test-topbar-object-type-link="Projects"]'); + assert.dom('[data-test-topbar-object-type-link="Projects"]').hasClass('active', 'Projects is selected'); + assert.dom('[data-test-topbar-object-type-link="All"]').doesNotHaveClass('active', 'All is not selected'); + assert.equal(currentURL(), '/search?resourceType=Project%2CProjectComponent', 'Query-params are updated'); + // change sort + await clickTrigger('[data-test-topbar-sort-dropdown]'); + await untrackedClick('[data-option-index="2"]'); // date-createst, oldest + assert.dom('[data-test-topbar-sort-dropdown]').containsText('Date created, oldest', + 'Date created, oldest first is selected'); + assert.equal( + currentURL(), + '/search?resourceType=Project%2CProjectComponent&sort=dateCreated', + 'Query-params are updated', + ); + }); + + test('default query-parameters, mobile', async assert => { + setBreakpoint('mobile'); + // Load search page + await visit('/search'); + // assert object type nav is shown + await click('[data-test-toggle-side-panel]'); + assert.dom('[data-test-topbar-object-type-nav]').doesNotExist('Object type nav not shown in mobile view'); + assert.dom('[data-test-left-panel-object-type-dropdown]') + .exists('Left-panel object type dropdown shown in mobile view'); + // assert sort dropdown is shown + assert.dom('[data-test-topbar-sort-dropdown]').doesNotExist('Sort dropdown not shown in mobile view'); + assert.dom('[data-test-left-panel-sort-dropdown]') + .exists('Left-panel sort dropdown shown in mobile view'); + // assert default query-param values + assert.equal(currentURL(), '/search', 'Default query-params are empty'); + assert.dom('[data-test-left-panel-object-type-dropdown]').containsText('All', 'All is the default object type'); + assert.dom('[data-test-left-panel-sort-dropdown]').containsText('Relevance', 'Relevance is the default sort'); + // change object type + await clickTrigger('[data-test-left-panel-object-type-dropdown]'); + await untrackedClick('[data-option-index="2"]'); // Registrations + assert.equal( + currentURL(), + '/search?resourceType=Registration%2CRegistrationComponent', + 'Object type query-param updated', + ); + // change sort + await clickTrigger('[data-test-left-panel-sort-dropdown]'); + await untrackedClick('[data-option-index="4"]'); // date-modified, oldest + assert.equal( + currentURL(), + '/search?resourceType=Registration%2CRegistrationComponent&sort=dateModified', + 'Query-params are updated', + ); + }); + + test('query-parameters from url', async assert => { + await visit('/search?resourceType=Preprint&sort=-dateModified'); + assert.dom('[data-test-topbar-object-type-link="Preprints"]') + .hasClass('active', 'Desktop: Active object type filter selected from url'); + assert.dom('[data-test-topbar-sort-dropdown]') + .containsText('Date modified, newest', 'Desktop: Active sort selected from url'); + + setBreakpoint('mobile'); + await click('[data-test-toggle-side-panel]'); + assert.dom('[data-test-left-panel-object-type-dropdown]') + .containsText('Preprints', 'Mobile: Active object type filter selected from url'); + assert.dom('[data-test-left-panel-sort-dropdown]') + .containsText('Date modified, newest', 'Mobile: Active sort selected from url'); + }); +}); diff --git a/tests/engines/registries/acceptance/branded/discover-test.ts b/tests/engines/registries/acceptance/branded/discover-test.ts index eb96a69feb9..3d101d7863e 100644 --- a/tests/engines/registries/acceptance/branded/discover-test.ts +++ b/tests/engines/registries/acceptance/branded/discover-test.ts @@ -78,12 +78,12 @@ module('Registries | Acceptance | branded.discover', hooks => { await visit(`/registries/${osfProvider.id}/discover`); assert.equal(currentRouteName(), - 'registries.discover', - '/registries/osf/discover redirects to registries/discover'); + 'search', + '/registries/osf/discover redirects to search page'); await visit(`/registries/${osfProvider.id}`); assert.equal(currentRouteName(), - 'registries.discover', - '/registries/osf redirects to registries/discover'); + 'registries.index', + '/registries/osf redirects to registries index page'); }); }); diff --git a/tests/engines/registries/acceptance/discover-page-test.ts b/tests/engines/registries/acceptance/discover-page-test.ts deleted file mode 100644 index 0f51b65892f..00000000000 --- a/tests/engines/registries/acceptance/discover-page-test.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { click, fillIn } from '@ember/test-helpers'; -import { setupMirage } from 'ember-cli-mirage/test-support'; -import { t } from 'ember-intl/test-support'; -import { percySnapshot } from 'ember-percy'; -import { module, test } from 'qunit'; - -import { visit } from 'ember-osf-web/tests/helpers'; -import { setupEngineApplicationTest } from 'ember-osf-web/tests/helpers/engines'; - -module('Registries | Acceptance | aggregate discover', hooks => { - setupEngineApplicationTest(hooks, 'registries'); - setupMirage(hooks); - - hooks.beforeEach(() => { - const osfProvider = server.create('registration-provider', { id: 'osf' }); - const anotherProvider = server.create('registration-provider', { id: 'another' }); - const externalProvider = server.create('external-provider', { shareSource: 'ClinicalTrials.gov' }); - server.createList('external-registration', 3, { provider: externalProvider }); - server.createList('registration', 3, { provider: osfProvider }); - server.createList('registration', 3, { provider: anotherProvider }); - }); - - test('page renders with all functionality', async assert => { - await visit('/registries/discover'); - await click('[data-test-sort-dropdown]'); - await percySnapshot('happy path'); - - const osfProvider = server.schema.registrationProviders.find('osf'); - const registrationIds = server.schema.registrations.all().models.map(item => item.id); - for (const id of registrationIds) { - assert.dom(`[data-test-result-title-id="${id}"]`).exists(); - } - assert.dom('[data-test-sort-dropdown]').exists('Sort dropdown exists'); - assert.dom('[data-test-active-filter]').doesNotExist('No filters are applied by default'); - assert.dom('[data-test-source-filter-id]').exists({ count: 3 }, 'Three sources exist'); - assert.dom('[data-test-page-number]').doesNotExist('No pagination for less than 10 registrations'); - - const searchableReg = server.schema.registrations.first(); - await fillIn('[data-test-search-box]', searchableReg.title); - assert.dom(`[data-test-result-title-id='${searchableReg.id}']`).exists('Search shows appropriate result'); - - await fillIn('[data-test-search-box]', ''); - - await click(`[data-test-source-filter-id="${osfProvider.shareSource}"]`); - assert.dom('[data-test-result-title-id]').exists({ count: 3 }, 'Provider filter works'); - - await fillIn('[data-test-search-box]', 'kjafnsdflkjhsdfnasdkndfa random string'); - assert.dom('[data-test-no-results-placeholder]').hasText(t('registries.discover.no_results')); - assert.dom('[data-test-result-title-id]').doesNotExist('No results rendered'); - }); - - test('paginator works', async assert => { - server.createList('registration', 2, { provider: server.schema.registrationProviders.first() }); - - await visit('/registries/discover/'); - - // Count is 4 including previous and next buttons - assert.dom('[data-test-page-number]').exists({ count: 4 }, 'Exactly two pages of results'); - assert.dom('[data-test-page-number="1"]').exists(); - assert.dom('[data-test-page-number="2"]').exists(); - assert.dom('[data-test-results-count]').hasText(t('registries.discover.registration_count', { count: 11 })); - - assert.dom('[data-test-result-title-id]').exists({ count: 10 }, 'First page has correct number of results'); - - await click('[data-test-page-number="2"]'); - assert.dom('[data-test-result-title-id]').exists({ count: 1 }, 'Second page has correct number of results'); - }); - - test('initial state from query params', async assert => { - const anotherProvider = server.schema.registrationProviders.find('another'); - const searchableReg = anotherProvider.registrations.models[0]; - - await visit(`/registries/discover?provider=${anotherProvider.shareSource}&q=${searchableReg.title}`); - - await percySnapshot('with initial query params'); - - assert.dom('[data-test-search-box]').hasValue(searchableReg.title, 'Search box has initial value'); - - assert.dom(`[data-test-source-filter-id='${anotherProvider.shareSource}']`).isChecked(); - assert.dom( - `[data-test-source-filter-id]:not([data-test-source-filter-id='${anotherProvider.shareSource}'])`, - ).isNotChecked(); - - assert.dom('[data-test-result-title-id]').exists({ count: 1 }, 'Initial search uses initial params'); - }); -}); diff --git a/tests/engines/registries/acceptance/landing-page-test.ts b/tests/engines/registries/acceptance/landing-page-test.ts index 1231065a1c5..f7f755250b6 100644 --- a/tests/engines/registries/acceptance/landing-page-test.ts +++ b/tests/engines/registries/acceptance/landing-page-test.ts @@ -28,10 +28,4 @@ module('Registries | Acceptance | landing page', hooks => { assert.dom('[data-test-search-box]').exists(); await percySnapshot(assert); }); - - test('visiting /registries/discover', async assert => { - await visit('/registries/discover/'); - assert.dom('[data-test-results]').exists(); - await percySnapshot(assert); - }); }); diff --git a/tests/engines/registries/integration/discover/discover-test.ts b/tests/engines/registries/integration/discover/discover-test.ts deleted file mode 100644 index 84279fc1532..00000000000 --- a/tests/engines/registries/integration/discover/discover-test.ts +++ /dev/null @@ -1,380 +0,0 @@ -import { click, fillIn, getRootElement, triggerEvent } from '@ember/test-helpers'; -import { setupMirage } from 'ember-cli-mirage/test-support'; -import { TestContext } from 'ember-test-helpers'; -import { OrderedSet, ValueObject } from 'immutable'; -import { module, test } from 'qunit'; -import sinon from 'sinon'; - -import { setupOSFApplicationTest, visit } from 'ember-osf-web/tests/helpers'; -import { loadEngine } from 'ember-osf-web/tests/helpers/engines'; -import param from 'ember-osf-web/utils/param'; - -import { SearchOptions, SearchOrder, SearchResults } from 'registries/services/search'; -import ShareSearch, { - ShareRegistration, - ShareTermsAggregation, - ShareTermsFilter, -} from 'registries/services/share-search'; - -const equals = (expected: ValueObject) => sinon.match((x: any) => expected.equals(x)); - -const emptyResults: SearchResults = { - total: 0, - results: [], - aggregations: { - sources: { - buckets: [], - }, - }, -}; - -// Default page ordering -const order = new SearchOrder({ - ascending: true, - display: 'registries.discover.order.relevance', - key: undefined, -}); - -const QueryParamTestCases: Array<{ - name: string, - params: { [key: string]: any }, - expected: { [key: string]: any }, - }> = [{ - name: 'Order by date_modified if no additional options are specified', - params: {}, - expected: { - query: '', - order: new SearchOrder({ - display: 'registries.discover.order.relevance', - ascending: false, - key: 'date_modified', - }), - }, - }, { - name: 'Basic query parameters', - params: { q: 'What', page: 10 }, - expected: { order, query: 'What', page: 10 }, - }, { - name: 'Providers Filters', - params: { q: 'Foo', provider: 'OSF Registries' }, - expected: { - order, - query: 'Foo', - filters: OrderedSet([ - new ShareTermsFilter('sources', 'OSF Registries', 'OSF Registries'), - ]), - }, - }, { - name: 'Multiple Providers Filters With Validation', - params: { q: 'Foo', provider: 'OSF Registries|ClinicalTrials.gov|Bar' }, - expected: { - order, - query: 'Foo', - filters: OrderedSet([ - new ShareTermsFilter('sources', 'OSF Registries', 'OSF Registries'), - new ShareTermsFilter('sources', 'ClinicalTrials.gov', 'ClinicalTrials.gov'), - ]), - }, - }, { - name: 'Sort', - params: { sort: 'date' }, - expected: { - query: '', - order: new SearchOrder({ - ascending: true, - display: 'registries.discover.order.modified_ascending', - key: 'date', - }), - }, - }, { - name: 'Sort decending', - params: { sort: '-date' }, - expected: { - query: '', - order: new SearchOrder({ - ascending: false, - display: 'registries.discover.order.modified_descending', - key: 'date', - }), - }, - }, { - name: 'Sort validation', - params: { q: 'Not Empty', sort: '-date_moodified' }, - expected: { order, query: 'Not Empty' }, - }, { - name: 'Registration Types without OSF', - params: { q: 'What', page: 10, type: 'Foo|BAR' }, - expected: { order, query: 'What', page: 10 }, - }, { - // NOTE: Not currently validated :( - name: 'Registration Types', - params: { q: 'What', page: 10, provider: 'OSF Registries', type: 'Foo|BAR' }, - expected: { - order, - query: 'What', - page: 10, - filters: OrderedSet([ - new ShareTermsFilter('sources', 'OSF Registries', 'OSF Registries'), - new ShareTermsFilter('registration_type', 'Foo', 'Foo'), - new ShareTermsFilter('registration_type', 'BAR', 'BAR'), - ]), - }, - }]; - -module('Registries | Integration | discover', hooks => { - setupOSFApplicationTest(hooks); - setupMirage(hooks); - - hooks.beforeEach(async function(this: TestContext) { - server.create('registration-schema', { name: 'Open Ended' }); - server.create('registration-schema', { name: 'Close Fronted' }); - server.create('registration-provider', { - id: 'osf', - shareSource: 'OSF Registries', - name: 'OSF Registries', - }); - server.create('registration-provider', { - id: 'someother', - shareSource: 'someother', - name: 'Some Other', - }); - server.create('registration-provider', { - id: 'clinicaltrials', - shareSource: 'ClinicalTrials.gov', - name: 'ClinicalTrials.gov', - }); - - const engine = await loadEngine('registries', 'registries'); - - const shareSearch = ShareSearch.create(); - - engine.register('service:share-search', shareSearch, { instantiate: false }); - this.owner.register('service:share-search', shareSearch, { instantiate: false }); - }); - - test('query parameters', async function(this: TestContext, assert: Assert) { - const stub = sinon.stub(this.owner.lookup('service:share-search'), 'registrations').returns(emptyResults); - - // Initial load so we don't have to deal with the aggregations loading - await visit('/registries/discover'); - assert.ok(stub.calledTwice, 'stub called twice upon discover page load'); - // Aggregations on load - assert.ok(stub.calledWith(new SearchOptions({ - size: 0, - modifiers: OrderedSet([ - new ShareTermsAggregation('sources', 'sources'), - ]), - })), 'stub called with the expected arguments'); - - for (const url of ['/--registries/registries/discover', '/registries/discover']) { - for (const testCase of QueryParamTestCases) { - stub.reset(); - stub.returns(emptyResults); - const params = param(testCase.params); - - await visit(`${url}?${params}`); - - assert.ok(true, testCase.name); - assert.ok(stub.calledOnce, 'stub called once'); - assert.ok( - stub.calledWith(new SearchOptions(testCase.expected)), - `stub called with the expected arguments for: url: ${url}, params: ${params}`, - ); - } - } - }); - - test('page resets on filtering', async function(this: TestContext, assert) { - assert.expect(3); - const stub = sinon.stub(this.owner.lookup('service:share-search'), 'registrations').returns({ - total: 0, - results: [], - aggregations: { - sources: { - buckets: [ - { key: 'OSF Registries', doc_count: 10 }, - { key: 'someother', doc_count: 10 }, - { key: 'clinicaltrials', doc_count: 10 }, - ], - }, - }, - }); - - await visit('/registries/discover?page=10'); - - assert.ok(stub.calledWith(new SearchOptions({ - query: '', - page: 10, - order: new SearchOrder({ - display: 'registries.discover.order.relevance', - ascending: false, - key: 'date_modified', - }), - })), '/registries/discover?page=10: stub called with expected arguments'); - - await click('[data-test-source-filter-id="OSF Registries"]'); - - assert.ok(stub.calledWith(new SearchOptions({ - query: '', - page: 1, - order, - filters: OrderedSet([ - new ShareTermsFilter('sources', 'OSF Registries', 'OSF Registries'), - ]), - })), 'stub called with expected arguments'); - }); - - test('page resets on sorting', async function(this: TestContext, assert) { - assert.expect(3); - const stub = sinon.stub(this.owner.lookup('service:share-search'), 'registrations').returns({ - total: 0, - results: [], - aggregations: { - sources: { - buckets: [{ key: 'OSF Registries', doc_count: 10 }], - }, - }, - }); - - await visit('/registries/discover?page=10'); - - assert.ok(stub.calledWith(new SearchOptions({ - query: '', - page: 10, - order: new SearchOrder({ - display: 'registries.discover.order.relevance', - ascending: false, - key: 'date_modified', - }), - })), 'stub for service:share-search.registrations called with expected arguments'); - - await click('[data-test-sort-dropdown]'); - await click('[data-test-sort-option-id="1"]'); - - assert.ok(stub.calledWith(new SearchOptions({ - query: '', - page: 1, - order: new SearchOrder({ - ascending: true, - display: 'registries.discover.order.modified_ascending', - key: 'date', - }), - })), 'stub for service:share-search.registrations called with expected arguments'); - }); - - test('page resets on typing query', async function(this: TestContext, assert) { - assert.expect(3); - const stub = sinon.stub(this.owner.lookup('service:share-search'), 'registrations').returns({ - total: 0, - results: [], - aggregations: { - sources: { - buckets: [{ key: 'OSF Registries', doc_count: 10 }], - }, - }, - }); - - await visit('/registries/discover?page=10'); - - assert.ok(stub.calledWith(equals(new SearchOptions({ - query: '', - page: 10, - order: new SearchOrder({ - display: 'registries.discover.order.relevance', - ascending: false, - key: 'date_modified', - }), - })))); - - await fillIn('[data-test-search-box]', 'Test Query'); - - assert.ok(stub.calledWith(equals(new SearchOptions({ - query: 'Test Query', - page: 1, - order: new SearchOrder({ - display: 'registries.discover.order.relevance', - ascending: true, - key: undefined, - }), - })))); - }); - - test('page resets on clicking search', async function(this: TestContext, assert) { - assert.expect(3); - sinon.stub(this.owner.lookup('service:analytics'), 'click'); - const stub = sinon.stub(this.owner.lookup('service:share-search'), 'registrations').returns({ - total: 0, - results: [], - aggregations: { - sources: { - buckets: [{ key: 'OSF Registries', doc_count: 10 }], - }, - }, - }); - - await visit('/registries/discover?page=10&q=Testing'); - - assert.ok(stub.calledWith(equals(new SearchOptions({ - query: 'Testing', - page: 10, - order: new SearchOrder({ - display: 'registries.discover.order.relevance', - ascending: true, - key: undefined, - }), - })))); - - await triggerEvent('[data-test-search-form]', 'submit'); - - assert.ok(stub.calledWith(equals(new SearchOptions({ - query: 'Testing', - page: 1, - order: new SearchOrder({ - display: 'registries.discover.order.relevance', - ascending: true, - key: undefined, - }), - })))); - }); - - test('scroll top on pagination', async function(this: TestContext, assert: Assert) { - assert.expect(3); - const results = { - total: 21, - results: Array(21).fill({ - title: 'place holder', - description: 'place holder', - contributors: [], - mainLink: 'fakeLink', - }), - aggregations: { - sources: { - buckets: [], - }, - }, - }; - - const stub = sinon.stub(this.owner.lookup('service:share-search'), 'registrations').returns(results); - - await visit('/registries/discover'); - - stub.reset(); - stub.returns(results); - - const resultsEl = getRootElement().querySelector('[data-test-results]')! as HTMLElement; - - const initialTopPosition = resultsEl.getBoundingClientRect().top; - await click('[data-test-page-number="2"]'); - const currentTopPosition = resultsEl.getBoundingClientRect().top; - assert.ok(currentTopPosition < initialTopPosition, 'we have scrolled'); - assert.ok(stub.calledWith(new SearchOptions({ - query: '', - page: 2, - order: new SearchOrder({ - display: 'registries.discover.order.relevance', - ascending: false, - key: 'date_modified', - }), - })), 'stub called with expected arguments'); - }); -}); diff --git a/tests/integration/components/open-badges-list/component-test.ts b/tests/integration/components/open-badges-list/component-test.ts index 6d6847cf8ad..971bf322cab 100644 --- a/tests/integration/components/open-badges-list/component-test.ts +++ b/tests/integration/components/open-badges-list/component-test.ts @@ -37,6 +37,7 @@ module('Integration | Component | open-badges-list', hooks => { @hasPapers={{true}} @hasSupplements={{true}} @registration='guid1' + @verticalLayout={{true}} />`); assert.dom('[data-test-badge-list-title]') .hasText(t('osf-components.open-badges-list.title'), 'Title shows in desktop'); @@ -52,6 +53,7 @@ module('Integration | Component | open-badges-list', hooks => { @hasPapers={{false}} @hasSupplements={{false}} @registration='guid1' + @verticalLayout={{true}} />`); assert.dom('[data-test-badge-list-title]') .doesNotExist('Title does not show in mobile'); @@ -65,6 +67,7 @@ module('Integration | Component | open-badges-list', hooks => { @hasAnalyticCode={{true}} @hasMaterials={{true}} @registration='guid1' + @verticalLayout={{true}} />`); assert.dom('[data-test-badge-image="data"]').hasAttribute( 'src', @@ -113,6 +116,7 @@ module('Integration | Component | open-badges-list | open-badge-card', hooks => @resourceType='data' @isMobile={{false}} @registration='guid1' + @verticalLayout={{true}} />`); assert.dom('[data-test-badge-image="data"]').hasAttribute( 'src', @@ -138,6 +142,7 @@ module('Integration | Component | open-badges-list | open-badge-card', hooks => @resourceType='materials' @isMobile={{true}} @registration='guid1' + @verticalLayout={{true}} />`); assert.dom('[data-test-badge-image="materials"]').hasAttribute( 'src', @@ -168,6 +173,7 @@ module('Integration | Component | open-badges-list | open-badge-card', hooks => @resourceType='materials' @isMobile={{true}} @registration='guid1' + @verticalLayout={{true}} />`); assert.dom('[data-test-badge-image="materials"]').hasAttribute( 'src', diff --git a/tests/integration/helpers/sufficient-contrast-test.ts b/tests/integration/helpers/sufficient-contrast-test.ts new file mode 100644 index 00000000000..8f66b86f7c3 --- /dev/null +++ b/tests/integration/helpers/sufficient-contrast-test.ts @@ -0,0 +1,66 @@ +/* eslint-disable max-len */ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Helper | sufficient-contrast', function(hooks) { + setupRenderingTest(hooks); + + test('it calculates normal text for AA', async function(assert) { + // 21:1 ratio + await render(hbs`{{if (sufficient-contrast '#000' '#fff') 'good contrast' 'poor contrast'}}`); + assert.equal(this.element.textContent!.trim(), 'good contrast', '21:1 passes AA using three digit hex colors'); + // 4.6:1 ratio + await render(hbs`{{if (sufficient-contrast '#757575' '#fff') 'good contrast' 'poor contrast'}}`); + assert.equal(this.element.textContent!.trim(), 'good contrast', '4.6:1 passes AA'); + // 4.47:1 ratio + await render(hbs`{{if (sufficient-contrast '#fff' '#777') 'good contrast' 'poor contrast'}}`); + assert.equal(this.element.textContent!.trim(), 'poor contrast', '4.47:1 fails AA'); + }); + + test('it calculates large text AA', async function(assert) { + // 3.26:1 ratio + await render( + hbs`{{if (sufficient-contrast '#0090FF' '#fff' largeText=true) 'good contrast' 'poor contrast'}}`, + ); + assert.equal(this.element.textContent!.trim(), 'good contrast', '3.26:1 passes AA Large Text'); + // 2.81:1 ratio + await render( + hbs`{{if (sufficient-contrast '#fff' '#00A0FF' largeText=true) 'good contrast' 'poor contrast'}}`, + ); + assert.equal(this.element.textContent!.trim(), 'poor contrast', '2.81:1 fails AA Large Text'); + }); + + test('it calculates normal text AAA', async function(assert) { + // 7.2:1 ratio + await render( + hbs`{{if (sufficient-contrast '#50AA50' '#000' useAAA=true) 'good contrast' 'poor contrast'}}`, + ); + assert.equal(this.element.textContent!.trim(), 'good contrast', '7.2:1 passes AAA'); + // 6.48:1 ratio + await render( + hbs`{{if (sufficient-contrast '#000' '#50A050' useAAA=true) 'good contrast' 'poor contrast'}}`, + ); + assert.equal(this.element.textContent!.trim(), 'poor contrast', '6.48:1 fails AAA'); + }); + + test('it calculates large text AAA', async function(assert) { + // 6.48:1 ratio + await render( + hbs`{{if (sufficient-contrast '#000' '#50AA50' largeText=true useAAA=true) 'good contrast' 'poor contrast'}}`, + ); + assert.equal(this.element.textContent!.trim(), 'good contrast', '6.48:1 passes AAA Large Text'); + // 4.49:1 ratio + await render( + hbs`{{if (sufficient-contrast '#333' '#00A0FF' largeText=true useAAA=true) 'good contrast' 'poor contrast'}}`, + ); + assert.equal(this.element.textContent!.trim(), 'poor contrast', '4.49:1 fails AAA Large Text'); + // 4.53:1 ratio + await render( + hbs`{{if (sufficient-contrast '#00A0FF' '#303333' largeText=true useAAA=true) 'good contrast' 'poor contrast'}}`, + ); + assert.equal(this.element.textContent!.trim(), 'good contrast', '4.53:1 passes AAA Large Text'); + }); + +}); diff --git a/tests/unit/models/preprint-provider-test.ts b/tests/unit/models/preprint-provider-test.ts index 23264f7bd6a..bcd5b8d77ac 100644 --- a/tests/unit/models/preprint-provider-test.ts +++ b/tests/unit/models/preprint-provider-test.ts @@ -9,4 +9,18 @@ module('Unit | Model | preprint-provider', hooks => { const model = run(() => this.owner.lookup('service:store').createRecord('preprint-provider')); assert.ok(!!model); }); + + test('it has the correct provider title', function(assert) { + const store = this.owner.lookup('service:store'); + const thesisCommons = store.createRecord('preprint-provider', { id: 'thesiscommons', name: 'Thesis Commons' }); + assert.equal(thesisCommons.get('providerTitle'), 'Thesis Commons'); + + const osf = store.createRecord('preprint-provider', { id: 'osf', preprintWord: 'preprint' }); + assert.equal(osf.get('providerTitle'), 'OSF Preprints'); + + const workrxiv = store.createRecord('preprint-provider', { + id: 'workrxiv', preprintWord: 'paper', name: 'WorkrXiv', + }); + assert.equal(workrxiv.get('providerTitle'), 'WorkrXiv Papers'); + }); }); diff --git a/translations/en-us.yml b/translations/en-us.yml index de875b8848b..c01af574c07 100644 --- a/translations/en-us.yml +++ b/translations/en-us.yml @@ -37,6 +37,7 @@ general: cancel: Cancel add: Add ok: OK + apply: Apply revisions: Revisions md5: MD5 date: Date @@ -208,6 +209,71 @@ dashboard: registries: 'OSF Registries' preprints: 'OSF Preprints' institutions: 'OSF Institutions' + +search: + page-title: 'Search' + index-card: + no-label: 'No label found' + no-title: 'No title found' + search-help: + header-1: 'Improved OSF Search' + header-2: 'Refine Your Search' + header-3: 'Add Metadata' + body-1: 'Enter any term in the search box and filter by specific object types. More information is available on our help guides.' + body-2: 'Narrow the source, discipline, and more. For example, find content supported by a specific funder or view only datasets.' + body-3: 'Remember to add metadata and resources to your own work on OSF to make it more discoverable! Learn more in our help guides.' + index-1: '1 of 3' + index-2: '2 of 3' + index-3: '3 of 3' + footer: + skip: 'Skip' + next: 'Next' + done: 'Done' + search-header: 'Search OSF' + textbox-placeholder: 'Enter search term(s) here' + search-button-label: 'Search' + search-help-label: 'Help tutorial' + total-results: '{count} results' + no-results: 'No results found' + resource-type: + search-by: 'Search by resource type' + all: 'All' + projects: 'Projects' + registrations: 'Registrations' + preprints: 'Preprints' + files: 'Files' + users: 'Users' + first: First + prev: Prev + next: Next + sort: + sort-by: 'Sort by' + relevance: 'Relevance' + created-date-descending: 'Date created, newest' + created-date-ascending: 'Date created, oldest' + modified-date-descending: 'Date modified, newest' + modified-date-ascending: 'Date modified, oldest' + toggle-sidenav: 'Toggle search sidebar' + left-panel: + header: Refine + no-filterable-properties: 'No properties' + active-filters: + remove-filter: 'Remove filter {property} {label}' + filter-facet: + facet-load-failed: 'Failed to load facet values' + see-more: 'See more' + see-more-modal-text: 'Please select a filter to apply to your search.' + see-more-modal-placeholder: 'Search for a filter to apply' + load-more: 'Load more' + has-resource: 'Has {resource}' + no-resource: 'No {resource}' + + institutions: + institution-logo: 'Logo for ' +helpers: + get-localized-property: + not-provided: 'Not provided' + new_project: header: 'Create new project' title_placeholder: 'Enter project title' @@ -260,7 +326,7 @@ move_to_project: go_to_project: 'Go to project' navbar: add: Add - # add_a_preprint: 'Add a {preprintWords.preprint}' + add_a_preprint: 'Add a {preprintWord}' add_registration: 'Add New' moderation: 'Moderation' browse: Browse @@ -268,6 +334,7 @@ navbar: donate: Donate go_home: 'Go home' my_projects: 'My Projects' + my_preprints: 'My Preprints' my_registrations: 'My Registrations' reviews: 'My Reviewing' search: Search @@ -545,7 +612,7 @@ node_navbar: settings: Settings comments: Comments status: - welcome_message: '

    Welcome to OSF!

    Visit our Guides to learn about creating a project, or get inspiration from popular public projects.

    ' + welcome_message: '

    Welcome to OSF!

    Visit our Guides to learn about creating a project, or get inspiration from popular public projects.

    ' alternate_email_error: 'The email address has NOT been added to your account. Please log out and revisit the link in your email. Thank you.' # remove_addon: 'Because the GitHub add-on for {extra.category} "{extra.title}" was authenticated by {extra.user}, authentication information has been deleted.' project_deleted: 'Project has been successfully deleted.' @@ -735,6 +802,8 @@ app_components: brand_color_inputs: primary_label: 'Brand Primary Color' primary_set: 'Set Primary Color' + secondary_label: 'Brand Secondary Color' + secondary_set: 'Set Secondary Color' error_page: email_message: 'If this should not have occurred and the issue persists, please report it to' go_to: 'Go to {brand}' @@ -1043,6 +1112,11 @@ collections: accept: accepted reject: rejected remove: 'removed' +preprints: + osf-title: 'OSF Preprints' + provider-title: '{name} {pluralizedPreprintWord}' + discover: + title: 'Search' registries: header: osf_registrations: 'OSF Registrations' @@ -1783,6 +1857,42 @@ routes: institution: Institution email: Email osf-components: + search-result-card: + language: Language + url: URL + resource_type: Resource type + title: Title + collection: Collection + context: Context + funder: Funder + registration_template: Registration template + doi: DOI + description: Description + license: License + from: From + date_created: Date created + date_registered: Date registered + date_modified: Date modified + last_edited: Last edited + member_since: Member since + preprint_provider: Preprint provider + registration_provider: Registration provider + conflict_of_interest: Conflict of Interest response + no_conflict_of_interest: 'Author asserted no Conflict of Interest' + associated_data: Associated data + associated_analysis_plan: Associated preregistration + associated_study_design: Associated study design + project: Project + registration: Registration + preprint: Preprint + file: File + user: User + project_component: Project component + registration_component: Registration component + link_to_orcid_id: Link to orcid id + withdrawn: Withdrawn + unknown: Unknown + remaining_count: '{count} more' resources-list: add_instructions: 'Link a DOI from a repository to your registration by clicking the green “+” button.' add_instructions_adhere: 'Contributors affirmed to adhere to the criteria for each badge.'