diff --git a/.changeset/famous-walls-visit.md b/.changeset/famous-walls-visit.md new file mode 100644 index 0000000000..b57702a392 --- /dev/null +++ b/.changeset/famous-walls-visit.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-search': patch +'@backstage/plugin-search-react': patch +--- + +Components ``, `` (including ``), `` (including `.Checkbox`, `.Select`, and `.Autocomplete` static prop components), ``, and `` are now exported from `@backstage/plugin-search-react`. They are now deprecated in `@backstage/plugin-search` and will be removed in a future release. diff --git a/.changeset/forty-timers-cheer.md b/.changeset/forty-timers-cheer.md new file mode 100644 index 0000000000..9fba60e6ed --- /dev/null +++ b/.changeset/forty-timers-cheer.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-scaffolder-backend': minor +--- + +**DEPRECATION**: The `projectid` input parameters to the `publish:gitlab:merge-request`, it's no longer required as it can be decoded from the `repoUrl` input parameter. +**DEPRECATION**: The `projectid` output of the action in favour of `projectPath` diff --git a/.changeset/giant-birds-wink.md b/.changeset/giant-birds-wink.md new file mode 100644 index 0000000000..c3dc2446b2 --- /dev/null +++ b/.changeset/giant-birds-wink.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-permission-node': patch +--- + +Added a new endpoint for aggregating permission metadata from a plugin backend: `/.well-known/backstage/permissions/metadata` + +By default, the metadata endpoint will return information about the permission rules supported by the plugin. Plugin authors can also provide an optional `permissions` parameter to `createPermissionIntegrationRouter`. If provided, these `Permission` objects will be included in the metadata returned by this endpoint. The `permissions` parameter will eventually be required in a future breaking change. diff --git a/.changeset/green-parents-pay.md b/.changeset/green-parents-pay.md new file mode 100644 index 0000000000..15ceab937d --- /dev/null +++ b/.changeset/green-parents-pay.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +Improved the `create-github-app` permissions selection prompt by converting it into a multi-select with clearer descriptions. The `members` permission is now also included in the list which is required for ingesting user data into the catalog. diff --git a/.changeset/lazy-zoos-move.md b/.changeset/lazy-zoos-move.md new file mode 100644 index 0000000000..69bd517438 --- /dev/null +++ b/.changeset/lazy-zoos-move.md @@ -0,0 +1,64 @@ +--- +'@backstage/plugin-catalog-backend-module-gitlab': patch +--- + +Add a new provider `GitlabDiscoveryEntityProvider` as replacement for `GitlabDiscoveryProcessor` + +In order to migrate from the `GitlabDiscoveryProcessor` you need to apply +the following changes: + +**Before:** + +```yaml +# app-config.yaml + +catalog: + locations: + - type: gitlab-discovery + target: https://company.gitlab.com/prefix/*/catalog-info.yaml +``` + +```ts +/* packages/backend/src/plugins/catalog.ts */ + +import { GitlabDiscoveryProcessor } from '@backstage/plugin-catalog-backend-module-gitlab'; + +const builder = await CatalogBuilder.create(env); +/** ... other processors ... */ +builder.addProcessor( + GitLabDiscoveryProcessor.fromConfig(env.config, { logger: env.logger }), +); +``` + +**After:** + +```yaml +# app-config.yaml + +catalog: + providers: + gitlab: + yourProviderId: # identifies your dataset / provider independent of config changes + host: gitlab-host # Identifies one of the hosts set up in the integrations + branch: main # Optional. Uses `master` as default + group: example-group # Group and subgroup (if needed) to look for repositories + entityFilename: catalog-info.yaml # Optional. Defaults to `catalog-info.yaml` +``` + +```ts +/* packages/backend/src/plugins/catalog.ts */ + +import { GitlabDiscoveryEntityProvider } from '@backstage/plugin-catalog-backend-module-gitlab'; + +const builder = await CatalogBuilder.create(env); +/** ... other processors and/or providers ... */ +builder.addEntityProvider( + ...GitlabDiscoveryEntityProvider.fromConfig(env.config, { + logger: env.logger, + schedule: env.scheduler.createScheduledTaskRunner({ + frequency: { minutes: 30 }, + timeout: { minutes: 3 }, + }), + }), +); +``` diff --git a/.changeset/pre.json b/.changeset/pre.json index cb5047cf20..1fce147888 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -1,5 +1,5 @@ { - "mode": "pre", + "mode": "exit", "tag": "next", "initialVersions": { "example-app": "0.2.71", diff --git a/.changeset/red-apes-tell.md b/.changeset/red-apes-tell.md new file mode 100644 index 0000000000..ee0ace6a4c --- /dev/null +++ b/.changeset/red-apes-tell.md @@ -0,0 +1,17 @@ +--- +'@backstage/create-app': patch +--- + +Components ``, ``, ``, and `` are now deprecated in `@backstage/plugin-search` and should be imported from `@backstage/plugin-search-react` instead. + +To upgrade your App, update the following in `packages/app/src/components/search/SearchPage.tsx`: + +```diff +import { + DefaultResultListItem + SearchBar + SearchFilter + SearchResult +- } from `@backstage/plugin-search`; ++ } from `@backstage/plugin-search-react`; +``` diff --git a/.changeset/search-wet-icons-shout.md b/.changeset/search-wet-icons-shout.md new file mode 100644 index 0000000000..de105cbde9 --- /dev/null +++ b/.changeset/search-wet-icons-shout.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search-backend-module-elasticsearch': patch +--- + +Now possible to set a custom index template on the elasticsearch search engine. diff --git a/.changeset/strange-flies-march.md b/.changeset/strange-flies-march.md new file mode 100644 index 0000000000..70a15b41d9 --- /dev/null +++ b/.changeset/strange-flies-march.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search': minor +--- + +The pre-alpha ``, ``, `etc...` components have been removed. In the unlikely event you were still using/referencing them, please update to using their non-`*Next` equivalents from either `@backstage/plugin-search-react` or `@backstage/plugin-search`. diff --git a/.changeset/tender-carpets-cry.md b/.changeset/tender-carpets-cry.md new file mode 100644 index 0000000000..a3d275fe33 --- /dev/null +++ b/.changeset/tender-carpets-cry.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-scaffolder': minor +'@backstage/plugin-scaffolder-backend': minor +--- + +Added the ability to support running of templates that are not in the `default` namespace diff --git a/.github/vale/Vocab/Backstage/accept.txt b/.github/vale/Vocab/Backstage/accept.txt index 7631640199..198a16e566 100644 --- a/.github/vale/Vocab/Backstage/accept.txt +++ b/.github/vale/Vocab/Backstage/accept.txt @@ -275,6 +275,7 @@ scrollbar seb semlas semver +serializable Serverless shoutout siloed diff --git a/ADOPTERS.md b/ADOPTERS.md index 755c4b0aa2..011d06981b 100644 --- a/ADOPTERS.md +++ b/ADOPTERS.md @@ -158,4 +158,5 @@ _If you're using Backstage in your organization, please try to add your company | [Meltwater](https://underthehood.meltwater.com) | [@spier](https://github.com/spier), [@remen](https://github.com/remen) | Improving developer experience by centralizing documentation and internal APIs. Goal: Foster InnerSource collaboration and speed up onboarding time in our 500+ people Product & Engineering org. | | [Doctolib](https://doctolib.engineering/) | [@djiit](https://github.com/djiit) | Rails modularization effort awareness, tech organization discoverability. Improving the daily workflows and collaboration processes of our engineers. | | [Twilio](https://www.twilio.com) | [Kyle Smith](https://github.com/knksmith57) | Developer portal, universal software catalog, and centralized taxonomy platform. | +| [OVHcloud](https://www.ovhcloud.com/fr/) | [Jean-Philippe Blary](https://github.com/blaryjp), [Arnaud Bauer](mailto:arnaud.bauer@ovhcloud.com), [Flavien Chantelot](https://github.com/Dorn-) | We're providing Backstage to our collaborators to ease their daily jobs, and let them extends it using plugins. | | [SANS Institute](https://www.sans.org) | [Christopher Klewin](mailto:cklewin@sans.org) | Developer portal for centralized visibility, reporting, and tooling across multiple organizations. | diff --git a/docs/assets/search/architecture.drawio.svg b/docs/assets/search/architecture.drawio.svg index 709a008b43..b85541b804 100644 --- a/docs/assets/search/architecture.drawio.svg +++ b/docs/assets/search/architecture.drawio.svg @@ -1,17 +1,36 @@ - + + + + + +
+
+
+
+ +
+ +
+
+
+
+ + + + - + -
+
@@ -21,7 +40,7 @@
- + @@ -103,11 +122,11 @@ - + -
+
@backstage/plugin-xyz @@ -115,7 +134,7 @@
- + @backstage/plugin-xyz @@ -251,10 +270,7 @@ - - - - + @@ -274,11 +290,14 @@ - + + + + -
+
@@ -288,18 +307,18 @@
- + Search API - - + + -
+
@@ -309,7 +328,7 @@
- + Components @@ -824,11 +843,11 @@ - + -
+
@@ -844,16 +863,19 @@
- + Individual frontend... - + + + + -
+
@@ -863,20 +885,79 @@
- + Search Cont... - - - - - - - - - + + + + + + + + + + + + + +
+
+
+ @backstage/plugin-search-react +
+
+
+ + + @backstage/plugin-search-react + + + + + + + + + + + +
+
+
+ + Components + +
+
+
+ + + Components + + + + + + + +
+
+
+ + Search Client + +
+
+
+ + + Search Client + + + diff --git a/docs/assets/software-catalog/software-model-core-entities.drawio.svg b/docs/assets/software-catalog/software-model-core-entities.drawio.svg old mode 100644 new mode 100755 index 2260e5502e..1a8f63f9b2 --- a/docs/assets/software-catalog/software-model-core-entities.drawio.svg +++ b/docs/assets/software-catalog/software-model-core-entities.drawio.svg @@ -1,3 +1,4 @@ + -
dependsOn
dependsOn
Resource
(e.g. SQL Database, S3 bucket, ...)
Resource...
consumesAPI
consumesAPI
API
(e.g. OpenAPI, gRPC API, Avro, Dataset, ...)
API...
providesAPI
providesAPI
Component
(e.g. backend service, data pipeline ...)
Component...Viewer does not support full SVG 1.1 \ No newline at end of file +
dependsOn
dependsOn
Resource
(e.g. SQL Database, S3 bucket, ...)
Resource...
consumesAPI
consumesAPI
API
(e.g. OpenAPI, gRPC API, Avro, Dataset, ...)
API...
providesAPI
providesAPI
Component
(e.g. backend service, data pipeline ...)
Component...
dependsOn
dependsOnText is not SVG - cannot display \ No newline at end of file diff --git a/docs/assets/software-catalog/software-model-entities.drawio.svg b/docs/assets/software-catalog/software-model-entities.drawio.svg old mode 100644 new mode 100755 index 7b8b88f224..e14cc93e62 --- a/docs/assets/software-catalog/software-model-entities.drawio.svg +++ b/docs/assets/software-catalog/software-model-entities.drawio.svg @@ -1,3 +1,4 @@ + -
Domain
Domain
partOf
partOf
System
System
dependsOn
dependsOn
partOf
partOf
Resource
(e.g. SQL Database, S3 bucket, ...)
Resource...
consumesAPI
consumesAPI
API
(e.g. OpenAPI, gRPC API, Avro, Dataset, ...)
API...
providesAPI
providesAPI
partOf
partOf
Component
(e.g. backend service, data pipeline ...)
Component...
partOf
partOfViewer does not support full SVG 1.1 \ No newline at end of file +
Domain
Domain
partOf
partOf
System
System
dependsOn
dependsOn
partOf
partOf
Resource
(e.g. SQL Database, S3 bucket, ...)
Resource...
consumesAPI
consumesAPI
API
(e.g. OpenAPI, gRPC API, Avro, Dataset, ...)
API...
providesAPI
providesAPI
partOf
partOf
Component
(e.g. backend service, data pipeline ...)
Component...
partOf
partOf
dependsOn
dependsOnText is not SVG - cannot display \ No newline at end of file diff --git a/docs/features/search/getting-started.md b/docs/features/search/getting-started.md index 14ad523740..d0e13eda55 100644 --- a/docs/features/search/getting-started.md +++ b/docs/features/search/getting-started.md @@ -18,7 +18,7 @@ If you haven't setup Backstage already, start ```bash # From your Backstage root directory -yarn add --cwd packages/app @backstage/plugin-search +yarn add --cwd packages/app @backstage/plugin-search @backstage/plugin-search-react ``` Create a new `packages/app/src/components/search/SearchPage.tsx` file in your @@ -33,7 +33,7 @@ import { SearchResult, DefaultResultListItem, SearchFilter, -} from '@backstage/plugin-search'; +} from '@backstage/plugin-search-react'; import { CatalogResultListItem } from '@backstage/plugin-catalog'; export const searchPage = ( @@ -213,7 +213,7 @@ apiRouter.use('/search', await search(searchEnv)); ### Frontend -The Search Plugin exposes several default filter types as static properties, +The Search Plugin web library (`@backstage/plugin-search-react`) exposes several default filter types as static properties, including `` and ``. These allow you to provide values relevant to your Backstage instance that, when selected, get passed to the backend. @@ -237,7 +237,7 @@ If you have advanced filter needs, you can specify your own filter component like this (although new core filter contributions are welcome): ```tsx -import { useSearch, SearchFilter } from '@backstage/plugin-search'; +import { useSearch, SearchFilter } from '@backstage/plugin-search-react'; const MyCustomFilter = () => { // Note: filters contain filter data from other filter components. Be sure diff --git a/docs/features/search/search-engines.md b/docs/features/search/search-engines.md index f1fd4bd62b..9bb8b8c343 100644 --- a/docs/features/search/search-engines.md +++ b/docs/features/search/search-engines.md @@ -102,6 +102,31 @@ import { Client } from '@elastic/elastic-search'; const client = searchEngine.newClient(options => new Client(options)); ``` +#### Set custom index template + +The elasticsearch engine gives you the ability to set a custom index template if needed. + +> Index templates define settings, mappings, and aliases that can be applied automatically to new indices. + +```typescript +// app/backend/src/plugins/search.ts +const searchEngine = await ElasticSearchSearchEngine.initialize({ + logger: env.logger, + config: env.config, +}); + +searchEngine.setIndexTemplate({ + name: '', + body: { + index_patterns: [''], + template: { + mappings: {}, + settings: {}, + }, + }, +}); +``` + ## Example configurations ### AWS diff --git a/docs/features/software-catalog/system-model.md b/docs/features/software-catalog/system-model.md index eedb94d02e..8a7e0cd30a 100644 --- a/docs/features/software-catalog/system-model.md +++ b/docs/features/software-catalog/system-model.md @@ -33,8 +33,8 @@ tracked in source control, or use some existing open source or commercial software. A component can implement APIs for other components to consume. In turn it might -depend on APIs implemented by other components, or resources that are attached -to it at runtime. +consume APIs implemented by other components, or directly depend on components or +resources that are attached to it at runtime. ### API diff --git a/docs/features/techdocs/README.md b/docs/features/techdocs/README.md index 48c469def7..761a247819 100644 --- a/docs/features/techdocs/README.md +++ b/docs/features/techdocs/README.md @@ -95,7 +95,7 @@ See [TechDocs Architecture](architecture.md) to get an overview of where the bel [techdocs/frontend-library]: https://github.com/backstage/backstage/blob/master/plugins/techdocs-react [techdocs/backend]: https://github.com/backstage/backstage/blob/master/plugins/techdocs-backend [techdocs/container]: https://github.com/backstage/techdocs-container -[techdocs/cli]: https://github.com/backstage/techdocs-cli +[techdocs/cli]: https://github.com/backstage/backstage/blob/master/packages/techdocs-cli ## Get involved diff --git a/docs/integrations/gitlab/discovery.md b/docs/integrations/gitlab/discovery.md index 3715b89920..ea151e9415 100644 --- a/docs/integrations/gitlab/discovery.md +++ b/docs/integrations/gitlab/discovery.md @@ -6,14 +6,55 @@ sidebar_label: Discovery description: Automatically discovering catalog entities from repositories in GitLab --- -The GitLab integration has a special discovery processor for discovering catalog -entities from GitLab. The processor will crawl the GitLab instance and register -entities matching the configured path. This can be useful as an alternative to +The GitLab integration has a special entity provider for discovering catalog +entities from GitLab. The entity provider will crawl the GitLab instance and register +entities matching the configured paths. This can be useful as an alternative to static locations or manually adding things to the catalog. -To use the discovery processor, you'll need a GitLab integration -[set up](locations.md) with a `token`. Then you can add a location target to the -catalog configuration: +To use the discovery provider, you'll need a GitLab integration +[set up](locations.md) with a `token`. Then you can add a provider config per group +to the catalog configuration: + +```yaml +catalog: + providers: + gitlab: + yourProviderId: + host: gitlab-host # Identifies one of the hosts set up in the integrations + branch: main # Optional. Uses `master` as default + group: example-group # Group and subgroup (if needed) to look for repositories + entityFilename: catalog-info.yaml # Optional. Defaults to `catalog-info.yaml` +``` + +As this provider is not one of the default providers, you will first need to install +the gitlab catalog plugin: + +```bash +# From the Backstage root directory +yarn add --cwd packages/backend @backstage/plugin-catalog-backend-module-gitlab +``` + +Once you've done that, you'll also need to add the segment below to `packages/backend/src/plugins/catalog.ts`: + +```ts +/* packages/backend/src/plugins/catalog.ts */ + +import { GitlabDiscoveryEntityProvider } from '@backstage/plugin-catalog-backend-module-gitlab'; + +const builder = await CatalogBuilder.create(env); +/** ... other processors and/or providers ... */ +builder.addEntityProvider( + ...GitlabDiscoveryEntityProvider.fromConfig(env.config, { + logger: env.logger, + schedule: env.scheduler.createScheduledTaskRunner({ + frequency: { minutes: 30 }, + timeout: { minutes: 3 }, + }), + }), +); +``` + +## Alternative processor ```yaml catalog: @@ -22,6 +63,9 @@ catalog: target: https://gitlab.com/group/subgroup/blob/main/catalog-info.yaml ``` +As alternative to the entity provider `GitlabDiscoveryEntityProvider` +you can still use the `GitLabDiscoveryProcessor`. + Note the `gitlab-discovery` type, as this is not a regular `url` processor. The target is composed of three parts: diff --git a/packages/app/src/components/search/SearchModal.tsx b/packages/app/src/components/search/SearchModal.tsx index 4af5511443..f5f4204302 100644 --- a/packages/app/src/components/search/SearchModal.tsx +++ b/packages/app/src/components/search/SearchModal.tsx @@ -38,16 +38,15 @@ import { catalogApiRef, CATALOG_FILTER_EXISTS, } from '@backstage/plugin-catalog-react'; +import { searchPlugin, SearchType } from '@backstage/plugin-search'; import { DefaultResultListItem, - SearchBar, SearchFilter, - searchPlugin, + SearchBar, SearchResult, SearchResultPager, - SearchType, -} from '@backstage/plugin-search'; -import { useSearch } from '@backstage/plugin-search-react'; + useSearch, +} from '@backstage/plugin-search-react'; import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs'; const useStyles = makeStyles(theme => ({ diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index ee144b2cde..9a2e85bd8c 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -29,15 +29,15 @@ import { catalogApiRef, CATALOG_FILTER_EXISTS, } from '@backstage/plugin-catalog-react'; +import { SearchType } from '@backstage/plugin-search'; import { DefaultResultListItem, SearchBar, SearchFilter, SearchResult, SearchResultPager, - SearchType, -} from '@backstage/plugin-search'; -import { useSearch } from '@backstage/plugin-search-react'; + useSearch, +} from '@backstage/plugin-search-react'; import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs'; import { Grid, List, makeStyles, Paper, Theme } from '@material-ui/core'; import React from 'react'; diff --git a/packages/cli/src/commands/create-github-app/GithubCreateAppServer.ts b/packages/cli/src/commands/create-github-app/GithubCreateAppServer.ts index 0fe321541e..70b8c0ca53 100644 --- a/packages/cli/src/commands/create-github-app/GithubCreateAppServer.ts +++ b/packages/cli/src/commands/create-github-app/GithubCreateAppServer.ts @@ -19,18 +19,6 @@ import openBrowser from 'react-dev-utils/openBrowser'; import { request } from '@octokit/request'; import express, { Express, Request, Response } from 'express'; -const MANIFEST_DATA = { - default_events: ['create', 'delete', 'push', 'repository'], - default_permissions: { - contents: 'read', - metadata: 'read', - }, - name: 'Backstage-', - url: 'https://backstage.io', - description: 'GitHub App for Backstage', - public: false, -}; - const FORM_PAGE = ` @@ -62,17 +50,17 @@ export class GithubCreateAppServer { static async run(options: { org: string; - readWrite: boolean; + permissions: string[]; }): Promise { const encodedOrg = encodeURIComponent(options.org); const actionUrl = `https://github.com/organizations/${encodedOrg}/settings/apps/new`; - const server = new GithubCreateAppServer(actionUrl, options.readWrite); + const server = new GithubCreateAppServer(actionUrl, options.permissions); return server.start(); } private constructor( private readonly actionUrl: string, - private readonly readWrite: boolean, + private readonly permissions: string[], ) { const webhookId = crypto .randomBytes(15) @@ -121,21 +109,29 @@ export class GithubCreateAppServer { if (!baseUrl) { throw new Error('baseUrl is not set'); } + const manifest = { - ...MANIFEST_DATA, + default_events: ['create', 'delete', 'push', 'repository'], + default_permissions: { + metadata: 'read', + ...(this.permissions.includes('members') && { members: 'read' }), + ...(this.permissions.includes('read') && { contents: 'read' }), + ...(this.permissions.includes('write') && { + contents: 'write', + actions: 'write', + }), + }, + name: 'Backstage-', + url: 'https://backstage.io', + description: 'GitHub App for Backstage', + public: false, redirect_url: `${baseUrl}/callback`, hook_attributes: { url: this.webhookUrl, active: false, }, - ...(this.readWrite && { - default_permissions: { - contents: 'write', - actions: 'write', - metadata: 'read', - }, - }), }; + const manifestJson = JSON.stringify(manifest).replace(/\"/g, '"'); let body = FORM_PAGE; diff --git a/packages/cli/src/commands/create-github-app/index.ts b/packages/cli/src/commands/create-github-app/index.ts index 175530402e..6b3e732f18 100644 --- a/packages/cli/src/commands/create-github-app/index.ts +++ b/packages/cli/src/commands/create-github-app/index.ts @@ -26,19 +26,38 @@ import openBrowser from 'react-dev-utils/openBrowser'; // due to lacking support for creating apps from manifests. // https://docs.github.com/en/free-pro-team@latest/developers/apps/creating-a-github-app-from-a-manifest export default async (org: string) => { - const answers: Answers = await inquirer.prompt([ - { - type: 'list', - name: 'appType', - message: chalk.blue('What will the app be used for [required]'), - choices: ['Read and Write (needed by Software Templates)', 'Read only'], - }, - ]); - const readWrite = answers.appType !== 'Read only'; + const answers: Answers = await inquirer.prompt({ + name: 'appType', + type: 'checkbox', + message: + 'Select permissions [required] (these can be changed later but then require approvals in all installations)', + choices: [ + { + name: 'Read access to content (required by Software Catalog to ingest data from repositories)', + value: 'read', + checked: true, + }, + { + name: 'Read access to members (required by Software Catalog to ingest GitHub teams)', + value: 'members', + checked: true, + }, + { + name: 'Read and Write to content and actions (required by Software Templates to create new repositories)', + value: 'write', + }, + ], + }); + + if (answers.appType.length === 0) { + console.log(chalk.red('You must select at least one permission')); + process.exit(1); + } + await verifyGithubOrg(org); const { slug, name, ...config } = await GithubCreateAppServer.run({ org, - readWrite, + permissions: answers.appType, }); const fileName = `github-app-${slug}-credentials.yaml`; diff --git a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx index d4c7c92346..1b3bf5b77d 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx @@ -8,14 +8,14 @@ import { } from '@backstage/plugin-catalog-react'; import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs'; +import { SearchType } from '@backstage/plugin-search'; import { + DefaultResultListItem, SearchBar, SearchFilter, SearchResult, - SearchType, - DefaultResultListItem, -} from '@backstage/plugin-search'; -import { useSearch } from '@backstage/plugin-search-react'; + useSearch, +} from '@backstage/plugin-search-react'; import { CatalogIcon, Content, diff --git a/plugins/catalog-backend-module-gitlab/api-report.md b/plugins/catalog-backend-module-gitlab/api-report.md index 63e6fe7ccb..1009da8209 100644 --- a/plugins/catalog-backend-module-gitlab/api-report.md +++ b/plugins/catalog-backend-module-gitlab/api-report.md @@ -6,8 +6,29 @@ import { CatalogProcessor } from '@backstage/plugin-catalog-backend'; import { CatalogProcessorEmit } from '@backstage/plugin-catalog-backend'; import { Config } from '@backstage/config'; +import { EntityProvider } from '@backstage/plugin-catalog-backend'; +import { EntityProviderConnection } from '@backstage/plugin-catalog-backend'; import { LocationSpec } from '@backstage/plugin-catalog-backend'; import { Logger } from 'winston'; +import { TaskRunner } from '@backstage/backend-tasks'; + +// @public +export class GitlabDiscoveryEntityProvider implements EntityProvider { + // (undocumented) + connect(connection: EntityProviderConnection): Promise; + // (undocumented) + static fromConfig( + config: Config, + options: { + logger: Logger; + schedule: TaskRunner; + }, + ): GitlabDiscoveryEntityProvider[]; + // (undocumented) + getProviderName(): string; + // (undocumented) + refresh(logger: Logger): Promise; +} // @public export class GitLabDiscoveryProcessor implements CatalogProcessor { diff --git a/plugins/catalog-backend-module-gitlab/config.d.ts b/plugins/catalog-backend-module-gitlab/config.d.ts new file mode 100644 index 0000000000..5b0d42c81d --- /dev/null +++ b/plugins/catalog-backend-module-gitlab/config.d.ts @@ -0,0 +1,55 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export interface Config { + catalog?: { + /** + * List of provider-specific options and attributes + */ + providers?: { + /** + * GitlabDiscoveryEntityProvider configuration + */ + gitlab?: Record< + string, + { + /** + * (Required) Gitlab's host name. + * @visibility backend + */ + host: string; + /** + * (Required) Gitlab's group[/subgroup] where the discovery is done. + * @visibility backend + */ + group: string; + /** + * (Optional) Default branch to read the catalog-info.yaml file. + * If not set, 'master' will be used. + * @visibility backend + */ + branch?: string; + /** + * (Optional) The name used for the catalog file. + * If not set, 'catalog-info.yaml' will be used. + * @visibility backend + */ + entityFilename?: string; + } + >; + }; + }; +} diff --git a/plugins/catalog-backend-module-gitlab/package.json b/plugins/catalog-backend-module-gitlab/package.json index d7909bf3b3..048ce85cb8 100644 --- a/plugins/catalog-backend-module-gitlab/package.json +++ b/plugins/catalog-backend-module-gitlab/package.json @@ -35,6 +35,7 @@ "dependencies": { "@backstage/backend-common": "^0.14.0-next.2", "@backstage/catalog-model": "^1.0.3-next.0", + "@backstage/backend-tasks": "^0.3.2-next.1", "@backstage/config": "^1.0.1", "@backstage/errors": "^1.0.0", "@backstage/integration": "^1.2.1-next.2", @@ -43,12 +44,14 @@ "lodash": "^4.17.21", "msw": "^0.42.0", "node-fetch": "^2.6.7", - "winston": "^3.2.1" + "winston": "^3.2.1", + "uuid": "^8.0.0" }, "devDependencies": { - "@backstage/backend-test-utils": "^0.1.25-next.2", - "@backstage/cli": "^0.17.2-next.2", - "@types/lodash": "^4.14.151" + "@backstage/backend-test-utils": "^0.1.25-next.1", + "@backstage/cli": "^0.17.2-next.1", + "@types/lodash": "^4.14.151", + "@types/uuid": "^8.0.0" }, "files": [ "dist" diff --git a/plugins/catalog-backend-module-gitlab/src/index.ts b/plugins/catalog-backend-module-gitlab/src/index.ts index e2a08509fb..3182210c81 100644 --- a/plugins/catalog-backend-module-gitlab/src/index.ts +++ b/plugins/catalog-backend-module-gitlab/src/index.ts @@ -21,3 +21,4 @@ */ export { GitLabDiscoveryProcessor } from './GitLabDiscoveryProcessor'; +export { GitlabDiscoveryEntityProvider } from './providers'; diff --git a/plugins/catalog-backend-module-gitlab/src/lib/client.test.ts b/plugins/catalog-backend-module-gitlab/src/lib/client.test.ts index e50ad34734..132dd0bc34 100644 --- a/plugins/catalog-backend-module-gitlab/src/lib/client.test.ts +++ b/plugins/catalog-backend-module-gitlab/src/lib/client.test.ts @@ -103,6 +103,21 @@ function setupFakeInstanceProjectsEndpoint( ); } +function setupFakeHasFileEndpoint(srv: SetupServerApi, apiBaseUrl: string) { + srv.use( + rest.head( + `${apiBaseUrl}/projects/group%2Frepo/repository/files/catalog-info.yaml`, + (req, res, ctx) => { + const branch = req.url.searchParams.get('ref'); + if (branch === 'master') { + return res(ctx.status(200)); + } + return res(ctx.status(404, 'Not Found')); + }, + ), + ); +} + describe('GitLabClient', () => { describe('isSelfManaged', () => { it('returns true if self managed instance', () => { @@ -266,3 +281,33 @@ describe('paginated', () => { expect(allItems).toHaveLength(4); }); }); + +describe('hasFile', () => { + let client: GitLabClient; + + beforeEach(() => { + setupFakeHasFileEndpoint(server, MOCK_CONFIG.apiBaseUrl); + client = new GitLabClient({ + config: MOCK_CONFIG, + logger: getVoidLogger(), + }); + }); + + it('should not find catalog file', async () => { + const hasFile = await client.hasFile( + 'group/repo', + 'master', + 'catalog-info.yaml', + ); + expect(hasFile).toBe(true); + }); + + it('should find catalog file', async () => { + const hasFile = await client.hasFile( + 'group/repo', + 'unknown', + 'catalog-info.yaml', + ); + expect(hasFile).toBe(false); + }); +}); diff --git a/plugins/catalog-backend-module-gitlab/src/lib/client.ts b/plugins/catalog-backend-module-gitlab/src/lib/client.ts index 27214f3be8..adf0a78e8f 100644 --- a/plugins/catalog-backend-module-gitlab/src/lib/client.ts +++ b/plugins/catalog-backend-module-gitlab/src/lib/client.ts @@ -63,6 +63,13 @@ export class GitLabClient { return this.pagedRequest(`/projects`, options); } + /** + * General existence check. + * + * @param projectPath - The path to the project + * @param branch - The branch used to search + * @param filePath - The path to the file + */ async hasFile( projectPath: string, branch: string, diff --git a/plugins/catalog-backend-module-gitlab/src/lib/index.ts b/plugins/catalog-backend-module-gitlab/src/lib/index.ts index 1df3d2cb84..53fad07994 100644 --- a/plugins/catalog-backend-module-gitlab/src/lib/index.ts +++ b/plugins/catalog-backend-module-gitlab/src/lib/index.ts @@ -15,4 +15,9 @@ */ export { GitLabClient, paginated } from './client'; -export type { GitLabProject } from './types'; +export type { + GitLabProject, + GitlabProviderConfig, + GitlabGroupDescription, +} from './types'; +export { readGitlabConfigs } from '../providers/config'; diff --git a/plugins/catalog-backend-module-gitlab/src/lib/types.ts b/plugins/catalog-backend-module-gitlab/src/lib/types.ts index d41ed73aac..69de9d28c7 100644 --- a/plugins/catalog-backend-module-gitlab/src/lib/types.ts +++ b/plugins/catalog-backend-module-gitlab/src/lib/types.ts @@ -14,10 +14,25 @@ * limitations under the License. */ +export type GitlabGroupDescription = { + id: number; + web_url: string; + projects: GitLabProject[]; +}; + export type GitLabProject = { id: number; default_branch?: string; archived: boolean; last_activity_at: string; web_url: string; + path_with_namespace?: string; +}; + +export type GitlabProviderConfig = { + host: string; + group: string; + id: string; + branch: string; + catalogFile: string; }; diff --git a/plugins/catalog-backend-module-gitlab/src/providers/GitlabDiscoveryEntityProvider.test.ts b/plugins/catalog-backend-module-gitlab/src/providers/GitlabDiscoveryEntityProvider.test.ts new file mode 100644 index 0000000000..dc70772d3d --- /dev/null +++ b/plugins/catalog-backend-module-gitlab/src/providers/GitlabDiscoveryEntityProvider.test.ts @@ -0,0 +1,230 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { getVoidLogger } from '@backstage/backend-common'; +import { TaskInvocationDefinition, TaskRunner } from '@backstage/backend-tasks'; +import { ConfigReader } from '@backstage/config'; +import { EntityProviderConnection } from '@backstage/plugin-catalog-backend'; +import { setupRequestMockHandlers } from '@backstage/backend-test-utils'; +import { GitlabDiscoveryEntityProvider } from './GitlabDiscoveryEntityProvider'; +import { rest } from 'msw'; +import { setupServer } from 'msw/node'; + +class PersistingTaskRunner implements TaskRunner { + private tasks: TaskInvocationDefinition[] = []; + + getTasks() { + return this.tasks; + } + + run(task: TaskInvocationDefinition): Promise { + this.tasks.push(task); + return Promise.resolve(undefined); + } +} + +const logger = getVoidLogger(); + +const server = setupServer(); + +describe('GitlabDiscoveryEntityProvider', () => { + setupRequestMockHandlers(server); + afterEach(() => jest.resetAllMocks()); + + it('no provider config', () => { + const schedule = new PersistingTaskRunner(); + const config = new ConfigReader({}); + const providers = GitlabDiscoveryEntityProvider.fromConfig(config, { + logger, + schedule, + }); + + expect(providers).toHaveLength(0); + }); + + it('single simple discovery config', () => { + const schedule = new PersistingTaskRunner(); + const config = new ConfigReader({ + integrations: { + gitlab: [ + { + host: 'test-gitlab', + apiBaseUrl: 'https://api.gitlab.example/api/v4', + token: '1234', + }, + ], + }, + catalog: { + providers: { + gitlab: { + 'test-id': { + host: 'test-gitlab', + group: 'test-group', + }, + }, + }, + }, + }); + const providers = GitlabDiscoveryEntityProvider.fromConfig(config, { + logger, + schedule, + }); + + expect(providers).toHaveLength(1); + expect(providers[0].getProviderName()).toEqual( + 'GitlabDiscoveryEntityProvider:test-id', + ); + }); + + it('multiple discovery configs', () => { + const schedule = new PersistingTaskRunner(); + const config = new ConfigReader({ + integrations: { + gitlab: [ + { + host: 'test-gitlab', + apiBaseUrl: 'https://api.gitlab.example/api/v4', + token: '1234', + }, + ], + }, + catalog: { + providers: { + gitlab: { + 'test-id': { + host: 'test-gitlab', + group: 'test-group', + }, + 'second-test': { + host: 'test-gitlab', + group: 'second-group', + }, + }, + }, + }, + }); + const providers = GitlabDiscoveryEntityProvider.fromConfig(config, { + logger, + schedule, + }); + + expect(providers).toHaveLength(2); + expect(providers[0].getProviderName()).toEqual( + 'GitlabDiscoveryEntityProvider:test-id', + ); + expect(providers[1].getProviderName()).toEqual( + 'GitlabDiscoveryEntityProvider:second-test', + ); + }); + + it('apply full update on scheduled execution', async () => { + const config = new ConfigReader({ + integrations: { + gitlab: [ + { + host: 'test-gitlab', + apiBaseUrl: 'https://api.gitlab.example/api/v4', + token: '1234', + }, + ], + }, + catalog: { + providers: { + gitlab: { + 'test-id': { + host: 'test-gitlab', + group: 'test-group', + }, + }, + }, + }, + }); + const schedule = new PersistingTaskRunner(); + const entityProviderConnection: EntityProviderConnection = { + applyMutation: jest.fn(), + }; + const provider = GitlabDiscoveryEntityProvider.fromConfig(config, { + logger, + schedule, + })[0]; + expect(provider.getProviderName()).toEqual( + 'GitlabDiscoveryEntityProvider:test-id', + ); + + server.use( + rest.get( + `https://api.gitlab.example/api/v4/groups/test-group/projects`, + (_req, res, ctx) => { + const response = [ + { + id: 123, + default_branch: 'master', + archived: false, + last_activity_at: new Date().toString(), + web_url: 'https://api.gitlab.example/test-group/test-repo', + path_with_namespace: 'test-group/test-repo', + }, + ]; + return res(ctx.json(response)); + }, + ), + rest.head( + 'https://api.gitlab.example/api/v4/projects/test-group%2Ftest-repo/repository/files/catalog-info.yaml', + (req, res, ctx) => { + if (req.url.searchParams.get('ref') === 'master') { + return res(ctx.status(200)); + } + return res(ctx.status(404, 'Not Found')); + }, + ), + ); + + await provider.connect(entityProviderConnection); + + const taskDef = schedule.getTasks()[0]; + expect(taskDef.id).toEqual('GitlabDiscoveryEntityProvider:test-id:refresh'); + await (taskDef.fn as () => Promise)(); + + const url = `https://api.gitlab.example/test-group/test-repo/-/blob/master/catalog-info.yaml`; + const expectedEntities = [ + { + entity: { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Location', + metadata: { + annotations: { + 'backstage.io/managed-by-location': `url:${url}`, + 'backstage.io/managed-by-origin-location': `url:${url}`, + }, + name: 'generated-cd37bf72a2fe92603f4255d9f49c6c1ead746a48', + }, + spec: { + presence: 'optional', + target: `${url}`, + type: 'url', + }, + }, + locationKey: 'GitlabDiscoveryEntityProvider:test-id', + }, + ]; + + expect(entityProviderConnection.applyMutation).toBeCalledTimes(1); + expect(entityProviderConnection.applyMutation).toBeCalledWith({ + type: 'full', + entities: expectedEntities, + }); + }); +}); diff --git a/plugins/catalog-backend-module-gitlab/src/providers/GitlabDiscoveryEntityProvider.ts b/plugins/catalog-backend-module-gitlab/src/providers/GitlabDiscoveryEntityProvider.ts new file mode 100644 index 0000000000..36c3ee90be --- /dev/null +++ b/plugins/catalog-backend-module-gitlab/src/providers/GitlabDiscoveryEntityProvider.ts @@ -0,0 +1,190 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { TaskRunner } from '@backstage/backend-tasks'; +import { Config } from '@backstage/config'; +import { GitLabIntegration, ScmIntegrations } from '@backstage/integration'; +import { + EntityProvider, + EntityProviderConnection, +} from '@backstage/plugin-catalog-backend'; +import { LocationSpec } from '@backstage/plugin-catalog-backend'; +import { Logger } from 'winston'; +import { + GitLabClient, + GitLabProject, + GitlabProviderConfig, + paginated, + readGitlabConfigs, +} from '../lib'; +import * as uuid from 'uuid'; +import { locationSpecToLocationEntity } from '@backstage/plugin-catalog-backend'; + +type Result = { + scanned: number; + matches: GitLabProject[]; +}; + +/** + * Discovers entity definition files in the groups of a Gitlab instance. + * @public + */ +export class GitlabDiscoveryEntityProvider implements EntityProvider { + private readonly config: GitlabProviderConfig; + private readonly integration: GitLabIntegration; + private readonly logger: Logger; + private readonly scheduleFn: () => Promise; + private connection?: EntityProviderConnection; + + static fromConfig( + config: Config, + options: { logger: Logger; schedule: TaskRunner }, + ): GitlabDiscoveryEntityProvider[] { + const providerConfigs = readGitlabConfigs(config); + const integrations = ScmIntegrations.fromConfig(config).gitlab; + const providers: GitlabDiscoveryEntityProvider[] = []; + + providerConfigs.forEach(providerConfig => { + const integration = integrations.byHost(providerConfig.host); + if (!integration) { + throw new Error( + `No gitlab integration found that matches host ${providerConfig.host}`, + ); + } + providers.push( + new GitlabDiscoveryEntityProvider({ + ...options, + config: providerConfig, + integration, + }), + ); + }); + return providers; + } + + private constructor(options: { + config: GitlabProviderConfig; + integration: GitLabIntegration; + logger: Logger; + schedule: TaskRunner; + }) { + this.config = options.config; + this.integration = options.integration; + this.logger = options.logger.child({ + target: this.getProviderName(), + }); + this.scheduleFn = this.createScheduleFn(options.schedule); + } + + getProviderName(): string { + return `GitlabDiscoveryEntityProvider:${this.config.id}`; + } + + async connect(connection: EntityProviderConnection): Promise { + this.connection = connection; + await this.scheduleFn(); + } + + private createScheduleFn(schedule: TaskRunner): () => Promise { + return async () => { + const taskId = `${this.getProviderName()}:refresh`; + return schedule.run({ + id: taskId, + fn: async () => { + const logger = this.logger.child({ + class: GitlabDiscoveryEntityProvider.prototype.constructor.name, + taskId, + taskInstanceId: uuid.v4(), + }); + + try { + await this.refresh(logger); + } catch (error) { + logger.error(error); + } + }, + }); + }; + } + + async refresh(logger: Logger): Promise { + if (!this.connection) { + throw new Error( + `Gitlab discovery connection not initialized for ${this.getProviderName()}`, + ); + } + + const client = new GitLabClient({ + config: this.integration.config, + logger: logger, + }); + + const projects = paginated( + options => client.listProjects(options), + { + group: this.config.group, + page: 1, + per_page: 50, + }, + ); + + const res: Result = { + scanned: 0, + matches: [], + }; + + for await (const project of projects) { + res.scanned++; + + if (project.archived) { + continue; + } + + if (this.config.branch === '*' && project.default_branch === undefined) { + continue; + } + + const project_branch = project.default_branch ?? this.config.branch; + + const projectHasFile: boolean = await client.hasFile( + project.path_with_namespace ?? '', + project_branch, + this.config.catalogFile, + ); + if (projectHasFile) { + res.matches.push(project); + } + } + + const locations = res.matches.map(p => this.createLocationSpec(p)); + await this.connection.applyMutation({ + type: 'full', + entities: locations.map(location => ({ + locationKey: this.getProviderName(), + entity: locationSpecToLocationEntity({ location }), + })), + }); + } + + private createLocationSpec(project: GitLabProject): LocationSpec { + const project_branch = project.default_branch ?? this.config.branch; + return { + type: 'url', + target: `${project.web_url}/-/blob/${project_branch}/${this.config.catalogFile}`, + presence: 'optional', + }; + } +} diff --git a/plugins/catalog-backend-module-gitlab/src/providers/config.test.ts b/plugins/catalog-backend-module-gitlab/src/providers/config.test.ts new file mode 100644 index 0000000000..d28930b151 --- /dev/null +++ b/plugins/catalog-backend-module-gitlab/src/providers/config.test.ts @@ -0,0 +1,106 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ConfigReader } from '@backstage/config'; +import { readGitlabConfigs } from './config'; + +describe('config', () => { + it('empty gitlab config', () => { + const config = new ConfigReader({ + catalog: { + providers: {}, + }, + }); + + const result = readGitlabConfigs(config); + expect(result).toHaveLength(0); + }); + + it('valid config with default optional params', () => { + const config = new ConfigReader({ + catalog: { + providers: { + gitlab: { + test: { + group: 'group', + host: 'host', + }, + }, + }, + }, + }); + + const result = readGitlabConfigs(config); + expect(result).toHaveLength(1); + result.forEach(r => + expect(r).toStrictEqual({ + id: 'test', + group: 'group', + branch: 'master', + host: 'host', + catalogFile: 'catalog-info.yaml', + }), + ); + }); + + it('valid config with custom optional params', () => { + const config = new ConfigReader({ + catalog: { + providers: { + gitlab: { + test: { + group: 'group', + host: 'host', + branch: 'not-master', + entityFilename: 'custom-file.yaml', + }, + }, + }, + }, + }); + + const result = readGitlabConfigs(config); + expect(result).toHaveLength(1); + result.forEach(r => + expect(r).toStrictEqual({ + id: 'test', + group: 'group', + branch: 'not-master', + host: 'host', + catalogFile: 'custom-file.yaml', + }), + ); + }); + + it('missing params', () => { + const config = new ConfigReader({ + catalog: { + providers: { + gitlab: { + test: { + branch: 'not-master', + entityFilename: 'custom-file.yaml', + }, + }, + }, + }, + }); + + expect(() => readGitlabConfigs(config)).toThrow( + "Missing required config value at 'catalog.providers.gitlab.test.group'", + ); + }); +}); diff --git a/plugins/catalog-backend-module-gitlab/src/providers/config.ts b/plugins/catalog-backend-module-gitlab/src/providers/config.ts new file mode 100644 index 0000000000..f7eb316997 --- /dev/null +++ b/plugins/catalog-backend-module-gitlab/src/providers/config.ts @@ -0,0 +1,64 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Config } from '@backstage/config'; +import { GitlabProviderConfig } from '../lib/types'; + +/** + * Extracts the gitlab config from a config object + * + * @public + * + * @param config - The config object to extract from + */ +function readGitlabConfig(id: string, config: Config): GitlabProviderConfig { + const group = config.getString('group'); + const host = config.getString('host'); + const branch = config.getOptionalString('branch') ?? 'master'; + const catalogFile = + config.getOptionalString('entityFilename') ?? 'catalog-info.yaml'; + + return { + id, + group, + branch, + host, + catalogFile, + }; +} + +/** + * Extracts the gitlab config from a config object array + * + * @public + * + * @param config - The config object to extract from + */ +export function readGitlabConfigs(config: Config): GitlabProviderConfig[] { + const configs: GitlabProviderConfig[] = []; + + const providerConfigs = config.getOptionalConfig('catalog.providers.gitlab'); + + if (!providerConfigs) { + return configs; + } + + for (const id of providerConfigs.keys()) { + configs.push(readGitlabConfig(id, providerConfigs.getConfig(id))); + } + + return configs; +} diff --git a/plugins/catalog-backend-module-gitlab/src/providers/index.ts b/plugins/catalog-backend-module-gitlab/src/providers/index.ts new file mode 100644 index 0000000000..e7cb00a73f --- /dev/null +++ b/plugins/catalog-backend-module-gitlab/src/providers/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { GitlabDiscoveryEntityProvider } from './GitlabDiscoveryEntityProvider'; diff --git a/plugins/permission-node/api-report.md b/plugins/permission-node/api-report.md index b2e4ff45b8..702d363137 100644 --- a/plugins/permission-node/api-report.md +++ b/plugins/permission-node/api-report.md @@ -112,6 +112,7 @@ export const createPermissionIntegrationRouter: < TResource, >(options: { resourceType: TResourceType; + permissions?: Permission[] | undefined; rules: PermissionRule, unknown[]>[]; getResources: (resourceRefs: string[]) => Promise<(TResource | undefined)[]>; }) => express.Router; diff --git a/plugins/permission-node/src/integration/createPermissionIntegrationRouter.test.ts b/plugins/permission-node/src/integration/createPermissionIntegrationRouter.test.ts index 65c43c7f30..ac4005c487 100644 --- a/plugins/permission-node/src/integration/createPermissionIntegrationRouter.test.ts +++ b/plugins/permission-node/src/integration/createPermissionIntegrationRouter.test.ts @@ -14,7 +14,11 @@ * limitations under the License. */ -import { AuthorizeResult } from '@backstage/plugin-permission-common'; +import { + AuthorizeResult, + createPermission, + Permission, +} from '@backstage/plugin-permission-common'; import express, { Express, Router } from 'express'; import request, { Response } from 'supertest'; import { createPermissionIntegrationRouter } from './createPermissionIntegrationRouter'; @@ -26,22 +30,25 @@ const mockGetResources: jest.MockedFunction< resourceRefs.map(resourceRef => ({ id: resourceRef })), ); +const testPermission: Permission = createPermission({ + name: 'test.permission', + attributes: {}, +}); + const testRule1 = createPermissionRule({ name: 'test-rule-1', description: 'Test rule 1', resourceType: 'test-resource', - apply: jest.fn( - (_resource: any, _firstParam: string, _secondParam: number) => true, - ), - toQuery: jest.fn(), + apply: (_resource: any, _firstParam: string, _secondParam: number) => true, + toQuery: (_firstParam: string, _secondParam: number) => ({}), }); const testRule2 = createPermissionRule({ name: 'test-rule-2', description: 'Test rule 2', resourceType: 'test-resource', - apply: jest.fn((_resource: any, _firstParam: object) => false), - toQuery: jest.fn(), + apply: (_resource: any, _firstParam: object) => false, + toQuery: (_firstParam: object) => ({}), }); describe('createPermissionIntegrationRouter', () => { @@ -51,6 +58,7 @@ describe('createPermissionIntegrationRouter', () => { beforeAll(() => { router = createPermissionIntegrationRouter({ resourceType: 'test-resource', + permissions: [testPermission], getResources: mockGetResources, rules: [testRule1, testRule2], }); @@ -501,4 +509,31 @@ describe('createPermissionIntegrationRouter', () => { expect(response.error && response.error.text).toMatch(/invalid/i); }); }); + + describe('GET /.well-known/backstage/permissions/metadata', () => { + it('returns a list of permissions and rules used by a given backend', async () => { + const response = await request(app).get( + '/.well-known/backstage/permissions/metadata', + ); + + expect(response.status).toEqual(200); + expect(response.body).toEqual({ + permissions: [testPermission], + rules: [ + { + name: testRule1.name, + description: testRule1.description, + resourceType: testRule1.resourceType, + parameters: { count: 2 }, + }, + { + name: testRule2.name, + description: testRule2.description, + resourceType: testRule2.resourceType, + parameters: { count: 1 }, + }, + ], + }); + }); + }); }); diff --git a/plugins/permission-node/src/integration/createPermissionIntegrationRouter.ts b/plugins/permission-node/src/integration/createPermissionIntegrationRouter.ts index 4bdb4397dd..28abc2f48d 100644 --- a/plugins/permission-node/src/integration/createPermissionIntegrationRouter.ts +++ b/plugins/permission-node/src/integration/createPermissionIntegrationRouter.ts @@ -23,6 +23,7 @@ import { AuthorizeResult, DefinitivePolicyDecision, IdentifiedPermissionMessage, + Permission, PermissionCondition, PermissionCriteria, } from '@backstage/plugin-permission-common'; @@ -174,6 +175,7 @@ export const createPermissionIntegrationRouter = < TResource, >(options: { resourceType: TResourceType; + permissions?: Array; // Do not infer value of TResourceType from supplied rules. // instead only consider the resourceType parameter, and // consider any rules whose resource type does not match @@ -183,8 +185,22 @@ export const createPermissionIntegrationRouter = < resourceRefs: string[], ) => Promise>; }): express.Router => { - const { resourceType, rules, getResources } = options; + const { resourceType, permissions, rules, getResources } = options; const router = Router(); + router.use(express.json()); + + router.get('/.well-known/backstage/permissions/metadata', (_, res) => { + const serializableRules = rules.map(rule => ({ + name: rule.name, + description: rule.description, + resourceType: rule.resourceType, + parameters: { + count: rule.toQuery.length, + }, + })); + + return res.json({ permissions, rules: serializableRules }); + }); const getRule = createGetRule(rules); @@ -202,8 +218,6 @@ export const createPermissionIntegrationRouter = < } }; - router.use(express.json()); - router.post( '/.well-known/backstage/permissions/apply-conditions', async (req, res: Response) => { @@ -227,7 +241,7 @@ export const createPermissionIntegrationRouter = < return acc; }, {} as Record); - return res.status(200).json({ + return res.json({ items: body.items.map(request => ({ id: request.id, result: applyConditions( diff --git a/plugins/scaffolder-backend/api-report.md b/plugins/scaffolder-backend/api-report.md index 308696d59b..707b8e62ba 100644 --- a/plugins/scaffolder-backend/api-report.md +++ b/plugins/scaffolder-backend/api-report.md @@ -338,13 +338,13 @@ export function createPublishGitlabAction(options: { export const createPublishGitlabMergeRequestAction: (options: { integrations: ScmIntegrationRegistry; }) => TemplateAction<{ - projectid: string; repoUrl: string; title: string; description: string; branchName: string; targetPath: string; token?: string | undefined; + projectid?: string | undefined; }>; // @public diff --git a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/publish/gitlabMergeRequest.ts b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/publish/gitlabMergeRequest.ts index 7259336b23..f717a7a0c6 100644 --- a/plugins/scaffolder-backend/src/scaffolder/actions/builtin/publish/gitlabMergeRequest.ts +++ b/plugins/scaffolder-backend/src/scaffolder/actions/builtin/publish/gitlabMergeRequest.ts @@ -34,18 +34,19 @@ export const createPublishGitlabMergeRequestAction = (options: { const { integrations } = options; return createTemplateAction<{ - projectid: string; repoUrl: string; title: string; description: string; branchName: string; targetPath: string; token?: string; + /** @deprecated Use projectPath instead */ + projectid?: string; }>({ id: 'publish:gitlab:merge-request', schema: { input: { - required: ['projectid', 'repoUrl', 'targetPath', 'branchName'], + required: ['repoUrl', 'targetPath', 'branchName'], type: 'object', properties: { repoUrl: { @@ -53,6 +54,7 @@ export const createPublishGitlabMergeRequestAction = (options: { title: 'Repository Location', description: `Accepts the format 'gitlab.com/group_name/project_name' where 'project_name' is the repository name and 'group_name' is a group or username`, }, + /** @deprecated Use projectPath instead */ projectid: { type: 'string', title: 'projectid', @@ -92,6 +94,10 @@ export const createPublishGitlabMergeRequestAction = (options: { title: 'Gitlab Project id/Name(slug)', type: 'string', }, + projectPath: { + title: 'Gitlab Project path', + type: 'string', + }, mergeRequestURL: { title: 'MergeRequest(MR) URL', type: 'string', @@ -102,7 +108,15 @@ export const createPublishGitlabMergeRequestAction = (options: { }, async handler(ctx) { const repoUrl = ctx.input.repoUrl; - const { host } = parseRepoUrl(repoUrl, integrations); + const { host, owner, repo } = parseRepoUrl(repoUrl, integrations); + const projectPath = `${owner}/${repo}`; + + if (ctx.input.projectid) { + const deprecationWarning = `Property "projectid" is deprecated and no longer to needed to create a MR`; + ctx.logger.warn(deprecationWarning); + console.warn(deprecationWarning); + } + const integrationConfig = integrations.gitlab.byHost(host); const destinationBranch = ctx.input.branchName; @@ -140,14 +154,13 @@ export const createPublishGitlabMergeRequestAction = (options: { content: file.content.toString('base64'), execute_filemode: file.executable, })); - - const projects = await api.Projects.show(ctx.input.projectid); + const projects = await api.Projects.show(projectPath); const { default_branch: defaultBranch } = projects; try { await api.Branches.create( - ctx.input.projectid, + projectPath, destinationBranch, String(defaultBranch), ); @@ -157,7 +170,7 @@ export const createPublishGitlabMergeRequestAction = (options: { try { await api.Commits.create( - ctx.input.projectid, + projectPath, destinationBranch, ctx.input.title, actions, @@ -170,7 +183,7 @@ export const createPublishGitlabMergeRequestAction = (options: { try { const mergeRequestUrl = await api.MergeRequests.create( - ctx.input.projectid, + projectPath, destinationBranch, String(defaultBranch), ctx.input.title, @@ -178,7 +191,9 @@ export const createPublishGitlabMergeRequestAction = (options: { ).then((mergeRequest: { web_url: string }) => { return mergeRequest.web_url; }); - ctx.output('projectid', ctx.input.projectid); + /** @deprecated */ + ctx.output('projectid', projectPath); + ctx.output('projectPath', projectPath); ctx.output('mergeRequestUrl', mergeRequestUrl); } catch (e) { throw new InputError(`Merge request creation failed${e}`); diff --git a/plugins/scaffolder-backend/src/service/helpers.ts b/plugins/scaffolder-backend/src/service/helpers.ts index 23200d6aac..3412fec2d3 100644 --- a/plugins/scaffolder-backend/src/service/helpers.ts +++ b/plugins/scaffolder-backend/src/service/helpers.ts @@ -21,7 +21,6 @@ import { parseLocationRef, ANNOTATION_SOURCE_LOCATION, CompoundEntityRef, - DEFAULT_NAMESPACE, stringifyEntityRef, } from '@backstage/catalog-model'; import { Config } from '@backstage/config'; @@ -95,11 +94,6 @@ export async function findTemplate(options: { }): Promise { const { entityRef, token, catalogApi } = options; - if (entityRef.namespace.toLocaleLowerCase('en-US') !== DEFAULT_NAMESPACE) { - throw new InputError( - `Invalid namespace, only '${DEFAULT_NAMESPACE}' namespace is supported`, - ); - } if (entityRef.kind.toLocaleLowerCase('en-US') !== 'template') { throw new InputError(`Invalid kind, only 'Template' kind is supported`); } diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx index 6beaa3419a..ac35c4dcd7 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/plugins/scaffolder/src/components/Router.tsx @@ -14,8 +14,8 @@ * limitations under the License. */ -import React, { ComponentType } from 'react'; -import { Routes, Route, useOutlet, Navigate } from 'react-router'; +import React, { ComponentType, useEffect } from 'react'; +import { Routes, Route, useOutlet, Navigate, useParams } from 'react-router'; import { Entity } from '@backstage/catalog-model'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { ScaffolderPage } from './ScaffolderPage'; @@ -31,10 +31,11 @@ import { FIELD_EXTENSION_KEY, DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS, } from '../extensions'; -import { useElementFilter } from '@backstage/core-plugin-api'; +import { useElementFilter, useRouteRef } from '@backstage/core-plugin-api'; import { actionsRouteRef, editRouteRef, + legacySelectedTemplateRouteRef, scaffolderListTaskRouteRef, scaffolderTaskRouteRef, selectedTemplateRouteRef, @@ -100,6 +101,22 @@ export const Router = (props: RouterProps) => { ), ), ]; + /** + * This component can be deleted once the older routes have been deprecated. + */ + const RedirectingComponent = () => { + const { templateName } = useParams(); + const newLink = useRouteRef(selectedTemplateRouteRef); + useEffect( + () => + // eslint-disable-next-line no-console + console.warn( + 'The route /template/:templateName is deprecated, please use the new /template/:namespace/:templateName route instead', + ), + [], + ); + return ; + }; return ( @@ -112,6 +129,9 @@ export const Router = (props: RouterProps) => { /> } /> + + + { const formData = taskStream.task!.spec.parameters; - const { name } = parseEntityRef( + const { name, namespace } = parseEntityRef( taskStream.task!.spec.templateInfo?.entityRef, ); navigate( - `${templateRoute({ templateName: name })}?${qs.stringify({ + `${templateRoute({ templateName: name, namespace })}?${qs.stringify({ formData: JSON.stringify(formData), })}`, ); diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx index 6f7e375cce..df46a119f2 100644 --- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx @@ -13,7 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Entity, RELATION_OWNED_BY } from '@backstage/catalog-model'; +import { + Entity, + parseEntityRef, + RELATION_OWNED_BY, + stringifyEntityRef, +} from '@backstage/catalog-model'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { ScmIntegrationIcon, @@ -162,7 +167,8 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => { : 'other'; const theme = backstageTheme.getPageTheme({ themeId }); const classes = useStyles({ backgroundImage: theme.backgroundImage }); - const href = templateRoute({ templateName: templateProps.name }); + const { name, namespace } = parseEntityRef(stringifyEntityRef(template)); + const href = templateRoute({ templateName: name, namespace }); const scmIntegrationsApi = useApi(scmIntegrationsApiRef); const sourceLocation = getEntitySourceLocation(template, scmIntegrationsApi); diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx index 22f995eae4..f694688801 100644 --- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx +++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx @@ -54,11 +54,16 @@ export const TemplatePage = ({ const secretsContext = useContext(SecretsContext); const errorApi = useApi(errorApiRef); const scaffolderApi = useApi(scaffolderApiRef); - const { templateName } = useParams(); + const { templateName, namespace } = useParams(); + const templateRef = stringifyEntityRef({ + name: templateName, + kind: 'template', + namespace, + }); const navigate = useNavigate(); const scaffolderTaskRoute = useRouteRef(scaffolderTaskRouteRef); const rootRoute = useRouteRef(rootRouteRef); - const { schema, loading, error } = useTemplateParameterSchema(templateName); + const { schema, loading, error } = useTemplateParameterSchema(templateRef); const [formState, setFormState] = useState>(() => { const query = qs.parse(window.location.search, { ignoreQueryPrefix: true, @@ -78,11 +83,7 @@ export const TemplatePage = ({ const handleCreate = async () => { const { taskId } = await scaffolderApi.scaffold({ - templateRef: stringifyEntityRef({ - name: templateName, - kind: 'template', - namespace: 'default', - }), + templateRef, values: formState, secrets: secretsContext?.secrets, }); diff --git a/plugins/scaffolder/src/next/Router/Router.test.tsx b/plugins/scaffolder/src/next/Router/Router.test.tsx index 5094c786e0..1aaca1a94b 100644 --- a/plugins/scaffolder/src/next/Router/Router.test.tsx +++ b/plugins/scaffolder/src/next/Router/Router.test.tsx @@ -47,7 +47,9 @@ describe('Router', () => { describe('/templates/:templateName', () => { it('should render the TemplateWizard page', async () => { - await renderInTestApp(, { routeEntries: ['/templates/foo'] }); + await renderInTestApp(, { + routeEntries: ['/templates/default/foo'], + }); expect(TemplateWizardPage).toHaveBeenCalled(); }); @@ -67,7 +69,7 @@ describe('Router', () => { , - { routeEntries: ['/templates/foo'] }, + { routeEntries: ['/templates/default/foo'] }, ); const mock = TemplateWizardPage as jest.Mock; diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.test.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.test.tsx index 45f4dc6317..44e3a0bbbf 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.test.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.test.tsx @@ -233,7 +233,7 @@ describe('TemplateCard', () => { expect(getByRole('button', { name: 'Choose' })).toBeInTheDocument(); expect(getByRole('button', { name: 'Choose' })).toHaveAttribute( 'href', - '/templates/bob', + '/templates/default/bob', ); }); }); diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.tsx index 0e67ecd82a..874c20a9ac 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateCard/TemplateCard.tsx @@ -26,7 +26,11 @@ import { } from '@material-ui/core'; import { CardHeader } from './CardHeader'; import { MarkdownContent, UserIcon, Button } from '@backstage/core-components'; -import { RELATION_OWNED_BY } from '@backstage/catalog-model'; +import { + parseEntityRef, + RELATION_OWNED_BY, + stringifyEntityRef, +} from '@backstage/catalog-model'; import { EntityRefLinks, getEntityRelations, @@ -91,7 +95,8 @@ export const TemplateCard = (props: TemplateCardProps) => { const styles = useStyles(); const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY); const templateRoute = useRouteRef(selectedTemplateRouteRef); - const href = templateRoute({ templateName: template.metadata.name }); + const { name, namespace } = parseEntityRef(stringifyEntityRef(template)); + const href = templateRoute({ templateName: name, namespace: namespace }); return ( diff --git a/plugins/scaffolder/src/routes.ts b/plugins/scaffolder/src/routes.ts index be0d69135a..8d6875e351 100644 --- a/plugins/scaffolder/src/routes.ts +++ b/plugins/scaffolder/src/routes.ts @@ -28,10 +28,19 @@ export const rootRouteRef = createRouteRef({ id: 'scaffolder', }); +/** + * @deprecated This is the old template route, can be deleted before next major release + */ +export const legacySelectedTemplateRouteRef = createSubRouteRef({ + id: 'scaffolder/legacy/selected-template', + parent: rootRouteRef, + path: '/templates/:templateName', +}); + export const selectedTemplateRouteRef = createSubRouteRef({ id: 'scaffolder/selected-template', parent: rootRouteRef, - path: '/templates/:templateName', + path: '/templates/:namespace/:templateName', }); export const scaffolderTaskRouteRef = createSubRouteRef({ diff --git a/plugins/search-backend-module-elasticsearch/api-report.md b/plugins/search-backend-module-elasticsearch/api-report.md index 143d3ab3e8..04b7f96f93 100644 --- a/plugins/search-backend-module-elasticsearch/api-report.md +++ b/plugins/search-backend-module-elasticsearch/api-report.md @@ -137,6 +137,19 @@ export interface ElasticSearchConnectionConstructor { }; } +// @public +export type ElasticSearchCustomIndexTemplate = { + name: string; + body: ElasticSearchCustomIndexTemplateBody; +}; + +// @public +export type ElasticSearchCustomIndexTemplateBody = { + index_patterns: string[]; + composed_of?: string[]; + template?: Record; +}; + // @public (undocumented) export type ElasticSearchHighlightConfig = { fragmentDelimiter: string; @@ -215,6 +228,8 @@ export class ElasticSearchSearchEngine implements SearchEngine { // (undocumented) query(query: SearchQuery): Promise; // (undocumented) + setIndexTemplate(template: ElasticSearchCustomIndexTemplate): Promise; + // (undocumented) setTranslator(translator: ElasticSearchQueryTranslator): void; // (undocumented) protected translator( diff --git a/plugins/search-backend-module-elasticsearch/src/engines/ElasticSearchSearchEngine.test.ts b/plugins/search-backend-module-elasticsearch/src/engines/ElasticSearchSearchEngine.test.ts index 9867920c6e..c114406d99 100644 --- a/plugins/search-backend-module-elasticsearch/src/engines/ElasticSearchSearchEngine.test.ts +++ b/plugins/search-backend-module-elasticsearch/src/engines/ElasticSearchSearchEngine.test.ts @@ -50,6 +50,23 @@ jest.mock('./ElasticSearchSearchEngineIndexer', () => ({ .mockImplementation(() => indexerMock), })); +const customIndexTemplate = { + name: 'custom-index-template', + body: { + index_patterns: ['*'], + template: { + settings: { + number_of_shards: 1, + }, + mappings: { + _source: { + enabled: false, + }, + }, + }, + }, +}; + describe('ElasticSearchSearchEngine', () => { let testSearchEngine: ElasticSearchSearchEngine; let inspectableSearchEngine: ElasticSearchSearchEngineForTranslatorTests; @@ -72,6 +89,20 @@ describe('ElasticSearchSearchEngine', () => { client = testSearchEngine['elasticSearchClient']; }); + describe('custom index template', () => { + it('should set custom index template', async () => { + const indexTemplateSpy = jest.fn().mockReturnValue(customIndexTemplate); + mock.add( + { method: 'PUT', path: '/_index_template/custom-index-template' }, + indexTemplateSpy, + ); + await inspectableSearchEngine.setIndexTemplate(customIndexTemplate); + + expect(indexTemplateSpy).toHaveBeenCalled(); + expect(indexTemplateSpy).toHaveBeenCalledTimes(1); + }); + }); + describe('queryTranslator', () => { beforeAll(() => { mock.clearAll(); @@ -760,6 +791,10 @@ describe('ElasticSearchSearchEngine', () => { }); describe('indexer', () => { + beforeEach(async () => { + await testSearchEngine.setIndexTemplate(customIndexTemplate); + }); + it('should get indexer', async () => { const indexer = await testSearchEngine.getIndexer('test-index'); diff --git a/plugins/search-backend-module-elasticsearch/src/engines/ElasticSearchSearchEngine.ts b/plugins/search-backend-module-elasticsearch/src/engines/ElasticSearchSearchEngine.ts index 6541d2ed80..d11d8a1f90 100644 --- a/plugins/search-backend-module-elasticsearch/src/engines/ElasticSearchSearchEngine.ts +++ b/plugins/search-backend-module-elasticsearch/src/engines/ElasticSearchSearchEngine.ts @@ -36,6 +36,37 @@ import { ElasticSearchSearchEngineIndexer } from './ElasticSearchSearchEngineInd export type { ElasticSearchClientOptions }; +/** + * Elasticsearch specific index template + * @public + */ +export type ElasticSearchCustomIndexTemplate = { + name: string; + body: ElasticSearchCustomIndexTemplateBody; +}; + +/** + * Elasticsearch specific index template body + * @public + */ +export type ElasticSearchCustomIndexTemplateBody = { + /** + * Array of wildcard (*) expressions used to match the names of data streams and indices during creation. + */ + index_patterns: string[]; + /** + * An ordered list of component template names. + * Component templates are merged in the order specified, + * meaning that the last component template specified has the highest precedence. + */ + composed_of?: string[]; + /** + * See available properties of template + * https://www.elastic.co/guide/en/elasticsearch/reference/7.15/indices-put-template.html#put-index-template-api-request-body + */ + template?: Record; +}; + /** * Search query that the elasticsearch engine understands. * @public @@ -236,8 +267,18 @@ export class ElasticSearchSearchEngine implements SearchEngine { this.translator = translator; } + async setIndexTemplate(template: ElasticSearchCustomIndexTemplate) { + try { + await this.elasticSearchClient.indices.putIndexTemplate(template); + this.logger.info('Custom index template set'); + } catch (error) { + this.logger.error(`Unable to set custom index template: ${error}`); + } + } + async getIndexer(type: string) { const alias = this.constructSearchAlias(type); + const indexer = new ElasticSearchSearchEngineIndexer({ type, indexPrefix: this.indexPrefix, diff --git a/plugins/search-backend-module-elasticsearch/src/engines/index.ts b/plugins/search-backend-module-elasticsearch/src/engines/index.ts index d99f96ef72..8ac86970a1 100644 --- a/plugins/search-backend-module-elasticsearch/src/engines/index.ts +++ b/plugins/search-backend-module-elasticsearch/src/engines/index.ts @@ -30,6 +30,8 @@ export type { ElasticSearchQueryTranslator, ElasticSearchQueryTranslatorOptions, ElasticSearchOptions, + ElasticSearchCustomIndexTemplate, + ElasticSearchCustomIndexTemplateBody, } from './ElasticSearchSearchEngine'; export type { ElasticSearchSearchEngineIndexer, diff --git a/plugins/search-backend-module-elasticsearch/src/index.ts b/plugins/search-backend-module-elasticsearch/src/index.ts index 772c7d3689..adf7fa43f2 100644 --- a/plugins/search-backend-module-elasticsearch/src/index.ts +++ b/plugins/search-backend-module-elasticsearch/src/index.ts @@ -36,4 +36,6 @@ export type { ElasticSearchAuth, ElasticSearchSearchEngineIndexer, ElasticSearchSearchEngineIndexerOptions, + ElasticSearchCustomIndexTemplate, + ElasticSearchCustomIndexTemplateBody, } from './engines'; diff --git a/plugins/search-react/api-report.md b/plugins/search-react/api-report.md index 9f61070854..f9bb993fd6 100644 --- a/plugins/search-react/api-report.md +++ b/plugins/search-react/api-report.md @@ -7,12 +7,40 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { AsyncState } from 'react-use/lib/useAsync'; +import { InputBaseProps } from '@material-ui/core'; import { JsonObject } from '@backstage/types'; import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; +import { ReactElement } from 'react'; +import { ReactNode } from 'react'; +import { ResultHighlight } from '@backstage/plugin-search-common'; +import { SearchDocument } from '@backstage/plugin-search-common'; import { SearchQuery } from '@backstage/plugin-search-common'; +import { SearchResult as SearchResult_2 } from '@backstage/plugin-search-common'; import { SearchResultSet } from '@backstage/plugin-search-common'; +// @public (undocumented) +export const AutocompleteFilter: ( + props: SearchAutocompleteFilterProps, +) => JSX.Element; + +// @public (undocumented) +export const CheckboxFilter: (props: SearchFilterComponentProps) => JSX.Element; + +// @public (undocumented) +export const DefaultResultListItem: ( + props: DefaultResultListItemProps, +) => JSX.Element; + +// @public +export type DefaultResultListItemProps = { + icon?: ReactNode; + secondaryAction?: ReactNode; + result: SearchDocument; + highlight?: ResultHighlight; + lineClamp?: number; +}; + // @public (undocumented) export const HighlightedSearchResultText: ({ text, @@ -20,7 +48,7 @@ export const HighlightedSearchResultText: ({ postTag, }: HighlightedSearchResultTextProps) => JSX.Element; -// @public (undocumented) +// @public export type HighlightedSearchResultTextProps = { text: string; preTag: string; @@ -45,6 +73,42 @@ export interface SearchApi { // @public (undocumented) export const searchApiRef: ApiRef; +// @public (undocumented) +export type SearchAutocompleteFilterProps = SearchFilterComponentProps & { + filterSelectedOptions?: boolean; + limitTags?: number; + multiple?: boolean; +}; + +// @public +export const SearchBar: ({ onChange, ...props }: SearchBarProps) => JSX.Element; + +// @public +export const SearchBarBase: ({ + onChange, + onKeyDown, + onSubmit, + debounceTime, + clearButton, + fullWidth, + value: defaultValue, + inputProps: defaultInputProps, + endAdornment: defaultEndAdornment, + ...props +}: SearchBarBaseProps) => JSX.Element; + +// @public +export type SearchBarBaseProps = Omit & { + debounceTime?: number; + clearButton?: boolean; + onClear?: () => void; + onSubmit?: () => void; + onChange: (value: string) => void; +}; + +// @public +export type SearchBarProps = Partial; + // @public export const SearchContextProvider: ( props: SearchContextProviderProps, @@ -74,6 +138,55 @@ export type SearchContextValue = { fetchPreviousPage?: React_2.DispatchWithoutAction; } & SearchContextState; +// @public (undocumented) +export const SearchFilter: { + ({ component: Element, ...props }: SearchFilterWrapperProps): JSX.Element; + Checkbox( + props: Omit & + SearchFilterComponentProps, + ): JSX.Element; + Select( + props: Omit & + SearchFilterComponentProps, + ): JSX.Element; + Autocomplete(props: SearchAutocompleteFilterProps): JSX.Element; +}; + +// @public (undocumented) +export type SearchFilterComponentProps = { + className?: string; + name: string; + label?: string; + values?: string[] | ((partial: string) => Promise); + defaultValue?: string[] | string | null; + valuesDebounceMs?: number; +}; + +// @public (undocumented) +export type SearchFilterWrapperProps = SearchFilterComponentProps & { + component: (props: SearchFilterComponentProps) => ReactElement; + debug?: boolean; +}; + +// @public (undocumented) +export const SearchResult: (props: SearchResultProps) => JSX.Element; + +// @public +export const SearchResultComponent: ({ + children, +}: SearchResultProps) => JSX.Element; + +// @public (undocumented) +export const SearchResultPager: () => JSX.Element; + +// @public +export type SearchResultProps = { + children: (results: { results: SearchResult_2[] }) => JSX.Element; +}; + +// @public (undocumented) +export const SelectFilter: (props: SearchFilterComponentProps) => JSX.Element; + // @public export const useSearch: () => SearchContextValue; diff --git a/plugins/search-react/package.json b/plugins/search-react/package.json index 5646ce9ee1..60cdc479bb 100644 --- a/plugins/search-react/package.json +++ b/plugins/search-react/package.json @@ -32,11 +32,16 @@ }, "dependencies": { "@backstage/plugin-search-common": "^0.3.5-next.0", + "@backstage/core-components": "^0.9.5-next.1", "@backstage/core-plugin-api": "^1.0.3-next.0", "@backstage/version-bridge": "^1.0.1", - "react-use": "^17.3.2", + "@backstage/theme": "^0.2.15", "@backstage/types": "^1.0.0", - "@material-ui/core": "^4.12.2" + "@material-ui/core": "^4.12.2", + "@material-ui/icons": "^4.9.1", + "@material-ui/lab": "4.0.0-alpha.57", + "react-router": "6.0.0-beta.0", + "react-use": "^17.3.2" }, "peerDependencies": { "@types/react": "^16.13.1 || ^17.0.0", @@ -47,7 +52,8 @@ "@backstage/test-utils": "^1.1.1-next.0", "@testing-library/react": "^12.1.3", "@testing-library/react-hooks": "^8.0.0", - "@testing-library/jest-dom": "^5.10.1" + "@testing-library/jest-dom": "^5.10.1", + "@testing-library/user-event": "^14.0.0" }, "files": [ "dist" diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx similarity index 98% rename from plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx rename to plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx index fb56d1ecdb..3b54e69a19 100644 --- a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx +++ b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx similarity index 98% rename from plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx rename to plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx index 26d081b3b6..e94d394639 100644 --- a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx +++ b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx similarity index 73% rename from plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx rename to plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx index 5ce2d0744a..ff6f3d7fe1 100644 --- a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx +++ b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -15,11 +15,12 @@ */ import React, { ReactNode } from 'react'; +import { AnalyticsContext } from '@backstage/core-plugin-api'; import { ResultHighlight, SearchDocument, } from '@backstage/plugin-search-common'; -import { HighlightedSearchResultText } from '@backstage/plugin-search-react'; +import { HighlightedSearchResultText } from '../HighlightedSearchResultText'; import { ListItem, ListItemIcon, @@ -29,7 +30,12 @@ import { } from '@material-ui/core'; import { Link } from '@backstage/core-components'; -type Props = { +/** + * Props for {@link DefaultResultListItem} + * + * @public + */ +export type DefaultResultListItemProps = { icon?: ReactNode; secondaryAction?: ReactNode; result: SearchDocument; @@ -37,13 +43,18 @@ type Props = { lineClamp?: number; }; -export const DefaultResultListItem = ({ +/** + * A default result list item. + * + * @public + */ +export const DefaultResultListItemComponent = ({ result, highlight, icon, secondaryAction, lineClamp = 5, -}: Props) => { +}: DefaultResultListItemProps) => { return ( @@ -88,3 +99,23 @@ export const DefaultResultListItem = ({ ); }; + +/** + * @public + */ +const HigherOrderDefaultResultListItem = ( + props: DefaultResultListItemProps, +) => { + return ( + + + + ); +}; + +export { HigherOrderDefaultResultListItem as DefaultResultListItem }; diff --git a/plugins/search/src/components/DefaultResultListItem/index.ts b/plugins/search-react/src/components/DefaultResultListItem/index.ts similarity index 84% rename from plugins/search/src/components/DefaultResultListItem/index.ts rename to plugins/search-react/src/components/DefaultResultListItem/index.ts index 77f975a9ef..a555f25c02 100644 --- a/plugins/search/src/components/DefaultResultListItem/index.ts +++ b/plugins/search-react/src/components/DefaultResultListItem/index.ts @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -15,3 +15,4 @@ */ export { DefaultResultListItem } from './DefaultResultListItem'; +export type { DefaultResultListItemProps } from './DefaultResultListItem'; diff --git a/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx b/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx index a749f184fe..bd6ef2d09c 100644 --- a/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx +++ b/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx @@ -25,6 +25,8 @@ const useStyles = makeStyles( ); /** + * Props for {@link HighlightedSearchResultText}. + * * @public */ export type HighlightedSearchResultTextProps = { diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx similarity index 93% rename from plugins/search/src/components/SearchBar/SearchBar.stories.tsx rename to plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx index 9728101e97..88aed35f8d 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,14 +14,14 @@ * limitations under the License. */ -import { Grid, makeStyles, Paper } from '@material-ui/core'; import React, { ComponentType } from 'react'; -import { - searchApiRef, - MockSearchApi, - SearchContextProvider, -} from '@backstage/plugin-search-react'; +import { Grid, makeStyles, Paper } from '@material-ui/core'; + import { TestApiProvider } from '@backstage/test-utils'; + +import { searchApiRef, MockSearchApi } from '../../api'; +import { SearchContextProvider } from '../../context'; + import { SearchBar } from './SearchBar'; export default { diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx new file mode 100644 index 0000000000..d65278f7ec --- /dev/null +++ b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx @@ -0,0 +1,352 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { screen, render, waitFor, act } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { configApiRef, analyticsApiRef } from '@backstage/core-plugin-api'; +import { ApiProvider, ConfigReader } from '@backstage/core-app-api'; +import { MockAnalyticsApi, TestApiRegistry } from '@backstage/test-utils'; + +import { searchApiRef } from '../../api'; +import { SearchContextProvider } from '../../context'; +import { SearchBar } from './SearchBar'; + +jest.mock('@backstage/core-plugin-api', () => ({ + ...jest.requireActual('@backstage/core-plugin-api'), +})); + +describe('SearchBar', () => { + const initialState = { + term: '', + filters: {}, + types: ['*'], + pageCursor: '', + }; + + const query = jest.fn().mockResolvedValue({}); + const analyticsApiSpy = new MockAnalyticsApi(); + let apiRegistry: TestApiRegistry; + + apiRegistry = TestApiRegistry.from( + [ + configApiRef, + new ConfigReader({ + app: { title: 'Mock title' }, + }), + ], + [searchApiRef, { query }], + ); + + const name = 'Search'; + const term = 'term'; + + afterAll(() => { + jest.resetAllMocks(); + }); + + it('Renders without exploding', async () => { + render( + + + + + , + ); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name })).toBeInTheDocument(); + expect( + screen.getByPlaceholderText('Search in Mock title'), + ).toBeInTheDocument(); + }); + }); + + it('Renders with custom placeholder', async () => { + render( + + + + + , + , + ); + + await waitFor(() => { + expect( + screen.getByPlaceholderText('This is a custom placeholder'), + ).toBeInTheDocument(); + }); + }); + + it('Renders based on initial search', async () => { + render( + + + + + , + , + ); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name })).toHaveValue(term); + }); + }); + + it('Updates term state when text is entered', async () => { + const user = userEvent.setup({ delay: null }); + jest.useFakeTimers(); + const defaultDebounceTime = 200; + + render( + + + + + , + , + ); + + const textbox = screen.getByRole('textbox', { name }); + + const value = 'value'; + + await user.type(textbox, value); + + act(() => { + jest.advanceTimersByTime(defaultDebounceTime); + }); + + await waitFor(() => { + expect(textbox).toHaveValue(value); + }); + + expect(query).toHaveBeenLastCalledWith( + expect.objectContaining({ term: value }), + ); + jest.useRealTimers(); + }); + + it('Clear button clears term state', async () => { + render( + + + + + , + ); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name })).toHaveValue(term); + }); + + await userEvent.click(screen.getByRole('button', { name: 'Clear' })); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name })).toHaveValue(''); + }); + + expect(query).toHaveBeenLastCalledWith( + expect.objectContaining({ term: '' }), + ); + }); + + it('Should not show clear button', async () => { + render( + + + + + , + ); + + await waitFor(() => { + expect( + screen.queryByRole('button', { name: 'Clear' }), + ).not.toBeInTheDocument(); + }); + }); + + it('Adheres to provided debounceTime', async () => { + const user = userEvent.setup({ delay: null }); + jest.useFakeTimers(); + + const debounceTime = 600; + + render( + + + + + , + , + ); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name })).toBeInTheDocument(); + }); + + const textbox = screen.getByRole('textbox', { name }); + + const value = 'value'; + + await user.type(textbox, value); + + expect(query).not.toHaveBeenLastCalledWith( + expect.objectContaining({ term: value }), + ); + + act(() => { + jest.advanceTimersByTime(debounceTime); + }); + expect(textbox).toHaveValue(value); + + expect(query).toHaveBeenLastCalledWith( + expect.objectContaining({ term: value }), + ); + jest.useRealTimers(); + }); + + it('does not capture analytics event if not enabled in app', async () => { + const user = userEvent.setup({ delay: null }); + jest.useFakeTimers(); + + const debounceTime = 600; + + render( + + + + + , + , + ); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name })).toBeInTheDocument(); + }); + + const textbox = screen.getByRole('textbox', { name }); + + const value = 'value'; + + await user.type(textbox, value); + + act(() => { + jest.advanceTimersByTime(debounceTime); + }); + + await waitFor(() => expect(textbox).toHaveValue(value)); + + expect(analyticsApiSpy.getEvents()).toHaveLength(0); + jest.useRealTimers(); + }); + + it('captures analytics events if enabled in app', async () => { + const user = userEvent.setup({ delay: null }); + jest.useFakeTimers(); + + const debounceTime = 600; + + apiRegistry = TestApiRegistry.from( + [analyticsApiRef, analyticsApiSpy], + [ + configApiRef, + new ConfigReader({ + app: { + title: 'Mock title', + analytics: { + ga: { + trackingId: 'xyz123', + }, + }, + }, + }), + ], + [searchApiRef, { query }], + ); + + render( + + + + + , + ); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name })).toBeInTheDocument(); + }); + + const textbox = screen.getByRole('textbox', { name }); + + const value = 'value'; + + await user.type(textbox, value); + + expect(analyticsApiSpy.getEvents()).toHaveLength(0); + + act(() => { + jest.advanceTimersByTime(debounceTime); + }); + + await waitFor(() => expect(textbox).toHaveValue(value)); + + expect(analyticsApiSpy.getEvents()).toHaveLength(1); + expect(analyticsApiSpy.getEvents()[0]).toEqual({ + action: 'search', + context: { + extension: 'SearchBar', + pluginId: 'search', + routeRef: 'unknown', + searchTypes: 'software-catalog,techdocs', + }, + subject: 'value', + }); + + await user.clear(textbox); + + // make sure new term is captured + await user.type(textbox, 'new value'); + + act(() => { + jest.advanceTimersByTime(debounceTime); + }); + + await waitFor(() => expect(textbox).toHaveValue('new value')); + + expect(analyticsApiSpy.getEvents()).toHaveLength(2); + expect(analyticsApiSpy.getEvents()[1]).toEqual({ + action: 'search', + context: { + extension: 'SearchBar', + pluginId: 'search', + routeRef: 'unknown', + searchTypes: 'software-catalog,techdocs', + }, + subject: 'new value', + }); + jest.useRealTimers(); + }); +}); diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx new file mode 100644 index 0000000000..d3d25455ce --- /dev/null +++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx @@ -0,0 +1,189 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { + ChangeEvent, + KeyboardEvent, + useState, + useEffect, + useCallback, +} from 'react'; +import useDebounce from 'react-use/lib/useDebounce'; +import { + InputBase, + InputBaseProps, + InputAdornment, + IconButton, +} from '@material-ui/core'; +import SearchIcon from '@material-ui/icons/Search'; +import ClearButton from '@material-ui/icons/Clear'; + +import { + AnalyticsContext, + configApiRef, + useApi, +} from '@backstage/core-plugin-api'; + +import { + SearchContextProvider, + useSearch, + useSearchContextCheck, +} from '../../context'; +import { TrackSearch } from '../SearchTracker'; + +/** + * Props for {@link SearchBarBase}. + * + * @public + */ +export type SearchBarBaseProps = Omit & { + debounceTime?: number; + clearButton?: boolean; + onClear?: () => void; + onSubmit?: () => void; + onChange: (value: string) => void; +}; + +/** + * All search boxes exported by the search plugin are based on the , + * and this one is based on the component from Material UI. + * Recommended if you don't use Search Provider or Search Context. + * + * @public + */ +export const SearchBarBase = ({ + onChange, + onKeyDown, + onSubmit, + debounceTime = 200, + clearButton = true, + fullWidth = true, + value: defaultValue, + inputProps: defaultInputProps = {}, + endAdornment: defaultEndAdornment, + ...props +}: SearchBarBaseProps) => { + const configApi = useApi(configApiRef); + const [value, setValue] = useState(defaultValue as string); + const hasSearchContext = useSearchContextCheck(); + + useEffect(() => { + setValue(prevValue => + prevValue !== defaultValue ? (defaultValue as string) : prevValue, + ); + }, [defaultValue]); + + useDebounce(() => onChange(value), debounceTime, [value]); + + const handleChange = useCallback( + (e: ChangeEvent) => { + setValue(e.target.value); + }, + [setValue], + ); + + const handleKeyDown = useCallback( + (e: KeyboardEvent) => { + if (onKeyDown) onKeyDown(e); + if (onSubmit && e.key === 'Enter') { + onSubmit(); + } + }, + [onKeyDown, onSubmit], + ); + + const handleClear = useCallback(() => { + onChange(''); + }, [onChange]); + + const placeholder = `Search in ${ + configApi.getOptionalString('app.title') || 'Backstage' + }`; + + const startAdornment = ( + + + + + + ); + + const endAdornment = ( + + + + + + ); + + const searchBar = ( + + + + ); + + return hasSearchContext ? ( + searchBar + ) : ( + {searchBar} + ); +}; + +/** + * Props for {@link SearchBar}. + * + * @public + */ +export type SearchBarProps = Partial; + +/** + * Recommended search bar when you use the Search Provider or Search Context. + * + * @public + */ +export const SearchBar = ({ onChange, ...props }: SearchBarProps) => { + const { term, setTerm } = useSearch(); + + const handleChange = useCallback( + (newValue: string) => { + if (onChange) { + onChange(newValue); + } else { + setTerm(newValue); + } + }, + [onChange, setTerm], + ); + + return ( + + + + ); +}; diff --git a/plugins/search-react/src/components/SearchBar/index.tsx b/plugins/search-react/src/components/SearchBar/index.tsx new file mode 100644 index 0000000000..075a0c7dc2 --- /dev/null +++ b/plugins/search-react/src/components/SearchBar/index.tsx @@ -0,0 +1,18 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { SearchBar, SearchBarBase } from './SearchBar'; +export type { SearchBarProps, SearchBarBaseProps } from './SearchBar'; diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx new file mode 100644 index 0000000000..14c8967b57 --- /dev/null +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx @@ -0,0 +1,361 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { TestApiProvider } from '@backstage/test-utils'; +import { screen, render, waitFor, within } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import React from 'react'; + +import { searchApiRef } from '../../api'; +import { SearchContextProvider, useSearch } from '../../context'; +import { SearchFilter } from './SearchFilter'; + +const SearchContextFilterSpy = ({ name }: { name: string }) => { + const { filters } = useSearch(); + const value = filters[name]; + return ( + + {Array.isArray(value) ? value.join(',') : value} + + ); +}; + +describe('SearchFilter.Autocomplete', () => { + const query = jest.fn().mockResolvedValue({}); + const emptySearchContext = { + term: '', + types: [], + filters: {}, + }; + + const name = 'field'; + const values = ['value1', 'value2']; + + it('renders as expected', async () => { + render( + + + + + , + ); + + const autocomplete = screen.getByRole('combobox'); + const input = within(autocomplete).getByRole('textbox'); + await userEvent.click(input); + + await waitFor(() => { + screen.getByRole('listbox'); + }); + + expect(screen.getByRole('option', { name: values[0] })).toBeInTheDocument(); + expect(screen.getByRole('option', { name: values[1] })).toBeInTheDocument(); + }); + + it('renders as expected with async values', async () => { + render( + + + values} /> + + , + ); + + const autocomplete = screen.getByRole('combobox'); + const input = within(autocomplete).getByRole('textbox'); + await userEvent.click(input); + + await waitFor(() => { + screen.getByRole('listbox'); + }); + + expect(screen.getByRole('option', { name: values[0] })).toBeInTheDocument(); + expect(screen.getByRole('option', { name: values[1] })).toBeInTheDocument(); + }); + + it('does not affect unrelated filter state', async () => { + render( + + + + + + + , + ); + + // The spy should show the initial value. + expect(screen.getByTestId('unrelated-filter-spy')).toHaveTextContent( + 'value', + ); + + // Select a value from the autocomplete filter. + const autocomplete = screen.getByRole('combobox'); + const input = within(autocomplete).getByRole('textbox'); + await userEvent.click(input); + await waitFor(() => { + screen.getByRole('listbox'); + }); + await userEvent.click(screen.getByRole('option', { name: values[1] })); + + // Wait for the autocomplete filter's value to change. + await waitFor(() => { + expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent( + values[1], + ); + }); + + // Unrelated filter spy should maintain the same value. + expect(screen.getByTestId('unrelated-filter-spy')).toHaveTextContent( + 'value', + ); + }); + + describe('single', () => { + it('renders as expected with defaultValue', async () => { + render( + + + + + + , + ); + + const autocomplete = screen.getByRole('combobox'); + const input = within(autocomplete).getByRole('textbox'); + + await waitFor(() => { + expect(input).toHaveValue(values[1]); + expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent( + values[1], + ); + }); + }); + + it('renders as expected with initial context', async () => { + render( + + + + + + , + ); + + const autocomplete = screen.getByRole('combobox'); + const input = within(autocomplete).getByRole('textbox'); + + await waitFor(() => { + expect(input).toHaveValue(values[0]); + expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent( + values[0], + ); + }); + }); + + it('sets filter state when selecting a value', async () => { + render( + + + + + + , + ); + + // Select the first option in the autocomplete. + const autocomplete = screen.getByRole('combobox'); + const input = within(autocomplete).getByRole('textbox'); + await userEvent.click(input); + await waitFor(() => { + screen.getByRole('listbox'); + }); + await userEvent.click(screen.getByRole('option', { name: values[0] })); + + // The value should be present in the context. + await waitFor(() => { + expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent( + values[0], + ); + }); + + // Click the "Clear" button to remove the value. + const clearButton = within(autocomplete).getByLabelText('Clear'); + await userEvent.click(clearButton); + + // That value should have been unset from the context. + await waitFor(() => { + expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent(''); + }); + }); + }); + + describe('multiple', () => { + it('renders as expected with defaultValue', async () => { + render( + + + + + + , + ); + + await waitFor(() => { + expect(screen.getByText(values[0])).toBeInTheDocument(); + expect(screen.getByText(values[1])).toBeInTheDocument(); + expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent( + values.join(','), + ); + }); + }); + + it('renders as expected with initial context', async () => { + render( + + + + + + , + ); + + await waitFor(() => { + expect(screen.getByText(values[0])).toBeInTheDocument(); + expect(screen.getByText(values[1])).toBeInTheDocument(); + expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent( + values.join(','), + ); + }); + }); + + it('respects tag limit configuration', async () => { + render( + + + + + , + ); + + const autocomplete = screen.getByRole('combobox'); + const input = within(autocomplete).getByRole('textbox'); + + // Select the second value. + await userEvent.click(input); + await waitFor(() => { + screen.getByRole('listbox'); + }); + await userEvent.click(screen.getByRole('option', { name: values[1] })); + await waitFor(() => { + expect( + screen.getByRole('button', { name: values[1] }), + ).toBeInTheDocument(); + }); + + // Select the first value. + await userEvent.click(input); + await waitFor(() => { + screen.getByRole('listbox'); + }); + await userEvent.click(screen.getByRole('option', { name: values[0] })); + await waitFor(() => { + expect( + screen.getByRole('button', { name: values[0] }), + ).toBeInTheDocument(); + }); + + // Blur the field and only one tag should be shown with a +1. + input.blur(); + expect( + screen.queryByRole('button', { name: values[0] }), + ).not.toBeInTheDocument(); + expect(screen.getByText('+1')).toBeInTheDocument(); + }); + + it('sets filter state when selecting a value', async () => { + render( + + + + + + , + ); + + const autocomplete = screen.getByRole('combobox'); + + // Select both values in the autocomplete. + const input = within(autocomplete).getByRole('textbox'); + await userEvent.click(input); + await waitFor(() => { + screen.getByRole('listbox'); + }); + await userEvent.click(screen.getByRole('option', { name: values[0] })); + await userEvent.click(input); + await waitFor(() => { + screen.getByRole('listbox'); + }); + await userEvent.click(screen.getByRole('option', { name: values[1] })); + + // Both options should be present in the context. + await waitFor(() => { + expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent( + values.join(','), + ); + }); + + // Click the "Clear" button to remove the value. + const clearButton = within(autocomplete).getByLabelText('Clear'); + await userEvent.click(clearButton); + + // There should be no content in the filter context. + await waitFor(() => { + expect(screen.getByTestId(`${name}-filter-spy`)).toHaveTextContent(''); + }); + }); + }); +}); diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx new file mode 100644 index 0000000000..35d1f376e5 --- /dev/null +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx @@ -0,0 +1,120 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { ChangeEvent, useState } from 'react'; +import { Chip, TextField } from '@material-ui/core'; +import { + Autocomplete, + AutocompleteGetTagProps, + AutocompleteRenderInputParams, +} from '@material-ui/lab'; + +import { useSearch } from '../../context'; +import { useAsyncFilterValues, useDefaultFilterValue } from './hooks'; +import { SearchFilterComponentProps } from './SearchFilter'; + +/** + * @public + */ +export type SearchAutocompleteFilterProps = SearchFilterComponentProps & { + filterSelectedOptions?: boolean; + limitTags?: number; + multiple?: boolean; +}; + +/** + * @public + */ +export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => { + const { + className, + defaultValue, + name, + values: givenValues, + valuesDebounceMs, + label, + filterSelectedOptions, + limitTags, + multiple, + } = props; + const [inputValue, setInputValue] = useState(''); + useDefaultFilterValue(name, defaultValue); + const asyncValues = + typeof givenValues === 'function' ? givenValues : undefined; + const defaultValues = + typeof givenValues === 'function' ? undefined : givenValues; + const { value: values, loading } = useAsyncFilterValues( + asyncValues, + inputValue, + defaultValues, + valuesDebounceMs, + ); + const { filters, setFilters } = useSearch(); + const filterValue = + (filters[name] as string | string[] | undefined) || (multiple ? [] : null); + + // Set new filter values on input change. + const handleChange = ( + _: ChangeEvent<{}>, + newValue: string | string[] | null, + ) => { + setFilters(prevState => { + const { [name]: filter, ...others } = prevState; + + if (newValue) { + return { ...others, [name]: newValue }; + } + return { ...others }; + }); + }; + + // Provide the input field. + const renderInput = (params: AutocompleteRenderInputParams) => ( + + ); + + // Render tags as primary-colored chips. + const renderTags = ( + tagValue: string[], + getTagProps: AutocompleteGetTagProps, + ) => + tagValue.map((option: string, index: number) => ( + + )); + + return ( + setInputValue(newValue)} + renderInput={renderInput} + renderTags={renderTags} + /> + ); +}; diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx similarity index 95% rename from plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx rename to plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx index 7e8a7d585a..2c8a629f01 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,14 +14,13 @@ * limitations under the License. */ -import { Grid, Paper } from '@material-ui/core'; import React, { ComponentType } from 'react'; -import { - searchApiRef, - MockSearchApi, - SearchContextProvider, -} from '@backstage/plugin-search-react'; +import { Grid, Paper } from '@material-ui/core'; + import { TestApiProvider } from '@backstage/test-utils'; + +import { searchApiRef, MockSearchApi } from '../../api'; +import { SearchContextProvider } from '../../context'; import { SearchFilter } from './SearchFilter'; export default { diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx new file mode 100644 index 0000000000..89a1818e8d --- /dev/null +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx @@ -0,0 +1,410 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { screen, render, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { useApi } from '@backstage/core-plugin-api'; + +import { SearchContextProvider } from '../../context'; +import { SearchFilter } from './SearchFilter'; + +jest.mock('@backstage/core-plugin-api', () => ({ + ...jest.requireActual('@backstage/core-plugin-api'), + useApi: jest.fn().mockReturnValue({}), +})); + +describe('SearchFilter', () => { + const initialState = { + term: '', + filters: {}, + types: [], + }; + + const label = 'Field'; + const name = 'field'; + const values = ['value1', 'value2']; + const filters = { unrelated: 'unrelated' }; + + const query = jest.fn().mockResolvedValue({}); + (useApi as jest.Mock).mockReturnValue({ query: query }); + + afterAll(() => { + jest.resetAllMocks(); + }); + + it('Check that element was rendered and received props', async () => { + const CustomFilter = (props: { name: string }) =>
{props.name}
; + + render(); + + expect(screen.getByRole('heading', { name })).toBeInTheDocument(); + }); + + describe('Checkbox', () => { + it('Renders field name and values when provided as props', async () => { + render( + + + , + ); + + await waitFor(() => { + expect(screen.getByText(label)).toBeInTheDocument(); + }); + + expect( + screen.getByRole('checkbox', { name: values[0] }), + ).toBeInTheDocument(); + expect( + screen.getByRole('checkbox', { name: values[1] }), + ).toBeInTheDocument(); + }); + + it('Renders correctly based on filter state', async () => { + render( + + + , + ); + + await waitFor(() => { + expect(screen.getByText(label)).toBeInTheDocument(); + }); + + expect( + screen.getByRole('checkbox', { name: values[0] }), + ).not.toBeChecked(); + expect(screen.getByRole('checkbox', { name: values[1] })).toBeChecked(); + }); + + it('Renders correctly based on defaultValue', async () => { + render( + + + , + ); + + await waitFor(() => { + expect(screen.getByText(label)).toBeInTheDocument(); + }); + + expect(screen.getByRole('checkbox', { name: values[0] })).toBeChecked(); + expect( + screen.getByRole('checkbox', { name: values[1] }), + ).not.toBeChecked(); + }); + + it('Checking / unchecking a value sets filter state', async () => { + render( + + + , + ); + + await waitFor(() => { + expect(screen.getByText(label)).toBeInTheDocument(); + }); + + const checkBox = screen.getByRole('checkbox', { name: values[0] }); + + // Check the box. + await userEvent.click(checkBox); + await waitFor(() => { + expect(query).toHaveBeenLastCalledWith( + expect.objectContaining({ filters: { field: [values[0]] } }), + ); + }); + + // Uncheck the box. + await userEvent.click(checkBox); + await waitFor(() => { + expect(query).toHaveBeenLastCalledWith( + expect.objectContaining({ filters: {} }), + ); + }); + }); + + it('Checking / unchecking a value maintains unrelated filter state', async () => { + render( + + + , + ); + + await waitFor(() => { + expect(screen.getByText(label)).toBeInTheDocument(); + }); + + const checkBox = screen.getByRole('checkbox', { name: values[0] }); + + // Check the box. + await userEvent.click(checkBox); + await waitFor(() => { + expect(query).toHaveBeenLastCalledWith( + expect.objectContaining({ + filters: { ...filters, field: [values[0]] }, + }), + ); + }); + + // Uncheck the box. + await userEvent.click(checkBox); + await waitFor(() => { + expect(query).toHaveBeenLastCalledWith( + expect.objectContaining({ filters }), + ); + }); + }); + }); + + describe('Select', () => { + it('Renders field name and values when provided as props', async () => { + render( + + + , + ); + + await waitFor(() => { + expect(screen.getByText(label)).toBeInTheDocument(); + }); + + await userEvent.click(screen.getByRole('button')); + + await waitFor(() => { + expect(screen.getByRole('listbox')).toBeInTheDocument(); + }); + + expect( + screen.getByRole('option', { name: values[0] }), + ).toBeInTheDocument(); + expect( + screen.getByRole('option', { name: values[1] }), + ).toBeInTheDocument(); + }); + + it('Renders values when provided asynchronously', async () => { + render( + + values} + /> + , + ); + + await waitFor(() => { + expect(screen.getByRole('button')).toBeInTheDocument(); + expect( + screen.getByRole('button').getAttribute('aria-disabled'), + ).not.toBe('true'); + }); + + await userEvent.click(screen.getByRole('button')); + + await waitFor(() => { + expect(screen.getByRole('listbox')).toBeInTheDocument(); + }); + + expect( + screen.getByRole('option', { name: values[0] }), + ).toBeInTheDocument(); + expect( + screen.getByRole('option', { name: values[1] }), + ).toBeInTheDocument(); + }); + + it('Renders correctly based on filter state', async () => { + render( + + + , + ); + + await waitFor(() => { + expect(screen.getByText(label)).toBeInTheDocument(); + }); + + await userEvent.click(screen.getByRole('button')); + + await waitFor(() => { + expect(screen.getByRole('listbox')).toBeInTheDocument(); + }); + + expect(screen.getByRole('option', { name: values[0] })).toHaveAttribute( + 'aria-selected', + 'true', + ); + expect( + screen.getByRole('option', { name: values[1] }), + ).not.toHaveAttribute('aria-selected'); + expect(screen.getByRole('option', { name: 'All' })).not.toHaveAttribute( + 'aria-selected', + ); + }); + + it('Renders correctly based on defaultValue', async () => { + render( + + + , + ); + + await waitFor(() => { + expect(screen.getByText(label)).toBeInTheDocument(); + }); + + await userEvent.click(screen.getByRole('button')); + + await waitFor(() => { + expect(screen.getByRole('listbox')).toBeInTheDocument(); + }); + + expect(screen.getByRole('option', { name: values[0] })).toHaveAttribute( + 'aria-selected', + 'true', + ); + expect( + screen.getByRole('option', { name: values[1] }), + ).not.toHaveAttribute('aria-selected'); + expect(screen.getByRole('option', { name: 'All' })).not.toHaveAttribute( + 'aria-selected', + ); + }); + + it('Selecting a value sets filter state', async () => { + render( + + + , + ); + + await waitFor(() => { + expect(screen.getByText(label)).toBeInTheDocument(); + }); + + const button = screen.getByRole('button'); + + await userEvent.click(button); + + await waitFor(() => { + expect(screen.getByRole('listbox')).toBeInTheDocument(); + }); + + await userEvent.click(screen.getByRole('option', { name: values[0] })); + + await waitFor(() => { + expect(query).toHaveBeenLastCalledWith( + expect.objectContaining({ + filters: { [name]: values[0] }, + }), + ); + }); + + await userEvent.click(button); + + await waitFor(() => { + expect(screen.getByRole('listbox')).toBeInTheDocument(); + }); + + await userEvent.click(screen.getByRole('option', { name: 'All' })); + + await waitFor(() => { + expect(query).toHaveBeenLastCalledWith( + expect.objectContaining({ + filters: {}, + }), + ); + }); + }); + + it('Selecting a value maintains unrelated filter state', async () => { + render( + + + , + ); + + await waitFor(() => { + expect(screen.getByText(label)).toBeInTheDocument(); + }); + + const button = screen.getByRole('button'); + + await userEvent.click(button); + + await waitFor(() => { + expect(screen.getByRole('listbox')).toBeInTheDocument(); + }); + + await userEvent.click(screen.getByRole('option', { name: values[0] })); + + await waitFor(() => { + expect(query).toHaveBeenLastCalledWith( + expect.objectContaining({ + filters: { ...filters, [name]: values[0] }, + }), + ); + }); + + await userEvent.click(button); + + await waitFor(() => { + expect(screen.getByRole('listbox')).toBeInTheDocument(); + }); + + await userEvent.click(screen.getByRole('option', { name: 'All' })); + + await waitFor(() => { + expect(query).toHaveBeenLastCalledWith( + expect.objectContaining({ filters }), + ); + }); + }); + }); +}); diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx new file mode 100644 index 0000000000..2a6d7baafa --- /dev/null +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx @@ -0,0 +1,237 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { ReactElement, ChangeEvent } from 'react'; +import { + makeStyles, + FormControl, + FormControlLabel, + InputLabel, + Checkbox, + Select, + MenuItem, + FormLabel, +} from '@material-ui/core'; + +import { useSearch } from '../../context'; +import { + AutocompleteFilter, + SearchAutocompleteFilterProps, +} from './SearchFilter.Autocomplete'; +import { useAsyncFilterValues, useDefaultFilterValue } from './hooks'; + +const useStyles = makeStyles({ + label: { + textTransform: 'capitalize', + }, +}); + +/** + * @public + */ +export type SearchFilterComponentProps = { + className?: string; + name: string; + label?: string; + /** + * Either an array of values directly, or an async function to return a list + * of values to be used in the filter. In the autocomplete filter, the last + * input value is provided as an input to allow values to be filtered. This + * function is debounced and values cached. + */ + values?: string[] | ((partial: string) => Promise); + defaultValue?: string[] | string | null; + /** + * Debounce time in milliseconds, used when values is an async callback. + * Defaults to 250ms. + */ + valuesDebounceMs?: number; +}; + +/** + * @public + */ +export type SearchFilterWrapperProps = SearchFilterComponentProps & { + component: (props: SearchFilterComponentProps) => ReactElement; + debug?: boolean; +}; + +/** + * @public + */ +export const CheckboxFilter = (props: SearchFilterComponentProps) => { + const { + className, + defaultValue, + label, + name, + values: givenValues = [], + valuesDebounceMs, + } = props; + const classes = useStyles(); + const { filters, setFilters } = useSearch(); + useDefaultFilterValue(name, defaultValue); + const asyncValues = + typeof givenValues === 'function' ? givenValues : undefined; + const defaultValues = + typeof givenValues === 'function' ? undefined : givenValues; + const { value: values = [], loading } = useAsyncFilterValues( + asyncValues, + '', + defaultValues, + valuesDebounceMs, + ); + + const handleChange = (e: ChangeEvent) => { + const { + target: { value, checked }, + } = e; + + setFilters(prevFilters => { + const { [name]: filter, ...others } = prevFilters; + const rest = ((filter as string[]) || []).filter(i => i !== value); + const items = checked ? [...rest, value] : rest; + return items.length ? { ...others, [name]: items } : others; + }); + }; + + return ( + + {label ? {label} : null} + {values.map((value: string) => ( + + } + label={value} + /> + ))} + + ); +}; + +/** + * @public + */ +export const SelectFilter = (props: SearchFilterComponentProps) => { + const { + className, + defaultValue, + label, + name, + values: givenValues, + valuesDebounceMs, + } = props; + const classes = useStyles(); + useDefaultFilterValue(name, defaultValue); + const asyncValues = + typeof givenValues === 'function' ? givenValues : undefined; + const defaultValues = + typeof givenValues === 'function' ? undefined : givenValues; + const { value: values = [], loading } = useAsyncFilterValues( + asyncValues, + '', + defaultValues, + valuesDebounceMs, + ); + const { filters, setFilters } = useSearch(); + + const handleChange = (e: ChangeEvent<{ value: unknown }>) => { + const { + target: { value }, + } = e; + + setFilters(prevFilters => { + const { [name]: filter, ...others } = prevFilters; + return value ? { ...others, [name]: value as string } : others; + }); + }; + + return ( + + {label ? ( + + {label} + + ) : null} + + + ); +}; + +/** + * @public + */ +const SearchFilter = ({ + component: Element, + ...props +}: SearchFilterWrapperProps) => ; + +SearchFilter.Checkbox = ( + props: Omit & + SearchFilterComponentProps, +) => ; + +SearchFilter.Select = ( + props: Omit & + SearchFilterComponentProps, +) => ; + +/** + * A control surface for a given filter field name, rendered as an autocomplete + * textfield. A hard-coded list of values may be provided, or an async function + * which returns values may be provided instead. + * + * @public + */ +SearchFilter.Autocomplete = (props: SearchAutocompleteFilterProps) => ( + +); + +export { SearchFilter }; diff --git a/plugins/search/src/components/SearchFilter/hooks.test.tsx b/plugins/search-react/src/components/SearchFilter/hooks.test.tsx similarity index 98% rename from plugins/search/src/components/SearchFilter/hooks.test.tsx rename to plugins/search-react/src/components/SearchFilter/hooks.test.tsx index 14346a29eb..80c4a3a3a2 100644 --- a/plugins/search/src/components/SearchFilter/hooks.test.tsx +++ b/plugins/search-react/src/components/SearchFilter/hooks.test.tsx @@ -17,11 +17,9 @@ import React from 'react'; import { ApiProvider } from '@backstage/core-app-api'; import { TestApiRegistry } from '@backstage/test-utils'; import { renderHook } from '@testing-library/react-hooks'; -import { - SearchContextProvider, - useSearch, - searchApiRef, -} from '@backstage/plugin-search-react'; + +import { searchApiRef } from '../../api'; +import { SearchContextProvider, useSearch } from '../../context'; import { useDefaultFilterValue, useAsyncFilterValues } from './hooks'; jest.useFakeTimers(); diff --git a/plugins/search/src/components/SearchFilter/hooks.ts b/plugins/search-react/src/components/SearchFilter/hooks.ts similarity index 96% rename from plugins/search/src/components/SearchFilter/hooks.ts rename to plugins/search-react/src/components/SearchFilter/hooks.ts index da30466522..5771cc5288 100644 --- a/plugins/search/src/components/SearchFilter/hooks.ts +++ b/plugins/search-react/src/components/SearchFilter/hooks.ts @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -17,11 +17,14 @@ import { useEffect, useRef } from 'react'; import useAsyncFn from 'react-use/lib/useAsyncFn'; import useDebounce from 'react-use/lib/useDebounce'; -import { useSearch } from '@backstage/plugin-search-react'; + +import { useSearch } from '../../context'; /** * Utility hook for either asynchronously loading filter values from a given * function or synchronously providing a given list of default values. + * + * @public */ export const useAsyncFilterValues = ( fn: ((partial: string) => Promise) | undefined, @@ -75,6 +78,8 @@ export const useAsyncFilterValues = ( /** * Utility hook for applying a given default value to the search context. + * + * @public */ export const useDefaultFilterValue = ( name: string, diff --git a/plugins/search-react/src/components/SearchFilter/index.ts b/plugins/search-react/src/components/SearchFilter/index.ts new file mode 100644 index 0000000000..9f92c7c8e2 --- /dev/null +++ b/plugins/search-react/src/components/SearchFilter/index.ts @@ -0,0 +1,23 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { CheckboxFilter, SearchFilter, SelectFilter } from './SearchFilter'; +export { AutocompleteFilter } from './SearchFilter.Autocomplete'; +export type { + SearchFilterComponentProps, + SearchFilterWrapperProps, +} from './SearchFilter'; +export type { SearchAutocompleteFilterProps } from './SearchFilter.Autocomplete'; diff --git a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx b/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx similarity index 94% rename from plugins/search/src/components/SearchResult/SearchResult.stories.tsx rename to plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx index 207f1ae1d7..32f9a19a07 100644 --- a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx +++ b/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,20 +14,18 @@ * limitations under the License. */ -import { Link } from '@backstage/core-components'; -import { List, ListItem } from '@material-ui/core'; import React, { ComponentType } from 'react'; +import { List, ListItem } from '@material-ui/core'; import { MemoryRouter } from 'react-router'; -import { DefaultResultListItem } from '../DefaultResultListItem'; -import { - searchApiRef, - MockSearchApi, - SearchContextProvider, -} from '@backstage/plugin-search-react'; -import { SearchResult } from './SearchResult'; +import { Link } from '@backstage/core-components'; import { TestApiProvider } from '@backstage/test-utils'; +import { searchApiRef, MockSearchApi } from '../../api'; +import { SearchContextProvider } from '../../context'; +import { DefaultResultListItem } from '../DefaultResultListItem'; +import { SearchResult } from './SearchResult'; + const mockResults = { results: [ { diff --git a/plugins/search/src/components/SearchResult/SearchResult.test.tsx b/plugins/search-react/src/components/SearchResult/SearchResult.test.tsx similarity index 94% rename from plugins/search/src/components/SearchResult/SearchResult.test.tsx rename to plugins/search-react/src/components/SearchResult/SearchResult.test.tsx index d93eacaef0..988d59d7cf 100644 --- a/plugins/search/src/components/SearchResult/SearchResult.test.tsx +++ b/plugins/search-react/src/components/SearchResult/SearchResult.test.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,14 +14,16 @@ * limitations under the License. */ -import { renderInTestApp } from '@backstage/test-utils'; -import { waitFor } from '@testing-library/react'; import React from 'react'; -import { useSearch } from '@backstage/plugin-search-react'; +import { waitFor } from '@testing-library/react'; + +import { renderInTestApp } from '@backstage/test-utils'; + +import { useSearch } from '../../context'; import { SearchResult } from './SearchResult'; -jest.mock('@backstage/plugin-search-react', () => ({ - ...jest.requireActual('@backstage/plugin-search-react'), +jest.mock('../../context', () => ({ + ...jest.requireActual('../../context'), useSearch: jest.fn().mockReturnValue({ result: {}, }), diff --git a/plugins/search/src/components/SearchResult/SearchResult.tsx b/plugins/search-react/src/components/SearchResult/SearchResult.tsx similarity index 63% rename from plugins/search/src/components/SearchResult/SearchResult.tsx rename to plugins/search-react/src/components/SearchResult/SearchResult.tsx index a62dddb924..46a2dde305 100644 --- a/plugins/search/src/components/SearchResult/SearchResult.tsx +++ b/plugins/search-react/src/components/SearchResult/SearchResult.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,20 +14,33 @@ * limitations under the License. */ +import React from 'react'; + import { EmptyState, Progress, ResponseErrorPanel, } from '@backstage/core-components'; +import { AnalyticsContext } from '@backstage/core-plugin-api'; import { SearchResult } from '@backstage/plugin-search-common'; -import React from 'react'; -import { useSearch } from '@backstage/plugin-search-react'; -type Props = { +import { useSearch } from '../../context'; + +/** + * Props for {@link SearchResultComponent} + * + * @public + */ +export type SearchResultProps = { children: (results: { results: SearchResult[] }) => JSX.Element; }; -export const SearchResultComponent = ({ children }: Props) => { +/** + * A component returning the search result. + * + * @public + */ +export const SearchResultComponent = ({ children }: SearchResultProps) => { const { result: { loading, error, value }, } = useSearch(); @@ -51,4 +64,20 @@ export const SearchResultComponent = ({ children }: Props) => { return <>{children({ results: value.results })}; }; -export { SearchResultComponent as SearchResult }; +/** + * @public + */ +const HigherOrderSearchResult = (props: SearchResultProps) => { + return ( + + + + ); +}; + +export { HigherOrderSearchResult as SearchResult }; diff --git a/plugins/search-react/src/components/SearchResult/index.tsx b/plugins/search-react/src/components/SearchResult/index.tsx new file mode 100644 index 0000000000..503ac47bbd --- /dev/null +++ b/plugins/search-react/src/components/SearchResult/index.tsx @@ -0,0 +1,18 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { SearchResult, SearchResultComponent } from './SearchResult'; +export type { SearchResultProps } from './SearchResult'; diff --git a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx new file mode 100644 index 0000000000..24d9a76e51 --- /dev/null +++ b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx @@ -0,0 +1,58 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; + +import { renderInTestApp } from '@backstage/test-utils'; +import { waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { useSearch } from '../../context'; +import { SearchResultPager } from './SearchResultPager'; + +jest.mock('../../context', () => ({ + ...jest.requireActual('../../context'), + useSearch: jest.fn().mockReturnValue({ + result: {}, + }), +})); + +describe('SearchResultPager', () => { + it('renders pager buttons', async () => { + const fetchNextPage = jest.fn(); + const fetchPreviousPage = jest.fn(); + (useSearch as jest.Mock).mockReturnValueOnce({ + result: { loading: false, value: [] }, + fetchNextPage, + fetchPreviousPage, + }); + + const { getByLabelText } = await renderInTestApp(); + + await waitFor(() => { + expect(getByLabelText('previous page')).toBeInTheDocument(); + }); + await userEvent.click(getByLabelText('previous page')); + expect(fetchPreviousPage).toBeCalled(); + + await waitFor(() => { + expect(getByLabelText('next page')).toBeInTheDocument(); + }); + await userEvent.click(getByLabelText('next page')); + + expect(fetchNextPage).toBeCalled(); + }); +}); diff --git a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx new file mode 100644 index 0000000000..68f8223ca0 --- /dev/null +++ b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx @@ -0,0 +1,66 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; + +import { Button, makeStyles } from '@material-ui/core'; +import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; +import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; + +import { useSearch } from '../../context'; + +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + justifyContent: 'space-between', + gap: theme.spacing(2), + margin: theme.spacing(2, 0), + }, +})); + +/** + * @public + */ +export const SearchResultPager = () => { + const { fetchNextPage, fetchPreviousPage } = useSearch(); + const classes = useStyles(); + + if (!fetchNextPage && !fetchPreviousPage) { + return <>; + } + + return ( + + ); +}; diff --git a/plugins/search/src/components/SearchResult/index.tsx b/plugins/search-react/src/components/SearchResultPager/index.ts similarity index 85% rename from plugins/search/src/components/SearchResult/index.tsx rename to plugins/search-react/src/components/SearchResultPager/index.ts index e7d088f286..5ff203b15d 100644 --- a/plugins/search/src/components/SearchResult/index.tsx +++ b/plugins/search-react/src/components/SearchResultPager/index.ts @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,4 +14,4 @@ * limitations under the License. */ -export { SearchResult } from './SearchResult'; +export { SearchResultPager } from './SearchResultPager'; diff --git a/plugins/search/src/components/SearchTracker/SearchTracker.tsx b/plugins/search-react/src/components/SearchTracker/SearchTracker.tsx similarity index 91% rename from plugins/search/src/components/SearchTracker/SearchTracker.tsx rename to plugins/search-react/src/components/SearchTracker/SearchTracker.tsx index 35cfa1ec38..f900e45d45 100644 --- a/plugins/search/src/components/SearchTracker/SearchTracker.tsx +++ b/plugins/search-react/src/components/SearchTracker/SearchTracker.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -16,7 +16,7 @@ import React, { useEffect } from 'react'; import { useAnalytics } from '@backstage/core-plugin-api'; -import { useSearch } from '@backstage/plugin-search-react'; +import { useSearch } from '../../context'; /** * Capture search event on term change. diff --git a/plugins/search/src/components/SearchTracker/index.ts b/plugins/search-react/src/components/SearchTracker/index.ts similarity index 93% rename from plugins/search/src/components/SearchTracker/index.ts rename to plugins/search-react/src/components/SearchTracker/index.ts index 5e6a75aa25..9932f2eaec 100644 --- a/plugins/search/src/components/SearchTracker/index.ts +++ b/plugins/search-react/src/components/SearchTracker/index.ts @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/plugins/search-react/src/components/index.ts b/plugins/search-react/src/components/index.ts index 679a254827..263ca4ad59 100644 --- a/plugins/search-react/src/components/index.ts +++ b/plugins/search-react/src/components/index.ts @@ -15,3 +15,8 @@ */ export * from './HighlightedSearchResultText'; +export * from './SearchFilter'; +export * from './SearchResult'; +export * from './SearchResultPager'; +export * from './SearchBar'; +export * from './DefaultResultListItem'; diff --git a/plugins/search/README.md b/plugins/search/README.md index f4a32c9597..3803b71e43 100644 --- a/plugins/search/README.md +++ b/plugins/search/README.md @@ -13,14 +13,17 @@ Run `yarn dev` in the root directory, and then navigate to [/search](http://loca This search plugin is primarily responsible for the following: - Providing a `` routable extension. -- Exposing various search-related components (like ``, - ``, etc), which can be composed by a Backstage App or by +- Exposing various search-related components (like ``, + ``, etc), which can be composed by a Backstage App or by other Backstage Plugins to power search experiences of all kinds. -- Exposing a ``, which manages search state and API - communication with the Backstage backend. -Don't forget, a lot of functionality is available in backend plugins: +Don't forget, a lot of functionality is available in web libraries and backend plugins: +- `@backstage/plugin-search-react`, which is responsible for: + - Exposing a ``, which manages search state and API + communication with the Backstage backend. + - Exposing the `SearchApi` and its corresponding ref. + - Exposing reusable components, such as `` and ``, etc. - `@backstage/plugin-search-backend-node`, which is responsible for the search index management - `@backstage/plugin-search-backend`, which is responsible for query processing diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md index 21b9df5dda..800fa7e7fc 100644 --- a/plugins/search/api-report.md +++ b/plugins/search/api-report.md @@ -6,36 +6,29 @@ /// import { BackstagePlugin } from '@backstage/core-plugin-api'; +import { DefaultResultListItemProps } from '@backstage/plugin-search-react'; import { IconComponent } from '@backstage/core-plugin-api'; import { InputBaseProps } from '@material-ui/core'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; -import { ResultHighlight } from '@backstage/plugin-search-common'; import { RouteRef } from '@backstage/core-plugin-api'; -import { SearchDocument } from '@backstage/plugin-search-common'; -import { SearchResult as SearchResult_2 } from '@backstage/plugin-search-common'; +import { SearchAutocompleteFilterProps as SearchAutocompleteFilterProps_2 } from '@backstage/plugin-search-react'; +import { SearchBarBaseProps as SearchBarBaseProps_2 } from '@backstage/plugin-search-react'; +import { SearchFilterComponentProps as SearchFilterComponentProps_2 } from '@backstage/plugin-search-react'; +import { SearchResultProps } from '@backstage/plugin-search-react'; -// Warning: (ae-missing-release-tag) "DefaultResultListItem" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export const DefaultResultListItem: ({ - result, - highlight, - icon, - secondaryAction, - lineClamp, -}: { - icon?: ReactNode; - secondaryAction?: ReactNode; - result: SearchDocument; - highlight?: ResultHighlight | undefined; - lineClamp?: number | undefined; -}) => JSX.Element; +// @public @deprecated (undocumented) +export const DefaultResultListItem: ( + props: DefaultResultListItemProps, +) => JSX.Element; -// Warning: (ae-forgotten-export) The symbol "FiltersProps" needs to be exported by the entry point index.d.ts -// Warning: (ae-missing-release-tag) "Filters" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) +// @public @deprecated (undocumented) +export type FilterOptions = { + kind: Array; + lifecycle: Array; +}; + +// @public @deprecated (undocumented) export const Filters: ({ filters, filterOptions, @@ -44,51 +37,57 @@ export const Filters: ({ updateChecked, }: FiltersProps) => JSX.Element; -// Warning: (ae-forgotten-export) The symbol "FiltersButtonProps" needs to be exported by the entry point index.d.ts -// Warning: (ae-missing-release-tag) "FiltersButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) +// @public @deprecated (undocumented) export const FiltersButton: ({ numberOfSelectedFilters, handleToggleFilters, }: FiltersButtonProps) => JSX.Element; -// Warning: (ae-missing-release-tag) "FiltersState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) +// @public @deprecated +export type FiltersButtonProps = { + numberOfSelectedFilters: number; + handleToggleFilters: () => void; +}; + +// @public @deprecated +export type FiltersProps = { + filters: FiltersState; + filterOptions: FilterOptions; + resetFilters: () => void; + updateSelected: (filter: string) => void; + updateChecked: (filter: string) => void; +}; + +// @public @deprecated (undocumented) export type FiltersState = { selected: string; checked: Array; }; -// Warning: (ae-missing-release-tag) "HomePageSearchBar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export const HomePageSearchBar: ({ ...props -}: Partial>) => JSX.Element; +}: Partial>) => JSX.Element; // @public export type HomePageSearchBarProps = Partial< - Omit + Omit >; -// Warning: (ae-missing-release-tag) "SearchPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export const Router: () => JSX.Element; -// @public (undocumented) -export type SearchAutocompleteFilterProps = SearchFilterComponentProps & { +// @public @deprecated (undocumented) +export type SearchAutocompleteFilterProps = SearchFilterComponentProps_2 & { filterSelectedOptions?: boolean; limitTags?: number; multiple?: boolean; }; -// @public +// @public @deprecated export const SearchBar: ({ onChange, ...props }: SearchBarProps) => JSX.Element; -// @public +// @public @deprecated export const SearchBarBase: ({ onChange, onKeyDown, @@ -100,9 +99,9 @@ export const SearchBarBase: ({ inputProps: defaultInputProps, endAdornment: defaultEndAdornment, ...props -}: SearchBarBaseProps) => JSX.Element; +}: SearchBarBaseProps_2) => JSX.Element; -// @public +// @public @deprecated export type SearchBarBaseProps = Omit & { debounceTime?: number; clearButton?: boolean; @@ -111,20 +110,10 @@ export type SearchBarBaseProps = Omit & { onChange: (value: string) => void; }; -// Warning: (ae-missing-release-tag) "SearchBarNext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public @deprecated (undocumented) -export const SearchBarNext: ({ - onChange, - ...props -}: Partial) => JSX.Element; - -// @public +// @public @deprecated export type SearchBarProps = Partial; -// Warning: (ae-missing-release-tag) "SearchFilter" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) +// @public @deprecated (undocumented) export const SearchFilter: { ({ component: Element, ...props }: SearchFilterWrapperProps): JSX.Element; Checkbox( @@ -135,10 +124,10 @@ export const SearchFilter: { props: Omit & SearchFilterComponentProps, ): JSX.Element; - Autocomplete(props: SearchAutocompleteFilterProps): JSX.Element; + Autocomplete(props: SearchAutocompleteFilterProps_2): JSX.Element; }; -// @public (undocumented) +// @public @deprecated (undocumented) export type SearchFilterComponentProps = { className?: string; name: string; @@ -148,30 +137,12 @@ export type SearchFilterComponentProps = { valuesDebounceMs?: number; }; -// Warning: (ae-missing-release-tag) "SearchFilterNext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public @deprecated (undocumented) -export const SearchFilterNext: { - ({ component: Element, ...props }: SearchFilterWrapperProps): JSX.Element; - Checkbox( - props: Omit & - SearchFilterComponentProps, - ): JSX.Element; - Select( - props: Omit & - SearchFilterComponentProps, - ): JSX.Element; - Autocomplete(props: SearchAutocompleteFilterProps): JSX.Element; -}; - -// @public (undocumented) export type SearchFilterWrapperProps = SearchFilterComponentProps & { component: (props: SearchFilterComponentProps) => ReactElement; debug?: boolean; }; -// Warning: (ae-missing-release-tag) "SearchModal" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export const SearchModal: ({ open, @@ -185,8 +156,6 @@ export interface SearchModalChildrenProps { toggleModal: () => void; } -// Warning: (ae-missing-release-tag) "SearchModalProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export interface SearchModalProps { children?: (props: SearchModalChildrenProps) => JSX.Element; @@ -217,45 +186,25 @@ export type SearchModalValue = { setOpen: (open: boolean) => void; }; -// Warning: (ae-missing-release-tag) "SearchPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export const SearchPage: () => JSX.Element; -// Warning: (ae-missing-release-tag) "SearchPageNext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public @deprecated (undocumented) -export const SearchPageNext: () => JSX.Element; - -// Warning: (ae-missing-release-tag) "searchPlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) const searchPlugin: BackstagePlugin< { root: RouteRef; - nextRoot: RouteRef; }, {} >; export { searchPlugin as plugin }; export { searchPlugin }; -// Warning: (ae-missing-release-tag) "SearchResult" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export const SearchResult: ({ - children, -}: { - children: (results: { results: SearchResult_2[] }) => JSX.Element; -}) => JSX.Element; +// @public @deprecated (undocumented) +export const SearchResult: (props: SearchResultProps) => JSX.Element; -// Warning: (ae-missing-release-tag) "SearchResultPager" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) +// @public @deprecated (undocumented) export const SearchResultPager: () => JSX.Element; -// Warning: (ae-missing-release-tag) "SearchType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export const SearchType: { (props: SearchTypeProps): JSX.Element; @@ -274,7 +223,7 @@ export type SearchTypeAccordionProps = { defaultValue?: string; }; -// @public (undocumented) +// @public export type SearchTypeProps = { className?: string; name: string; @@ -291,29 +240,21 @@ export type SearchTypeTabsProps = { defaultValue?: string; }; -// Warning: (ae-missing-release-tag) "SidebarSearch" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export const SidebarSearch: (props: SidebarSearchProps) => JSX.Element; -// Warning: (ae-missing-release-tag) "SidebarSearchModal" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export const SidebarSearchModal: ( props: SidebarSearchModalProps, ) => JSX.Element; -// Warning: (ae-missing-release-tag) "SidebarSearchModalProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) +// @public export type SidebarSearchModalProps = { icon?: IconComponent; children?: (props: SearchModalChildrenProps) => JSX.Element; }; -// Warning: (ae-missing-release-tag) "SidebarSearchProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) +// @public export type SidebarSearchProps = { icon?: IconComponent; }; diff --git a/plugins/search/src/components/Filters/Filters.tsx b/plugins/search/src/components/Filters/Filters.tsx index a0ca4914a2..9170961e18 100644 --- a/plugins/search/src/components/Filters/Filters.tsx +++ b/plugins/search/src/components/Filters/Filters.tsx @@ -44,17 +44,34 @@ const useStyles = makeStyles(theme => ({ }, })); +/** + * @public + * @deprecated This type and corresponding component will be removed in a + * future release. + */ export type FiltersState = { selected: string; checked: Array; }; +/** + * @public + * @deprecated This type and corresponding component will be removed in a + * future release. + */ export type FilterOptions = { kind: Array; lifecycle: Array; }; -type FiltersProps = { +/** + * Props for {@link Filters}. + * + * @public + * @deprecated This type and corresponding component will be removed in a + * future release. + */ +export type FiltersProps = { filters: FiltersState; filterOptions: FilterOptions; resetFilters: () => void; @@ -62,6 +79,11 @@ type FiltersProps = { updateChecked: (filter: string) => void; }; +/** + * @public + * @deprecated This component will be removed in a future release. Use + * `SearchFilter` from `@backstage/plugin-search-react` instead. + */ export const Filters = ({ filters, filterOptions, diff --git a/plugins/search/src/components/Filters/FiltersButton.tsx b/plugins/search/src/components/Filters/FiltersButton.tsx index 1c2829defe..890c787689 100644 --- a/plugins/search/src/components/Filters/FiltersButton.tsx +++ b/plugins/search/src/components/Filters/FiltersButton.tsx @@ -28,11 +28,22 @@ const useStyles = makeStyles(theme => ({ }, })); -type FiltersButtonProps = { +/** + * Props for {@link FiltersButton}. + * + * @public + * @deprecated This type and corresponding component will be removed in a + * future release. + */ +export type FiltersButtonProps = { numberOfSelectedFilters: number; handleToggleFilters: () => void; }; +/** + * @public + * @deprecated See `SearchFilter` in `@backstage/plugin-search-react` instead. + */ export const FiltersButton = ({ numberOfSelectedFilters, handleToggleFilters, diff --git a/plugins/search/src/components/Filters/index.tsx b/plugins/search/src/components/Filters/index.tsx index de890e0eaf..dc4d811dbd 100644 --- a/plugins/search/src/components/Filters/index.tsx +++ b/plugins/search/src/components/Filters/index.tsx @@ -15,5 +15,6 @@ */ export { FiltersButton } from './FiltersButton'; +export type { FiltersButtonProps } from './FiltersButton'; export { Filters } from './Filters'; -export type { FiltersState } from './Filters'; +export type { FilterOptions, FiltersProps, FiltersState } from './Filters'; diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx index bc4b409d57..6e9787c2e0 100644 --- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx +++ b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx @@ -16,7 +16,10 @@ import React, { useCallback, useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { SearchBarBase, SearchBarBaseProps } from '../SearchBar'; +import { + SearchBarBase, + SearchBarBaseProps, +} from '@backstage/plugin-search-react'; import { useNavigateToQuery } from '../util'; const useStyles = makeStyles({ @@ -37,9 +40,7 @@ export type HomePageSearchBarProps = Partial< >; /** - * The search bar created specifically for the composable home page - * - * @public + * The search bar created specifically for the composable home page. */ export const HomePageSearchBar = ({ ...props }: HomePageSearchBarProps) => { const classes = useStyles(props); diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx index b5d55fed8e..a854869976 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.tsx @@ -14,35 +14,20 @@ * limitations under the License. */ -import React, { - ChangeEvent, - KeyboardEvent, - useState, - useEffect, - useCallback, -} from 'react'; -import useDebounce from 'react-use/lib/useDebounce'; -import { configApiRef, useApi } from '@backstage/core-plugin-api'; -import { - InputBase, - InputBaseProps, - InputAdornment, - IconButton, -} from '@material-ui/core'; -import SearchIcon from '@material-ui/icons/Search'; -import ClearButton from '@material-ui/icons/Clear'; +import React, { useCallback } from 'react'; + +import { InputBaseProps } from '@material-ui/core'; import { - SearchContextProvider, + SearchBarBase as RealSearchBarBase, useSearch, - useSearchContextCheck, } from '@backstage/plugin-search-react'; -import { TrackSearch } from '../SearchTracker'; /** * Props for {@link SearchBarBase}. * * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. */ export type SearchBarBaseProps = Omit & { debounceTime?: number; @@ -58,100 +43,15 @@ export type SearchBarBaseProps = Omit & { * Recommended if you don't use Search Provider or Search Context. * * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. */ -export const SearchBarBase = ({ - onChange, - onKeyDown, - onSubmit, - debounceTime = 200, - clearButton = true, - fullWidth = true, - value: defaultValue, - inputProps: defaultInputProps = {}, - endAdornment: defaultEndAdornment, - ...props -}: SearchBarBaseProps) => { - const configApi = useApi(configApiRef); - const [value, setValue] = useState(defaultValue as string); - const hasSearchContext = useSearchContextCheck(); - - useEffect(() => { - setValue(prevValue => - prevValue !== defaultValue ? (defaultValue as string) : prevValue, - ); - }, [defaultValue]); - - useDebounce(() => onChange(value), debounceTime, [value]); - - const handleChange = useCallback( - (e: ChangeEvent) => { - setValue(e.target.value); - }, - [setValue], - ); - - const handleKeyDown = useCallback( - (e: KeyboardEvent) => { - if (onKeyDown) onKeyDown(e); - if (onSubmit && e.key === 'Enter') { - onSubmit(); - } - }, - [onKeyDown, onSubmit], - ); - - const handleClear = useCallback(() => { - onChange(''); - }, [onChange]); - - const placeholder = `Search in ${ - configApi.getOptionalString('app.title') || 'Backstage' - }`; - - const startAdornment = ( - - - - - - ); - - const endAdornment = ( - - - - - - ); - - const searchBar = ( - - - - ); - - return hasSearchContext ? ( - searchBar - ) : ( - {searchBar} - ); -}; +export const SearchBarBase = RealSearchBarBase; /** * Props for {@link SearchBar}. * * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. */ export type SearchBarProps = Partial; @@ -159,6 +59,7 @@ export type SearchBarProps = Partial; * Recommended search bar when you use the Search Provider or Search Context. * * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. */ export const SearchBar = ({ onChange, ...props }: SearchBarProps) => { const { term, setTerm } = useSearch(); diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx index 03f4f28943..3db5112b88 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx @@ -14,103 +14,14 @@ * limitations under the License. */ -import React, { ChangeEvent, useState } from 'react'; -import { Chip, TextField } from '@material-ui/core'; -import { - Autocomplete, - AutocompleteGetTagProps, - AutocompleteRenderInputParams, -} from '@material-ui/lab'; -import { useSearch } from '@backstage/plugin-search-react'; -import { useAsyncFilterValues, useDefaultFilterValue } from './hooks'; -import { SearchFilterComponentProps } from './SearchFilter'; +import { SearchFilterComponentProps } from '@backstage/plugin-search-react'; /** * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. */ export type SearchAutocompleteFilterProps = SearchFilterComponentProps & { filterSelectedOptions?: boolean; limitTags?: number; multiple?: boolean; }; - -export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => { - const { - className, - defaultValue, - name, - values: givenValues, - valuesDebounceMs, - label, - filterSelectedOptions, - limitTags, - multiple, - } = props; - const [inputValue, setInputValue] = useState(''); - useDefaultFilterValue(name, defaultValue); - const asyncValues = - typeof givenValues === 'function' ? givenValues : undefined; - const defaultValues = - typeof givenValues === 'function' ? undefined : givenValues; - const { value: values, loading } = useAsyncFilterValues( - asyncValues, - inputValue, - defaultValues, - valuesDebounceMs, - ); - const { filters, setFilters } = useSearch(); - const filterValue = - (filters[name] as string | string[] | undefined) || (multiple ? [] : null); - - // Set new filter values on input change. - const handleChange = ( - _: ChangeEvent<{}>, - newValue: string | string[] | null, - ) => { - setFilters(prevState => { - const { [name]: filter, ...others } = prevState; - - if (newValue) { - return { ...others, [name]: newValue }; - } - return { ...others }; - }); - }; - - // Provide the input field. - const renderInput = (params: AutocompleteRenderInputParams) => ( - - ); - - // Render tags as primary-colored chips. - const renderTags = ( - tagValue: string[], - getTagProps: AutocompleteGetTagProps, - ) => - tagValue.map((option: string, index: number) => ( - - )); - - return ( - setInputValue(newValue)} - renderInput={renderInput} - renderTags={renderTags} - /> - ); -}; diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx index bfbab8531c..e58bbd5c14 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx @@ -14,33 +14,18 @@ * limitations under the License. */ -import React, { ReactElement, ChangeEvent } from 'react'; -import { - makeStyles, - FormControl, - FormControlLabel, - InputLabel, - Checkbox, - Select, - MenuItem, - FormLabel, -} from '@material-ui/core'; +import React, { ReactElement } from 'react'; import { AutocompleteFilter, + CheckboxFilter, SearchAutocompleteFilterProps, -} from './SearchFilter.Autocomplete'; -import { useSearch } from '@backstage/plugin-search-react'; -import { useAsyncFilterValues, useDefaultFilterValue } from './hooks'; - -const useStyles = makeStyles({ - label: { - textTransform: 'capitalize', - }, -}); + SelectFilter, +} from '@backstage/plugin-search-react'; /** * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. */ export type SearchFilterComponentProps = { className?: string; @@ -63,152 +48,33 @@ export type SearchFilterComponentProps = { /** * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. */ export type SearchFilterWrapperProps = SearchFilterComponentProps & { component: (props: SearchFilterComponentProps) => ReactElement; debug?: boolean; }; -const CheckboxFilter = (props: SearchFilterComponentProps) => { - const { - className, - defaultValue, - label, - name, - values: givenValues = [], - valuesDebounceMs, - } = props; - const classes = useStyles(); - const { filters, setFilters } = useSearch(); - useDefaultFilterValue(name, defaultValue); - const asyncValues = - typeof givenValues === 'function' ? givenValues : undefined; - const defaultValues = - typeof givenValues === 'function' ? undefined : givenValues; - const { value: values = [], loading } = useAsyncFilterValues( - asyncValues, - '', - defaultValues, - valuesDebounceMs, - ); - - const handleChange = (e: ChangeEvent) => { - const { - target: { value, checked }, - } = e; - - setFilters(prevFilters => { - const { [name]: filter, ...others } = prevFilters; - const rest = ((filter as string[]) || []).filter(i => i !== value); - const items = checked ? [...rest, value] : rest; - return items.length ? { ...others, [name]: items } : others; - }); - }; - - return ( - - {label ? {label} : null} - {values.map((value: string) => ( - - } - label={value} - /> - ))} - - ); -}; - -const SelectFilter = (props: SearchFilterComponentProps) => { - const { - className, - defaultValue, - label, - name, - values: givenValues, - valuesDebounceMs, - } = props; - const classes = useStyles(); - useDefaultFilterValue(name, defaultValue); - const asyncValues = - typeof givenValues === 'function' ? givenValues : undefined; - const defaultValues = - typeof givenValues === 'function' ? undefined : givenValues; - const { value: values = [], loading } = useAsyncFilterValues( - asyncValues, - '', - defaultValues, - valuesDebounceMs, - ); - const { filters, setFilters } = useSearch(); - - const handleChange = (e: ChangeEvent<{ value: unknown }>) => { - const { - target: { value }, - } = e; - - setFilters(prevFilters => { - const { [name]: filter, ...others } = prevFilters; - return value ? { ...others, [name]: value as string } : others; - }); - }; - - return ( - - {label ? ( - - {label} - - ) : null} - - - ); -}; - +/** + * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. + */ const SearchFilter = ({ component: Element, ...props }: SearchFilterWrapperProps) => ; +/** + * @deprecated Import from `@backstage/plugin-search-react` instead. + */ SearchFilter.Checkbox = ( props: Omit & SearchFilterComponentProps, ) => ; +/** + * @deprecated Import from `@backstage/plugin-search-react` instead. + */ SearchFilter.Select = ( props: Omit & SearchFilterComponentProps, @@ -218,18 +84,12 @@ SearchFilter.Select = ( * A control surface for a given filter field name, rendered as an autocomplete * textfield. A hard-coded list of values may be provided, or an async function * which returns values may be provided instead. + * * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. */ SearchFilter.Autocomplete = (props: SearchAutocompleteFilterProps) => ( ); -/** - * @deprecated This component was used for rapid prototyping of the Backstage - * Search platform. Now that the API has stabilized, you should use the - * component instead. This component will be removed in an - * upcoming release. - */ -const SearchFilterNext = SearchFilter; - -export { SearchFilter, SearchFilterNext }; +export { SearchFilter }; diff --git a/plugins/search/src/components/SearchFilter/index.ts b/plugins/search/src/components/SearchFilter/index.ts index 86cd66ff6b..3050330038 100644 --- a/plugins/search/src/components/SearchFilter/index.ts +++ b/plugins/search/src/components/SearchFilter/index.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -export { SearchFilter, SearchFilterNext } from './SearchFilter'; +export { SearchFilter } from './SearchFilter'; export type { SearchFilterComponentProps, SearchFilterWrapperProps, diff --git a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx index a4e92f53ec..aad018c334 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx @@ -27,17 +27,17 @@ import { import { makeStyles } from '@material-ui/core/styles'; import React, { ComponentType } from 'react'; import { rootRouteRef } from '../../plugin'; -import { DefaultResultListItem } from '../DefaultResultListItem'; import { SearchBar } from '../SearchBar'; import { + DefaultResultListItem, searchApiRef, MockSearchApi, SearchContextProvider, + SearchResult, + SearchResultPager, } from '@backstage/plugin-search-react'; import { TestApiProvider } from '@backstage/test-utils'; import { SearchModal } from './SearchModal'; -import { SearchResult } from '../SearchResult'; -import { SearchResultPager } from '../SearchResultPager'; import { SearchType } from '../SearchType'; import { useSearchModal } from './useSearchModal'; diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx index b3df52d42e..6c37f20001 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.tsx @@ -28,14 +28,14 @@ import { } from '@material-ui/core'; import LaunchIcon from '@material-ui/icons/Launch'; import { makeStyles } from '@material-ui/core/styles'; -import { SearchBar } from '../SearchBar'; -import { DefaultResultListItem } from '../DefaultResultListItem'; -import { SearchResult } from '../SearchResult'; import { + DefaultResultListItem, SearchContextProvider, + SearchBar, + SearchResult, + SearchResultPager, useSearch, } from '@backstage/plugin-search-react'; -import { SearchResultPager } from '../SearchResultPager'; import { useRouteRef } from '@backstage/core-plugin-api'; import { Link, useContent } from '@backstage/core-components'; import { rootRouteRef } from '../../plugin'; @@ -50,6 +50,9 @@ export interface SearchModalChildrenProps { toggleModal: () => void; } +/** + * @public + **/ export interface SearchModalProps { /** * If true, it renders the modal. @@ -167,6 +170,9 @@ export const Modal = ({ toggleModal }: SearchModalProps) => { ); }; +/** + * @public + */ export const SearchModal = ({ open = true, hidden, diff --git a/plugins/search/src/components/SearchPage/SearchPage.tsx b/plugins/search/src/components/SearchPage/SearchPage.tsx index 29a22a6f5c..7145c7a5ef 100644 --- a/plugins/search/src/components/SearchPage/SearchPage.tsx +++ b/plugins/search/src/components/SearchPage/SearchPage.tsx @@ -87,6 +87,9 @@ export const UrlUpdater = () => { return null; }; +/** + * @public + */ export const SearchPage = () => { const outlet = useOutlet(); diff --git a/plugins/search/src/components/SearchResultPager/SearchResultPager.tsx b/plugins/search/src/components/SearchResultPager/SearchResultPager.tsx index 6f4c8628a6..287e485dd1 100644 --- a/plugins/search/src/components/SearchResultPager/SearchResultPager.tsx +++ b/plugins/search/src/components/SearchResultPager/SearchResultPager.tsx @@ -29,6 +29,10 @@ const useStyles = makeStyles(theme => ({ }, })); +/** + * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. + */ export const SearchResultPager = () => { const { fetchNextPage, fetchPreviousPage } = useSearch(); const classes = useStyles(); diff --git a/plugins/search/src/components/SearchType/SearchType.tsx b/plugins/search/src/components/SearchType/SearchType.tsx index 79c3dda2b9..b20e8b5fba 100644 --- a/plugins/search/src/components/SearchType/SearchType.tsx +++ b/plugins/search/src/components/SearchType/SearchType.tsx @@ -47,6 +47,8 @@ const useStyles = makeStyles(theme => ({ })); /** + * Props for {@link SearchType}. + * * @public */ export type SearchTypeProps = { @@ -56,6 +58,9 @@ export type SearchTypeProps = { defaultValue?: string[] | string | null; }; +/** + * @public + */ const SearchType = (props: SearchTypeProps) => { const { className, defaultValue, name, values = [] } = props; const classes = useStyles(); diff --git a/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx b/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx index 25d41fa10f..36ead2ab15 100644 --- a/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx +++ b/plugins/search/src/components/SidebarSearch/SidebarSearch.tsx @@ -21,10 +21,18 @@ import { rootRouteRef } from '../../plugin'; import { useRouteRef, IconComponent } from '@backstage/core-plugin-api'; import { SidebarSearchField, useContent } from '@backstage/core-components'; +/** + * Props for {@link SidebarSearch}. + * + * @public + */ export type SidebarSearchProps = { icon?: IconComponent; }; +/** + * @public + */ export const SidebarSearch = (props: SidebarSearchProps) => { const searchRoute = useRouteRef(rootRouteRef); const { focusContent } = useContent(); diff --git a/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx b/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx index 191a09395c..fb4afc75fd 100644 --- a/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx +++ b/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx @@ -24,6 +24,11 @@ import { useSearchModal, } from '../SearchModal'; +/** + * Props for {@link SidebarSearchModal}. + * + * @public + */ export type SidebarSearchModalProps = { icon?: IconComponent; children?: (props: SearchModalChildrenProps) => JSX.Element; diff --git a/plugins/search/src/index.ts b/plugins/search/src/index.ts index 1457ac781d..fd0e70c61a 100644 --- a/plugins/search/src/index.ts +++ b/plugins/search/src/index.ts @@ -21,14 +21,19 @@ */ export { Filters, FiltersButton } from './components/Filters'; -export type { FiltersState } from './components/Filters'; +export type { + FilterOptions, + FiltersState, + FiltersProps, + FiltersButtonProps, +} from './components/Filters'; export type { HomePageSearchBarProps } from './components/HomePageComponent'; export { SearchBar, SearchBarBase } from './components/SearchBar'; export type { SearchBarBaseProps, SearchBarProps, } from './components/SearchBar'; -export { SearchFilter, SearchFilterNext } from './components/SearchFilter'; +export { SearchFilter } from './components/SearchFilter'; export type { SearchAutocompleteFilterProps, SearchFilterComponentProps, @@ -60,9 +65,7 @@ export type { SidebarSearchModalProps } from './components/SidebarSearchModal'; export { DefaultResultListItem, HomePageSearchBar, - SearchBarNext, SearchPage, - SearchPageNext, searchPlugin as plugin, searchPlugin, SearchResult, diff --git a/plugins/search/src/plugin.ts b/plugins/search/src/plugin.ts index 96e7bc1eed..19fd501129 100644 --- a/plugins/search/src/plugin.ts +++ b/plugins/search/src/plugin.ts @@ -15,7 +15,11 @@ */ import { SearchClient } from './apis'; -import { searchApiRef } from '@backstage/plugin-search-react'; +import { + searchApiRef, + SearchResult as RealSearchResult, + DefaultResultListItem as RealDefaultResultListItem, +} from '@backstage/plugin-search-react'; import { createApiFactory, createPlugin, @@ -30,10 +34,9 @@ export const rootRouteRef = createRouteRef({ id: 'search', }); -export const rootNextRouteRef = createRouteRef({ - id: 'search:next', -}); - +/** + * @public + */ export const searchPlugin = createPlugin({ id: 'search', apis: [ @@ -47,10 +50,12 @@ export const searchPlugin = createPlugin({ ], routes: { root: rootRouteRef, - nextRoot: rootNextRouteRef, }, }); +/** + * @public + */ export const SearchPage = searchPlugin.provide( createRoutableExtension({ name: 'SearchPage', @@ -60,67 +65,14 @@ export const SearchPage = searchPlugin.provide( ); /** - * @deprecated This component was used for rapid prototyping of the Backstage - * Search platform. Now that the API has stabilized, you should use the - * component instead. This component will be removed in an - * upcoming release. + * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. */ -export const SearchPageNext = searchPlugin.provide( - createRoutableExtension({ - name: 'SearchPageNext', - component: () => import('./components/SearchPage').then(m => m.SearchPage), - mountPoint: rootNextRouteRef, - }), -); - -export const SearchBar = searchPlugin.provide( - createComponentExtension({ - name: 'SearchBar', - component: { - lazy: () => import('./components/SearchBar').then(m => m.SearchBar), - }, - }), -); +export const SearchResult = RealSearchResult; /** - * @deprecated This component was used for rapid prototyping of the Backstage - * Search platform. Now that the API has stabilized, you should use the - * component instead. This component will be removed in an - * upcoming release. + * @public */ -export const SearchBarNext = searchPlugin.provide( - createComponentExtension({ - name: 'SearchBarNext', - component: { - lazy: () => import('./components/SearchBar').then(m => m.SearchBar), - }, - }), -); - -export const SearchResult = searchPlugin.provide( - createComponentExtension({ - name: 'SearchResult', - component: { - lazy: () => import('./components/SearchResult').then(m => m.SearchResult), - }, - }), -); - -/** - * @deprecated This component was used for rapid prototyping of the Backstage - * Search platform. Now that the API has stabilized, you should use the - * component instead. This component will be removed in an - * upcoming release. - */ -export const SearchResultNext = searchPlugin.provide( - createComponentExtension({ - name: 'SearchResultNext', - component: { - lazy: () => import('./components/SearchResult').then(m => m.SearchResult), - }, - }), -); - export const SidebarSearchModal = searchPlugin.provide( createComponentExtension({ name: 'SidebarSearchModal', @@ -133,18 +85,15 @@ export const SidebarSearchModal = searchPlugin.provide( }), ); -export const DefaultResultListItem = searchPlugin.provide( - createComponentExtension({ - name: 'DefaultResultListItem', - component: { - lazy: () => - import('./components/DefaultResultListItem').then( - m => m.DefaultResultListItem, - ), - }, - }), -); +/** + * @public + * @deprecated Import from `@backstage/plugin-search-react` instead. + */ +export const DefaultResultListItem = RealDefaultResultListItem; +/** + * @public + */ export const HomePageSearchBar = searchPlugin.provide( createComponentExtension({ name: 'HomePageSearchBar', diff --git a/plugins/vault-backend/package.json b/plugins/vault-backend/package.json index 15e5be42a8..3ec616aa12 100644 --- a/plugins/vault-backend/package.json +++ b/plugins/vault-backend/package.json @@ -53,7 +53,7 @@ "@backstage/cli": "^0.17.2-next.1", "@types/compression": "^1.7.2", "@types/supertest": "^2.0.8", - "msw": "^0.35.0", + "msw": "^0.42.0", "supertest": "^4.0.2" }, "files": [ diff --git a/plugins/vault/dev/index.tsx b/plugins/vault/dev/index.tsx index fd89e65889..f5056cd057 100644 --- a/plugins/vault/dev/index.tsx +++ b/plugins/vault/dev/index.tsx @@ -13,7 +13,72 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +import { Entity } from '@backstage/catalog-model'; +import { Content, Header, HeaderLabel, Page } from '@backstage/core-components'; import { createDevApp } from '@backstage/dev-utils'; +import { EntityProvider } from '@backstage/plugin-catalog-react'; +import { TestApiProvider } from '@backstage/test-utils'; +import { Box, Typography } from '@material-ui/core'; +import SomeIcon from '@material-ui/icons/Storage'; +import React from 'react'; +import { VaultApi, vaultApiRef } from '../src/api'; +import { EntityVaultCard } from '../src/components/EntityVaultCard'; +import { EntityVaultTable } from '../src/components/EntityVaultTable'; +import { VAULT_SECRET_PATH_ANNOTATION } from '../src/constants'; import { vaultPlugin } from '../src/plugin'; -createDevApp().registerPlugin(vaultPlugin).render(); +const entity: Entity = { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Component', + metadata: { + name: 'backstage', + annotations: { [VAULT_SECRET_PATH_ANNOTATION]: 'a/b' }, + }, + spec: { + type: 'service', + }, +}; + +const mockedApi: VaultApi = { + async listSecrets() { + return [ + { + name: 'a::b', + editUrl: 'https://example.com', + showUrl: 'https://example.com', + }, + { + name: 'c::d', + editUrl: 'https://example.com', + showUrl: 'https://example.com', + }, + ]; + }, +}; + +createDevApp() + .registerPlugin(vaultPlugin) + .addPage({ + element: ( + + + +
+ +
+ + As a card + + + As a table + + + + + + ), + title: 'Vault', + icon: SomeIcon, + }) + .render(); diff --git a/plugins/vault/package.json b/plugins/vault/package.json index 05b8da1df4..35f441e65e 100644 --- a/plugins/vault/package.json +++ b/plugins/vault/package.json @@ -58,7 +58,7 @@ "@types/jest": "*", "@types/node": "*", "cross-fetch": "^3.1.5", - "msw": "^0.35.0" + "msw": "^0.42.0" }, "files": [ "dist" diff --git a/plugins/vault/src/api.test.ts b/plugins/vault/src/api.test.ts index 3452cbad38..70c6a553df 100644 --- a/plugins/vault/src/api.test.ts +++ b/plugins/vault/src/api.test.ts @@ -44,9 +44,9 @@ describe('api', () => { server.use( rest.get(`${mockBaseUrl}/v1/secrets/:path`, (req, res, ctx) => { const { path } = req.params; - if (path === 'test%2Fsuccess') { + if (path === 'test/success') { return res(ctx.json(mockSecretsResult)); - } else if (path === 'test%2Ferror') { + } else if (path === 'test/error') { return res(ctx.json([])); } return res(ctx.status(400)); diff --git a/plugins/vault/src/components/EntityVaultTable/EntityVaultTable.test.tsx b/plugins/vault/src/components/EntityVaultTable/EntityVaultTable.test.tsx index 3538d2e0ae..f2b181562a 100644 --- a/plugins/vault/src/components/EntityVaultTable/EntityVaultTable.test.tsx +++ b/plugins/vault/src/components/EntityVaultTable/EntityVaultTable.test.tsx @@ -27,7 +27,7 @@ import { ApiProvider, UrlPatternDiscovery } from '@backstage/core-app-api'; import { VaultSecret, vaultApiRef, VaultClient } from '../../api'; import { rest } from 'msw'; -describe('EntityVautTable', () => { +describe('EntityVaultTable', () => { const server = setupServer(); setupRequestMockHandlers(server); let apis: TestApiRegistry; @@ -85,9 +85,9 @@ describe('EntityVautTable', () => { server.use( rest.get(`${mockBaseUrl}/v1/secrets/:path`, (req, res, ctx) => { const { path } = req.params; - if (path === 'test%2Fsuccess') { + if (path === 'test/success') { return res(ctx.json(mockSecretsResult)); - } else if (path === 'test%2Ferror') { + } else if (path === 'test/error') { return res(ctx.json([])); } return res(ctx.status(400)); diff --git a/scripts/api-extractor.ts b/scripts/api-extractor.ts index 15e43fb02d..619dafabd4 100644 --- a/scripts/api-extractor.ts +++ b/scripts/api-extractor.ts @@ -256,6 +256,7 @@ const NO_WARNING_PACKAGES = [ 'plugins/scaffolder-backend-module-rails', 'plugins/scaffolder-backend-module-yeoman', 'plugins/scaffolder-common', + 'plugins/search', 'plugins/search-backend', 'plugins/search-backend-node', 'plugins/search-backend-module-elasticsearch', diff --git a/yarn.lock b/yarn.lock index 73b604becb..a82b4d5dab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5216,9 +5216,9 @@ zustand "3.6.9" "@roadiehq/backstage-plugin-github-pull-requests@^2.0.0": - version "2.1.2" - resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-github-pull-requests/-/backstage-plugin-github-pull-requests-2.1.2.tgz#1c8289679bb109a70c30b5ba090ea7d751553764" - integrity sha512-VXv1D1JhifX0B9nukxFa61MyXouPTXEYkeNwYB+Y3e0VfoPEGzAeE/Ub23rP8aVcYsbuyCA+6u/HQsrw6Vgpxw== + version "2.1.3" + resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-github-pull-requests/-/backstage-plugin-github-pull-requests-2.1.3.tgz#d37869c2ff5a51794d3d166e80260937e1d51e11" + integrity sha512-2/HVfFFbmSwRTweTYVh5TYEa7Rl2+TPI2nVPps9yse6DBYPpo26XBvhnRT8O8OdJIJ0D4IQe1mZxpeFiDPZQpA== dependencies: "@backstage/catalog-model" "^1.0.0" "@backstage/core-components" "^0.9.0" @@ -6680,9 +6680,9 @@ "@types/react" "*" "@types/react-syntax-highlighter@^15.0.0": - version "15.5.1" - resolved "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.1.tgz#0c459cdd94a882df05778e93a1514430cc641043" - integrity sha512-+yD6D8y21JqLf89cRFEyRfptVMqo2ROHyAlysRvFwT28gT5gDo3KOiXHwGilHcq9y/OKTjlWK0f/hZUicrBFPQ== + version "15.5.2" + resolved "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.2.tgz#b3450851c11b8526a27edf51d00769b69d8fbf20" + integrity sha512-cJJvwU8lQv/efGSo/LmPoaOqWi/B0AG4CNKKCn7HPUL25SqiPn1Vl+fV1JiUigJv97ruTZ8mo08+b8/0zoYufA== dependencies: "@types/react" "*" @@ -7435,9 +7435,9 @@ integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ== "@yarnpkg/parsers@^3.0.0-rc.4": - version "3.0.0-rc.7" - resolved "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.7.tgz#2be47b765b36518c1148e2d4e86c919be4f2101d" - integrity sha512-MTEcH+5vmkspbMD53S6eHEfpRHer3pXOl0vCBYNTPivsxmTU14As5yoKyJvGjM/KN7/Madzz+WoDUvYNs7an+A== + version "3.0.0-rc.9" + resolved "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.9.tgz#2d284e4e0c79b1c4e410465e217fa303d98b7be3" + integrity sha512-JMBE+6OJoNN9AXBzZ72u22/t9M25K8KgUWZIjvk8CU/NsE/m946l8D7SqMhbi3ZaUfYa5QitqCqVWTTFtysGJQ== dependencies: js-yaml "^3.10.0" tslib "^1.13.0"