From 8448b53dd6f5366ce27337e3a473b08b1d23b89d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Mon, 19 Sep 2022 15:21:10 +0200 Subject: [PATCH] move the settings storage to the user settings frontend MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- .changeset/healthy-oranges-fly.md | 7 ++-- .changeset/six-apricots-add.md | 7 ++++ .changeset/strange-geckos-know.md | 5 +++ packages/core-app-api/api-report.md | 24 -------------- packages/core-app-api/package.json | 1 - .../apis/implementations/StorageApi/index.ts | 1 - plugins/user-settings-backend/README.md | 2 +- plugins/user-settings/README.md | 12 ++++--- plugins/user-settings/api-report.md | 32 +++++++++++++++++++ plugins/user-settings/package.json | 7 ++-- .../StorageApi/UserSettingsStorage.test.ts | 0 .../apis}/StorageApi/UserSettingsStorage.ts | 2 +- .../src/apis/StorageApi/index.ts | 17 ++++++++++ plugins/user-settings/src/apis/index.ts | 17 ++++++++++ plugins/user-settings/src/index.ts | 3 +- yarn.lock | 4 ++- 16 files changed, 99 insertions(+), 42 deletions(-) create mode 100644 .changeset/six-apricots-add.md create mode 100644 .changeset/strange-geckos-know.md rename {packages/core-app-api/src/apis/implementations => plugins/user-settings/src/apis}/StorageApi/UserSettingsStorage.test.ts (100%) rename {packages/core-app-api/src/apis/implementations => plugins/user-settings/src/apis}/StorageApi/UserSettingsStorage.ts (99%) create mode 100644 plugins/user-settings/src/apis/StorageApi/index.ts create mode 100644 plugins/user-settings/src/apis/index.ts diff --git a/.changeset/healthy-oranges-fly.md b/.changeset/healthy-oranges-fly.md index c6b6f6ff93..a10c56f4d0 100644 --- a/.changeset/healthy-oranges-fly.md +++ b/.changeset/healthy-oranges-fly.md @@ -1,9 +1,6 @@ --- -'@backstage/core-app-api': minor '@backstage/plugin-user-settings-backend': minor --- -Add new plugin `@backstage/user-settings-backend` to store user related settings -in the database. Additionally adding a `UserSettingsStorage` implementation of -the `StorageApi` to easily use the new plugin as drop-in replacement for the -`WebStorage`. +Added new plugin `@backstage/plugin-user-settings-backend` to store user related +settings in the database. diff --git a/.changeset/six-apricots-add.md b/.changeset/six-apricots-add.md new file mode 100644 index 0000000000..95ec68b1d5 --- /dev/null +++ b/.changeset/six-apricots-add.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-user-settings': patch +--- + +Added a `UserSettingsStorage` implementation of the `StorageApi` for use as +drop-in replacement for the `WebStorage`, in conjunction with the newly created +`@backstage/plugin-user-settings-backend`. diff --git a/.changeset/strange-geckos-know.md b/.changeset/strange-geckos-know.md new file mode 100644 index 0000000000..b14762d3e5 --- /dev/null +++ b/.changeset/strange-geckos-know.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-app-api': patch +--- + +Clarify that the `WebStorage` observable returns `JsonValue` items. diff --git a/packages/core-app-api/api-report.md b/packages/core-app-api/api-report.md index 39e5388d68..4d1db6fde1 100644 --- a/packages/core-app-api/api-report.md +++ b/packages/core-app-api/api-report.md @@ -543,30 +543,6 @@ export class UrlPatternDiscovery implements DiscoveryApi { getBaseUrl(pluginId: string): Promise; } -// @public -export class UserSettingsStorage implements StorageApi { - // (undocumented) - static create(options: { - fetchApi: FetchApi; - discoveryApi: DiscoveryApi; - errorApi: ErrorApi; - identityApi: IdentityApi; - namespace?: string; - }): UserSettingsStorage; - // (undocumented) - forBucket(name: string): StorageApi; - // (undocumented) - observe$( - key: string, - ): Observable>; - // (undocumented) - remove(key: string): Promise; - // (undocumented) - set(key: string, data: T): Promise; - // (undocumented) - snapshot(key: string): StorageValueSnapshot; -} - // @public export class WebStorage implements StorageApi { constructor(namespace: string, errorApi: ErrorApi); diff --git a/packages/core-app-api/package.json b/packages/core-app-api/package.json index b6e2f64889..8532997477 100644 --- a/packages/core-app-api/package.json +++ b/packages/core-app-api/package.json @@ -34,7 +34,6 @@ "dependencies": { "@backstage/config": "^1.0.2-next.0", "@backstage/core-plugin-api": "^1.0.6-next.3", - "@backstage/errors": "^1.1.1-next.0", "@backstage/types": "^1.0.0", "@backstage/version-bridge": "^1.0.1", "@types/prop-types": "^15.7.3", diff --git a/packages/core-app-api/src/apis/implementations/StorageApi/index.ts b/packages/core-app-api/src/apis/implementations/StorageApi/index.ts index e4162d120d..2f941381fd 100644 --- a/packages/core-app-api/src/apis/implementations/StorageApi/index.ts +++ b/packages/core-app-api/src/apis/implementations/StorageApi/index.ts @@ -15,4 +15,3 @@ */ export { WebStorage } from './WebStorage'; -export { UserSettingsStorage } from './UserSettingsStorage'; diff --git a/plugins/user-settings-backend/README.md b/plugins/user-settings-backend/README.md index 45e06731c9..d12ee0aa89 100644 --- a/plugins/user-settings-backend/README.md +++ b/plugins/user-settings-backend/README.md @@ -57,7 +57,7 @@ To make use of the user settings backend, replace the `WebStorage` with the + identityApi, + storageApiRef, } from '@backstage/core-plugin-api'; -+import { UserSettingsStorage } from '@backstage/core-app-api'; ++import { UserSettingsStorage } from '@backstage/plugin-user-settings'; export const apis: AnyApiFactory[] = [ + createApiFactory({ diff --git a/plugins/user-settings/README.md b/plugins/user-settings/README.md index 13cfe720c8..abe66120fe 100644 --- a/plugins/user-settings/README.md +++ b/plugins/user-settings/README.md @@ -2,15 +2,17 @@ Welcome to the user-settings plugin! -_This plugin was created through the Backstage CLI_ - ## About the plugin -This plugin provides two components, `` is intended to be used within the [``](https://backstage.io/storybook/?path=/story/sidebar--sample-sidebar) and displays the signed-in users profile picture and name. +This plugin provides two components, `` is intended to be used within the [``](https://backstage.io/storybook/?path=/story/sidebar--sample-sidebar) and displays the signed-in users profile picture and name. The second component is a settings page where the user can control different settings across the App. -The second component is a settings page where the user can control different settings across the App. +It also provides a `UserSettingsStorage` implementation of the `StorageApi`, to +be used in the frontend as a persistent alternative to the builtin `WebStorage`. +Please see [the backend +README](https://github.com/backstage/backstage/tree/master/plugins/user-settings-backend) +for installation instructions. -## Usage +## Components Usage Add the item to the Sidebar: diff --git a/plugins/user-settings/api-report.md b/plugins/user-settings/api-report.md index bc5c3a9c70..76eaed940e 100644 --- a/plugins/user-settings/api-report.md +++ b/plugins/user-settings/api-report.md @@ -8,11 +8,19 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstagePlugin } from '@backstage/core-plugin-api'; import { BackstageUserIdentity } from '@backstage/core-plugin-api'; +import { DiscoveryApi } from '@backstage/core-plugin-api'; +import { ErrorApi } from '@backstage/core-plugin-api'; +import { FetchApi } from '@backstage/core-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; +import { IdentityApi } from '@backstage/core-plugin-api'; +import { JsonValue } from '@backstage/types'; +import { Observable } from '@backstage/types'; import { ProfileInfo } from '@backstage/core-plugin-api'; import { PropsWithChildren } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { SessionApi } from '@backstage/core-plugin-api'; +import { StorageApi } from '@backstage/core-plugin-api'; +import { StorageValueSnapshot } from '@backstage/core-plugin-api'; // @public (undocumented) export const DefaultProviderSettings: (props: { @@ -83,6 +91,30 @@ export const UserSettingsSignInAvatar: (props: { size?: number; }) => JSX.Element; +// @public +export class UserSettingsStorage implements StorageApi { + // (undocumented) + static create(options: { + fetchApi: FetchApi; + discoveryApi: DiscoveryApi; + errorApi: ErrorApi; + identityApi: IdentityApi; + namespace?: string; + }): UserSettingsStorage; + // (undocumented) + forBucket(name: string): StorageApi; + // (undocumented) + observe$( + key: string, + ): Observable>; + // (undocumented) + remove(key: string): Promise; + // (undocumented) + set(key: string, data: T): Promise; + // (undocumented) + snapshot(key: string): StorageValueSnapshot; +} + // @public export const UserSettingsTab: (props: UserSettingsTabProps) => JSX.Element; diff --git a/plugins/user-settings/package.json b/plugins/user-settings/package.json index f99c0d206e..b4afc6766b 100644 --- a/plugins/user-settings/package.json +++ b/plugins/user-settings/package.json @@ -32,14 +32,18 @@ "clean": "backstage-cli package clean" }, "dependencies": { + "@backstage/core-app-api": "^1.1.0-next.3", "@backstage/core-components": "^0.11.1-next.3", "@backstage/core-plugin-api": "^1.0.6-next.3", + "@backstage/errors": "^1.1.1-next.0", "@backstage/theme": "^0.2.16", + "@backstage/types": "^1.0.0", "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.57", "@types/react": "^16.13.1 || ^17.0.0", - "react-use": "^17.2.4" + "react-use": "^17.2.4", + "zen-observable": "^0.8.15" }, "peerDependencies": { "react": "^16.13.1 || ^17.0.0", @@ -47,7 +51,6 @@ }, "devDependencies": { "@backstage/cli": "^0.19.0-next.3", - "@backstage/core-app-api": "^1.1.0-next.3", "@backstage/dev-utils": "^1.0.6-next.2", "@backstage/test-utils": "^1.2.0-next.3", "@testing-library/jest-dom": "^5.10.1", diff --git a/packages/core-app-api/src/apis/implementations/StorageApi/UserSettingsStorage.test.ts b/plugins/user-settings/src/apis/StorageApi/UserSettingsStorage.test.ts similarity index 100% rename from packages/core-app-api/src/apis/implementations/StorageApi/UserSettingsStorage.test.ts rename to plugins/user-settings/src/apis/StorageApi/UserSettingsStorage.test.ts diff --git a/packages/core-app-api/src/apis/implementations/StorageApi/UserSettingsStorage.ts b/plugins/user-settings/src/apis/StorageApi/UserSettingsStorage.ts similarity index 99% rename from packages/core-app-api/src/apis/implementations/StorageApi/UserSettingsStorage.ts rename to plugins/user-settings/src/apis/StorageApi/UserSettingsStorage.ts index b595c524cf..8905b4aeea 100644 --- a/packages/core-app-api/src/apis/implementations/StorageApi/UserSettingsStorage.ts +++ b/plugins/user-settings/src/apis/StorageApi/UserSettingsStorage.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +import { WebStorage } from '@backstage/core-app-api'; import { DiscoveryApi, ErrorApi, @@ -25,7 +26,6 @@ import { import { ResponseError } from '@backstage/errors'; import { JsonValue, Observable } from '@backstage/types'; import ObservableImpl from 'zen-observable'; -import { WebStorage } from './WebStorage'; const JSON_HEADERS = { 'Content-Type': 'application/json; charset=utf-8', diff --git a/plugins/user-settings/src/apis/StorageApi/index.ts b/plugins/user-settings/src/apis/StorageApi/index.ts new file mode 100644 index 0000000000..9127cdfef4 --- /dev/null +++ b/plugins/user-settings/src/apis/StorageApi/index.ts @@ -0,0 +1,17 @@ +/* + * 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 { UserSettingsStorage } from './UserSettingsStorage'; diff --git a/plugins/user-settings/src/apis/index.ts b/plugins/user-settings/src/apis/index.ts new file mode 100644 index 0000000000..1598430773 --- /dev/null +++ b/plugins/user-settings/src/apis/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 * from './StorageApi'; diff --git a/plugins/user-settings/src/index.ts b/plugins/user-settings/src/index.ts index 0654b7fced..bc878ecbb3 100644 --- a/plugins/user-settings/src/index.ts +++ b/plugins/user-settings/src/index.ts @@ -15,11 +15,12 @@ */ /** - * A Backstage plugin that provides a settings page + * A Backstage plugin that provides various per-user settings functionality. * * @packageDocumentation */ +export * from './apis'; export { userSettingsPlugin, userSettingsPlugin as plugin, diff --git a/yarn.lock b/yarn.lock index a9f5a553b9..69e6cb4267 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3291,7 +3291,6 @@ __metadata: "@backstage/cli": ^0.19.0-next.3 "@backstage/config": ^1.0.2-next.0 "@backstage/core-plugin-api": ^1.0.6-next.3 - "@backstage/errors": ^1.1.1-next.0 "@backstage/test-utils": ^1.2.0-next.3 "@backstage/types": ^1.0.0 "@backstage/version-bridge": ^1.0.1 @@ -7342,8 +7341,10 @@ __metadata: "@backstage/core-components": ^0.11.1-next.3 "@backstage/core-plugin-api": ^1.0.6-next.3 "@backstage/dev-utils": ^1.0.6-next.2 + "@backstage/errors": ^1.1.1-next.0 "@backstage/test-utils": ^1.2.0-next.3 "@backstage/theme": ^0.2.16 + "@backstage/types": ^1.0.0 "@material-ui/core": ^4.12.2 "@material-ui/icons": ^4.9.1 "@material-ui/lab": 4.0.0-alpha.57 @@ -7355,6 +7356,7 @@ __metadata: cross-fetch: ^3.1.5 msw: ^0.47.0 react-use: ^17.2.4 + zen-observable: ^0.8.15 peerDependencies: react: ^16.13.1 || ^17.0.0 react-router: 6.0.0-beta.0 || ^6.3.0