From 5c3525d9f6d03a52246d96a73d4bc6bf18b45998 Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Mon, 16 Sep 2024 12:29:34 -0400 Subject: [PATCH 01/14] changelog Signed-off-by: Nicholas Bucher --- changelog/v0.0.36/swagger-ui-prefill-token.yaml | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 changelog/v0.0.36/swagger-ui-prefill-token.yaml diff --git a/changelog/v0.0.36/swagger-ui-prefill-token.yaml b/changelog/v0.0.36/swagger-ui-prefill-token.yaml new file mode 100644 index 00000000..a0c2a0d2 --- /dev/null +++ b/changelog/v0.0.36/swagger-ui-prefill-token.yaml @@ -0,0 +1,6 @@ +changelog: + - type: FIX + issueLink: https://github.com/solo-io/solo-projects/issues/6859 + description: >- + Adds a configuration option to prefill the Swagger UI Authorization Bearer token + if the user is logged in. From fc7478480dc1f2c91fe693f7a7c9f079983177d5 Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Mon, 16 Sep 2024 14:23:42 -0400 Subject: [PATCH 02/14] notes Signed-off-by: Nicholas Bucher --- .../ApiSchema/swagger/SwaggerDisplay.tsx | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx b/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx index 653bd9a0..252aa0d8 100644 --- a/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx +++ b/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx @@ -1,7 +1,8 @@ -import { useEffect, useState } from "react"; +import { useContext, useEffect, useState } from "react"; import SwaggerUIConstructor from "swagger-ui"; import "swagger-ui/dist/swagger-ui.css"; import { ApiVersionSchema } from "../../../../../Apis/api-types"; +import { AuthContext } from "../../../../../Context/AuthContext"; import { swaggerConfigURL } from "../../../../../user_variables.tmplr"; import { SwaggerDisplayContainer } from "./SwaggerDisplay.style"; @@ -14,6 +15,8 @@ export function SwaggerDisplay({ apiVersionSpec: ApiVersionSchema | undefined; apiVersionId: string; }) { + const { tokensResponse } = useContext(AuthContext); + // The sanitized dom_id, where all periods are replaced with dashes. This fixes issues where Swagger tries // doing a `querySelector` which fails, due to it treating the period as a class selector, and not part of the ID itself. const [sanitizedDomId, setSanitizedDomId] = useState( @@ -27,13 +30,30 @@ export function SwaggerDisplay({ }, [apiVersionId, sanitizedDomId]); useEffect(() => { - SwaggerUIConstructor({ + const swaggerInstance = SwaggerUIConstructor({ spec: apiVersionSpec, dom_id: `#display-swagger-${sanitizedDomId}`, withCredentials: true, deepLinking: true, configUrl: swaggerConfigURL !== "" ? swaggerConfigURL : undefined, }); + // swaggerInstance.preauthorizeApiKey( + // "Authorization", + // tokensResponse?.access_token ?? "" + // ); + /** TODO + * The first arg here (authDefinitionKey), refers to the key (api_key) + * in the `apiVersionSpec.components.securitySchemes` object. + * This looks like it is user defined, but has a specific (apiKey) type + * in the object... so will need to look at this some more. + **/ + if (!!tokensResponse?.access_token) { + // TODO: This might need to be a type of oauth2 flow, a basic auth flow, or something else. + swaggerInstance.preauthorizeApiKey( + "api_key", + tokensResponse.access_token + ); + } }, [sanitizedDomId, apiVersionSpec]); return ( From 36ca5989ee0709b768007440c8637ab48c59e7d6 Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Tue, 17 Sep 2024 16:02:37 -0400 Subject: [PATCH 03/14] added swagger instance method configuration options and documented them. Signed-off-by: Nicholas Bucher --- Dockerfile | 8 ++- README.md | 3 + .../v0.0.36/swagger-ui-prefill-token.yaml | 5 +- .../ApiSchema/swagger/SwaggerDisplay.tsx | 55 ++++++++++++++----- projects/ui/src/user_variables.tmplr.ts | 53 +++++++++++++++++- 5 files changed, 105 insertions(+), 19 deletions(-) diff --git a/Dockerfile b/Dockerfile index 7dc8da41..c05e0963 100644 --- a/Dockerfile +++ b/Dockerfile @@ -46,7 +46,10 @@ ENV VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \ VITE_APIS_IMAGE_URL=$VITE_APIS_IMAGE_URL \ VITE_LOGO_IMAGE_URL=$VITE_LOGO_IMAGE_URL \ VITE_COMPANY_NAME=$VITE_COMPANY_NAME \ - VITE_CUSTOM_PAGES=$VITE_CUSTOM_PAGES + VITE_CUSTOM_PAGES=$VITE_CUSTOM_PAGES \ + VITE_SWAGGER_PREFILL_API_KEY=$VITE_SWAGGER_PREFILL_API_KEY \ + VITE_SWAGGER_PREFILL_OAUTH=$VITE_SWAGGER_PREFILL_OAUTH \ + VITE_SWAGGER_PREFILL_BASIC=$VITE_SWAGGER_PREFILL_BASIC # Copy the server files, (this includes the UI build). WORKDIR /app @@ -72,4 +75,7 @@ ENTRYPOINT VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \ VITE_LOGO_IMAGE_URL=$VITE_LOGO_IMAGE_URL \ VITE_COMPANY_NAME=$VITE_COMPANY_NAME \ VITE_CUSTOM_PAGES=$VITE_CUSTOM_PAGES \ + VITE_SWAGGER_PREFILL_API_KEY=$VITE_SWAGGER_PREFILL_API_KEY \ + VITE_SWAGGER_PREFILL_OAUTH=$VITE_SWAGGER_PREFILL_OAUTH \ + VITE_SWAGGER_PREFILL_BASIC=$VITE_SWAGGER_PREFILL_BASIC \ node ./bin/www diff --git a/README.md b/README.md index cb201135..2001b93d 100644 --- a/README.md +++ b/README.md @@ -144,6 +144,9 @@ You can add these environment variables to a `.env.local` file in the `projects/ When the website is opened, there should be two new pages in the top navigation bar. ![custom pages example](readme_assets/custom-pages-navbar.png) The custom page's `path` property must be publicly accessible and end with `.md` or `.html`. +- `VITE_SWAGGER_PREFILL_API_KEY` - Prefills the Swagger UI authorization configuration for an API key or Bearer authorization scheme with the specified values. This can be set using the following format: `'["authDefinitionKey", "apiKeyValue"]'`, where "authDefinitionKey" is the key name of the security scheme to use from the API definition. In case of OpenAPI 3.0 Bearer scheme, `apiKeyValue` must contain just the token itself without the Bearer prefix. To use the logged in user's authorization token for the `apiKeyValue`, you may use the following syntax: `'["authDefinitionKey", "{{USER_TOKEN}}"]'`. +- `VITE_SWAGGER_PREFILL_OAUTH` - Prefills the Swagger UI authorization configuration for an OAuth server. This variable should be set to a serialized JSON object that is the OAuth2 configuration. See the [Swagger UI OAuth2 documentation](https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/oauth2.md) for more information. +- `VITE_SWAGGER_PREFILL_BASIC` - Prefills the Swagger UI authorization configuration for a Basic authorization scheme. This can be set using the following format: `'["authDefinitionKey", "username", "password"]'`. #### Environment Variables for PKCE Authorization Flow diff --git a/changelog/v0.0.36/swagger-ui-prefill-token.yaml b/changelog/v0.0.36/swagger-ui-prefill-token.yaml index a0c2a0d2..4c8ca379 100644 --- a/changelog/v0.0.36/swagger-ui-prefill-token.yaml +++ b/changelog/v0.0.36/swagger-ui-prefill-token.yaml @@ -2,5 +2,6 @@ changelog: - type: FIX issueLink: https://github.com/solo-io/solo-projects/issues/6859 description: >- - Adds a configuration option to prefill the Swagger UI Authorization Bearer token - if the user is logged in. + Adds configuration options to pass through to Swagger UI's instance methods + as defined here: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md#instance-methods + Including options to fill the Authorization Bearer token if the user is logged in. diff --git a/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx b/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx index 252aa0d8..d0aa5e82 100644 --- a/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx +++ b/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx @@ -3,7 +3,12 @@ import SwaggerUIConstructor from "swagger-ui"; import "swagger-ui/dist/swagger-ui.css"; import { ApiVersionSchema } from "../../../../../Apis/api-types"; import { AuthContext } from "../../../../../Context/AuthContext"; -import { swaggerConfigURL } from "../../../../../user_variables.tmplr"; +import { + swaggerConfigURL, + swaggerPrefillApiKey, + swaggerPrefillBasic, + swaggerPrefillOauth, +} from "../../../../../user_variables.tmplr"; import { SwaggerDisplayContainer } from "./SwaggerDisplay.style"; const sanitize = (id: string) => id.replaceAll(".", "-"); @@ -37,21 +42,41 @@ export function SwaggerDisplay({ deepLinking: true, configUrl: swaggerConfigURL !== "" ? swaggerConfigURL : undefined, }); - // swaggerInstance.preauthorizeApiKey( - // "Authorization", - // tokensResponse?.access_token ?? "" - // ); - /** TODO - * The first arg here (authDefinitionKey), refers to the key (api_key) - * in the `apiVersionSpec.components.securitySchemes` object. - * This looks like it is user defined, but has a specific (apiKey) type - * in the object... so will need to look at this some more. - **/ - if (!!tokensResponse?.access_token) { - // TODO: This might need to be a type of oauth2 flow, a basic auth flow, or something else. + + // Here we pass through user supplied configuration for each of these Swagger UI instance methods: + // https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md#instance-methods + + // API KEY AUTH + if (swaggerPrefillApiKey != undefined) { + let apiKeyValue = swaggerPrefillApiKey.apiKeyValue; + if (!!tokensResponse?.access_token) { + // Try to find & replace the "{{USER_TOKEN}}" string with this user's access token. + // This is documented in our README.md. + apiKeyValue = apiKeyValue.replace( + "{{USER_TOKEN}}", + tokensResponse.access_token + ); + } swaggerInstance.preauthorizeApiKey( - "api_key", - tokensResponse.access_token + swaggerPrefillApiKey.authDefinitionKey, + apiKeyValue + ); + } + + // OAUTH + if ( + swaggerPrefillOauth != undefined && + !!Object.keys(swaggerPrefillOauth) + ) { + swaggerInstance.initOAuth(swaggerPrefillOauth); + } + + // BASIC AUTH + if (swaggerPrefillBasic != undefined) { + swaggerInstance.preauthorizeBasic( + swaggerPrefillBasic.authDefinitionKey, + swaggerPrefillBasic.username, + swaggerPrefillBasic.password ); } }, [sanitizedDomId, apiVersionSpec]); diff --git a/projects/ui/src/user_variables.tmplr.ts b/projects/ui/src/user_variables.tmplr.ts index f188ec16..ecc141ed 100644 --- a/projects/ui/src/user_variables.tmplr.ts +++ b/projects/ui/src/user_variables.tmplr.ts @@ -31,7 +31,7 @@ function templateString( } // -// Project Settings +// region Project Settings // export const companyName = templateString( "{{ tmplr.company_name }}", @@ -190,3 +190,54 @@ export const customPages = JSON.parse( ) as Array; // TODO: Check the paths and if any overlap with the dev-portal-starter. // console.log("Loaded custom pages", customPages); + +/** + * This is optional. Check the README for usage. + */ +export const swaggerPrefillApiKey = (() => { + const parsed = JSON.parse( + templateString( + "{{ tmplr.swaggerPrefillApiKey }}", + insertedEnvironmentVariables?.VITE_SWAGGER_PREFILL_API_KEY, + import.meta.env.VITE_SWAGGER_PREFILL_API_KEY, + "[]" + ) + ) as [string, string] | []; + return parsed.length === 2 + ? { + authDefinitionKey: parsed[0], + apiKeyValue: parsed[1], + } + : undefined; +})(); + +/** + * This is optional. Check the README for usage. + */ +export const swaggerPrefillOauth = templateString( + "{{ tmplr.swaggerPrefillOauth }}", + insertedEnvironmentVariables?.VITE_SWAGGER_PREFILL_OAUTH, + import.meta.env.VITE_SWAGGER_PREFILL_OAUTH, + "{}" +); + +/** + * This is optional. Check the README for usage. + */ +export const swaggerPrefillBasic = (() => { + const parsed = JSON.parse( + templateString( + "{{ tmplr.swaggerPrefillBasic }}", + insertedEnvironmentVariables?.VITE_SWAGGER_PREFILL_BASIC, + import.meta.env.VITE_SWAGGER_PREFILL_BASIC, + "[]" + ) + ) as [string, string, string] | []; + return parsed.length === 3 + ? { + authDefinitionKey: parsed[0], + username: parsed[1], + password: parsed[2], + } + : undefined; +})(); From f66df88252f47cb5de05d573aee892d51305d374 Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Tue, 17 Sep 2024 16:09:48 -0400 Subject: [PATCH 04/14] testing Signed-off-by: Nicholas Bucher --- README.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2001b93d..3ab91c26 100644 --- a/README.md +++ b/README.md @@ -125,9 +125,12 @@ All icons can be found, as the others, in the `/Assets` folder, inside `/Icons`. You can add these environment variables to a `.env.local` file in the `projects/ui` folder. All Vite environment variables need to start with `VITE_` in order for the app to be able to read them. -- `VITE_COMPANY_NAME` - This is the company name that is used for your Portal. -- `VITE_PORTAL_SERVER_URL` - This is the URL for the Gloo Platform Portal REST server. The default value is "/v1". - - Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" +| Name | Testing | +| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| `VITE_COMPANY_NAME` | This is the company name that is used for your Portal. | +| `VITE_PORTAL_SERVER_URL` | This is the URL for the Gloo Platform Portal REST server. The default value is "/v1". | +| | - Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" | + - `VITE_SWAGGER_CONFIG_URL` - This is an optional URL for your Swagger configuration file. The URL can be an absolute or relative path, and can be a JSON or YAML file. If you would like to configure the Swagger UI using the [Swagger UI configuration options](https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/), you can do this by: 1. setting this variable, in your `.env.local` file, to `"/swagger-config.yaml"`, 2. editing the `/projects/ui/public/swagger-config.yaml` file, From 62d187540bcea9095fba8f07b0e998afdfcfc15a Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Tue, 17 Sep 2024 16:10:45 -0400 Subject: [PATCH 05/14] testing Signed-off-by: Nicholas Bucher --- README.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 3ab91c26..1a998561 100644 --- a/README.md +++ b/README.md @@ -125,11 +125,10 @@ All icons can be found, as the others, in the `/Assets` folder, inside `/Icons`. You can add these environment variables to a `.env.local` file in the `projects/ui` folder. All Vite environment variables need to start with `VITE_` in order for the app to be able to read them. -| Name | Testing | -| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -| `VITE_COMPANY_NAME` | This is the company name that is used for your Portal. | -| `VITE_PORTAL_SERVER_URL` | This is the URL for the Gloo Platform Portal REST server. The default value is "/v1". | -| | - Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" | +| Name | Testing | +| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `VITE_COMPANY_NAME` | This is the company name that is used for your Portal. | +| `VITE_PORTAL_SERVER_URL` | This is the URL for the Gloo Platform Portal REST server. The default value is "/v1".
- Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" | - `VITE_SWAGGER_CONFIG_URL` - This is an optional URL for your Swagger configuration file. The URL can be an absolute or relative path, and can be a JSON or YAML file. If you would like to configure the Swagger UI using the [Swagger UI configuration options](https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/), you can do this by: 1. setting this variable, in your `.env.local` file, to `"/swagger-config.yaml"`, From 03bee9967a9931d7e2e0c058b1e4188a38bcf47f Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Tue, 17 Sep 2024 16:11:20 -0400 Subject: [PATCH 06/14] testing Signed-off-by: Nicholas Bucher --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1a998561..afe391a2 100644 --- a/README.md +++ b/README.md @@ -125,10 +125,10 @@ All icons can be found, as the others, in the `/Assets` folder, inside `/Icons`. You can add these environment variables to a `.env.local` file in the `projects/ui` folder. All Vite environment variables need to start with `VITE_` in order for the app to be able to read them. -| Name | Testing | -| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `VITE_COMPANY_NAME` | This is the company name that is used for your Portal. | -| `VITE_PORTAL_SERVER_URL` | This is the URL for the Gloo Platform Portal REST server. The default value is "/v1".
- Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" | +| Name | Testing | +| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `VITE_COMPANY_NAME` | This is the company name that is used for your Portal. | +| `VITE_PORTAL_SERVER_URL` | This is the URL for the Gloo Platform Portal REST server. The default value is "/v1".

Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" | - `VITE_SWAGGER_CONFIG_URL` - This is an optional URL for your Swagger configuration file. The URL can be an absolute or relative path, and can be a JSON or YAML file. If you would like to configure the Swagger UI using the [Swagger UI configuration options](https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/), you can do this by: 1. setting this variable, in your `.env.local` file, to `"/swagger-config.yaml"`, From 4838d56c25e91b93822e21bffbb045993d4d3e33 Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Tue, 17 Sep 2024 16:12:54 -0400 Subject: [PATCH 07/14] testing Signed-off-by: Nicholas Bucher --- README.md | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index afe391a2..4575b493 100644 --- a/README.md +++ b/README.md @@ -125,17 +125,13 @@ All icons can be found, as the others, in the `/Assets` folder, inside `/Icons`. You can add these environment variables to a `.env.local` file in the `projects/ui` folder. All Vite environment variables need to start with `VITE_` in order for the app to be able to read them. -| Name | Testing | -| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `VITE_COMPANY_NAME` | This is the company name that is used for your Portal. | -| `VITE_PORTAL_SERVER_URL` | This is the URL for the Gloo Platform Portal REST server. The default value is "/v1".

Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" | - -- `VITE_SWAGGER_CONFIG_URL` - This is an optional URL for your Swagger configuration file. The URL can be an absolute or relative path, and can be a JSON or YAML file. If you would like to configure the Swagger UI using the [Swagger UI configuration options](https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/), you can do this by: - 1. setting this variable, in your `.env.local` file, to `"/swagger-config.yaml"`, - 2. editing the `/projects/ui/public/swagger-config.yaml` file, - 3. verifying your changes (with the `make run-ui` command), - 4. rebuilding the project. -- `VITE_AUDIENCE` - This is an optional parameter if using Auth0 and need to send an audience parameter in your authorization requests. This should not be URL encoded, since it will be URL encoded when the request is sent. +| Name | Testing | +| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `VITE_COMPANY_NAME` | This is the company name that is used for your Portal. | +| `VITE_PORTAL_SERVER_URL` | This is the URL for the Gloo Platform Portal REST server. The default value is "/v1".

Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" | +| `VITE_SWAGGER_CONFIG_URL` | This is an optional URL for your Swagger configuration file. The URL can be an absolute or relative path, and can be a JSON or YAML file. If you would like to configure the Swagger UI using the [Swagger UI configuration options](https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/), you can do this by:
1. setting this variable, in your `.env.local` file, to `"/swagger-config.yaml"`,
2. editing the `/projects/ui/public/swagger-config.yaml` file,
3. verifying your changes (with the `make run-ui` command),
4. rebuilding the project. | +| `VITE_AUDIENCE` | This is an optional parameter if using Auth0 and need to send an audience parameter in your authorization requests. This should not be URL encoded, since it will be URL encoded when the request is sent. | + - `VITE_HOME_IMAGE_URL` - This is an optional parameter to set the image URL on the home page. - `VITE_APIS_IMAGE_URL` - This is an optional parameter to set the image URL on the apis page. - `VITE_LOGO_IMAGE_URL` - This is an optional parameter to set the image URL for the logo in the upper left. From e6f05468ad12103a8ca899658cba27666d9c31eb Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Tue, 17 Sep 2024 16:14:52 -0400 Subject: [PATCH 08/14] testing Signed-off-by: Nicholas Bucher --- README.md | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 4575b493..6974206c 100644 --- a/README.md +++ b/README.md @@ -125,23 +125,18 @@ All icons can be found, as the others, in the `/Assets` folder, inside `/Icons`. You can add these environment variables to a `.env.local` file in the `projects/ui` folder. All Vite environment variables need to start with `VITE_` in order for the app to be able to read them. -| Name | Testing | -| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `VITE_COMPANY_NAME` | This is the company name that is used for your Portal. | -| `VITE_PORTAL_SERVER_URL` | This is the URL for the Gloo Platform Portal REST server. The default value is "/v1".

Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" | -| `VITE_SWAGGER_CONFIG_URL` | This is an optional URL for your Swagger configuration file. The URL can be an absolute or relative path, and can be a JSON or YAML file. If you would like to configure the Swagger UI using the [Swagger UI configuration options](https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/), you can do this by:
1. setting this variable, in your `.env.local` file, to `"/swagger-config.yaml"`,
2. editing the `/projects/ui/public/swagger-config.yaml` file,
3. verifying your changes (with the `make run-ui` command),
4. rebuilding the project. | -| `VITE_AUDIENCE` | This is an optional parameter if using Auth0 and need to send an audience parameter in your authorization requests. This should not be URL encoded, since it will be URL encoded when the request is sent. | - -- `VITE_HOME_IMAGE_URL` - This is an optional parameter to set the image URL on the home page. -- `VITE_APIS_IMAGE_URL` - This is an optional parameter to set the image URL on the apis page. -- `VITE_LOGO_IMAGE_URL` - This is an optional parameter to set the image URL for the logo in the upper left. -- `VITE_CUSTOM_PAGES` - This is an optional value that describes Markdown or HTML custom pages that have been added to the `projects/ui/src/public` folder. In order to test this feature out out with the provided examples, set your `VITE_CUSTOM_PAGES` value to: - ``` - '[{"title": "Markdown Example", "path": "/pages/markdown-example.md"}, {"title": "HTML Example", "path": "/pages/html-example.html"}]' - ``` - When the website is opened, there should be two new pages in the top navigation bar. - ![custom pages example](readme_assets/custom-pages-navbar.png) - The custom page's `path` property must be publicly accessible and end with `.md` or `.html`. +| Name | Testing | +| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `VITE_COMPANY_NAME` | This is the company name that is used for your Portal. | +| `VITE_PORTAL_SERVER_URL` | This is the URL for the Gloo Platform Portal REST server. The default value is "/v1".

Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" | +| `VITE_SWAGGER_CONFIG_URL` | This is an optional URL for your Swagger configuration file. The URL can be an absolute or relative path, and can be a JSON or YAML file. If you would like to configure the Swagger UI using the [Swagger UI configuration options](https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/), you can do this by:

1. setting this variable, in your `.env.local` file, to `"/swagger-config.yaml"`,
2. editing the `/projects/ui/public/swagger-config.yaml` file,
3. verifying your changes (with the `make run-ui` command),
4. rebuilding the project. | +| `VITE_AUDIENCE` | This is an optional parameter if using Auth0 and need to send an audience parameter in your authorization requests. This should not be URL encoded, since it will be URL encoded when the request is sent. | + +| `VITE_HOME_IMAGE_URL` | This is an optional parameter to set the image URL on the home page. +| `VITE_APIS_IMAGE_URL` | This is an optional parameter to set the image URL on the apis page. +| `VITE_LOGO_IMAGE_URL` | This is an optional parameter to set the image URL for the logo in the upper left. +| `VITE_CUSTOM_PAGES` | This is an optional value that describes Markdown or HTML custom pages that have been added to the `projects/ui/src/public` folder. In order to test this feature out out with the provided examples, set your `VITE_CUSTOM_PAGES` value to:'[{"title": "Markdown Example", "path": "/pages/markdown-example.md"}, {"title": "HTML Example", "path": "/pages/html-example.html"}]'
When the website is opened, there should be two new pages in the top navigation bar.
![custom pages example](readme_assets/custom-pages-navbar.png)
The custom page's `path` property must be publicly accessible and end with `.md` or `.html`.| + - `VITE_SWAGGER_PREFILL_API_KEY` - Prefills the Swagger UI authorization configuration for an API key or Bearer authorization scheme with the specified values. This can be set using the following format: `'["authDefinitionKey", "apiKeyValue"]'`, where "authDefinitionKey" is the key name of the security scheme to use from the API definition. In case of OpenAPI 3.0 Bearer scheme, `apiKeyValue` must contain just the token itself without the Bearer prefix. To use the logged in user's authorization token for the `apiKeyValue`, you may use the following syntax: `'["authDefinitionKey", "{{USER_TOKEN}}"]'`. - `VITE_SWAGGER_PREFILL_OAUTH` - Prefills the Swagger UI authorization configuration for an OAuth server. This variable should be set to a serialized JSON object that is the OAuth2 configuration. See the [Swagger UI OAuth2 documentation](https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/oauth2.md) for more information. - `VITE_SWAGGER_PREFILL_BASIC` - Prefills the Swagger UI authorization configuration for a Basic authorization scheme. This can be set using the following format: `'["authDefinitionKey", "username", "password"]'`. From ac6caa40d60d425863ce34115f3863ec63d07eab Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Tue, 17 Sep 2024 16:16:16 -0400 Subject: [PATCH 09/14] reverted readme table Signed-off-by: Nicholas Bucher --- README.md | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 6974206c..2001b93d 100644 --- a/README.md +++ b/README.md @@ -125,18 +125,25 @@ All icons can be found, as the others, in the `/Assets` folder, inside `/Icons`. You can add these environment variables to a `.env.local` file in the `projects/ui` folder. All Vite environment variables need to start with `VITE_` in order for the app to be able to read them. -| Name | Testing | -| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `VITE_COMPANY_NAME` | This is the company name that is used for your Portal. | -| `VITE_PORTAL_SERVER_URL` | This is the URL for the Gloo Platform Portal REST server. The default value is "/v1".

Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" | -| `VITE_SWAGGER_CONFIG_URL` | This is an optional URL for your Swagger configuration file. The URL can be an absolute or relative path, and can be a JSON or YAML file. If you would like to configure the Swagger UI using the [Swagger UI configuration options](https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/), you can do this by:

1. setting this variable, in your `.env.local` file, to `"/swagger-config.yaml"`,
2. editing the `/projects/ui/public/swagger-config.yaml` file,
3. verifying your changes (with the `make run-ui` command),
4. rebuilding the project. | -| `VITE_AUDIENCE` | This is an optional parameter if using Auth0 and need to send an audience parameter in your authorization requests. This should not be URL encoded, since it will be URL encoded when the request is sent. | - -| `VITE_HOME_IMAGE_URL` | This is an optional parameter to set the image URL on the home page. -| `VITE_APIS_IMAGE_URL` | This is an optional parameter to set the image URL on the apis page. -| `VITE_LOGO_IMAGE_URL` | This is an optional parameter to set the image URL for the logo in the upper left. -| `VITE_CUSTOM_PAGES` | This is an optional value that describes Markdown or HTML custom pages that have been added to the `projects/ui/src/public` folder. In order to test this feature out out with the provided examples, set your `VITE_CUSTOM_PAGES` value to:'[{"title": "Markdown Example", "path": "/pages/markdown-example.md"}, {"title": "HTML Example", "path": "/pages/html-example.html"}]'
When the website is opened, there should be two new pages in the top navigation bar.
![custom pages example](readme_assets/custom-pages-navbar.png)
The custom page's `path` property must be publicly accessible and end with `.md` or `.html`.| - +- `VITE_COMPANY_NAME` - This is the company name that is used for your Portal. +- `VITE_PORTAL_SERVER_URL` - This is the URL for the Gloo Platform Portal REST server. The default value is "/v1". + - Note: If using the example `RouteTable` for the "oidcAuthorizationCode" `ExtAuthPolicy` configuration, this should be set to "/portal-server/v1" +- `VITE_SWAGGER_CONFIG_URL` - This is an optional URL for your Swagger configuration file. The URL can be an absolute or relative path, and can be a JSON or YAML file. If you would like to configure the Swagger UI using the [Swagger UI configuration options](https://swagger.io/docs/open-source-tools/swagger-ui/usage/configuration/), you can do this by: + 1. setting this variable, in your `.env.local` file, to `"/swagger-config.yaml"`, + 2. editing the `/projects/ui/public/swagger-config.yaml` file, + 3. verifying your changes (with the `make run-ui` command), + 4. rebuilding the project. +- `VITE_AUDIENCE` - This is an optional parameter if using Auth0 and need to send an audience parameter in your authorization requests. This should not be URL encoded, since it will be URL encoded when the request is sent. +- `VITE_HOME_IMAGE_URL` - This is an optional parameter to set the image URL on the home page. +- `VITE_APIS_IMAGE_URL` - This is an optional parameter to set the image URL on the apis page. +- `VITE_LOGO_IMAGE_URL` - This is an optional parameter to set the image URL for the logo in the upper left. +- `VITE_CUSTOM_PAGES` - This is an optional value that describes Markdown or HTML custom pages that have been added to the `projects/ui/src/public` folder. In order to test this feature out out with the provided examples, set your `VITE_CUSTOM_PAGES` value to: + ``` + '[{"title": "Markdown Example", "path": "/pages/markdown-example.md"}, {"title": "HTML Example", "path": "/pages/html-example.html"}]' + ``` + When the website is opened, there should be two new pages in the top navigation bar. + ![custom pages example](readme_assets/custom-pages-navbar.png) + The custom page's `path` property must be publicly accessible and end with `.md` or `.html`. - `VITE_SWAGGER_PREFILL_API_KEY` - Prefills the Swagger UI authorization configuration for an API key or Bearer authorization scheme with the specified values. This can be set using the following format: `'["authDefinitionKey", "apiKeyValue"]'`, where "authDefinitionKey" is the key name of the security scheme to use from the API definition. In case of OpenAPI 3.0 Bearer scheme, `apiKeyValue` must contain just the token itself without the Bearer prefix. To use the logged in user's authorization token for the `apiKeyValue`, you may use the following syntax: `'["authDefinitionKey", "{{USER_TOKEN}}"]'`. - `VITE_SWAGGER_PREFILL_OAUTH` - Prefills the Swagger UI authorization configuration for an OAuth server. This variable should be set to a serialized JSON object that is the OAuth2 configuration. See the [Swagger UI OAuth2 documentation](https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/oauth2.md) for more information. - `VITE_SWAGGER_PREFILL_BASIC` - Prefills the Swagger UI authorization configuration for a Basic authorization scheme. This can be set using the following format: `'["authDefinitionKey", "username", "password"]'`. From 0354b8f0e7c03e13475928c03ee523fb4258e3ea Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Tue, 17 Sep 2024 16:19:14 -0400 Subject: [PATCH 10/14] update Signed-off-by: Nicholas Bucher --- .../ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx b/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx index d0aa5e82..5a042c01 100644 --- a/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx +++ b/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx @@ -51,7 +51,7 @@ export function SwaggerDisplay({ let apiKeyValue = swaggerPrefillApiKey.apiKeyValue; if (!!tokensResponse?.access_token) { // Try to find & replace the "{{USER_TOKEN}}" string with this user's access token. - // This is documented in our README.md. + // This is documented in the README.md. apiKeyValue = apiKeyValue.replace( "{{USER_TOKEN}}", tokensResponse.access_token From 7ec958e615ba9c31ccddf9640702f358e61ac5ad Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Tue, 17 Sep 2024 16:19:31 -0400 Subject: [PATCH 11/14] update Signed-off-by: Nicholas Bucher --- projects/ui/src/user_variables.tmplr.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/ui/src/user_variables.tmplr.ts b/projects/ui/src/user_variables.tmplr.ts index ecc141ed..5abc9c1c 100644 --- a/projects/ui/src/user_variables.tmplr.ts +++ b/projects/ui/src/user_variables.tmplr.ts @@ -31,7 +31,7 @@ function templateString( } // -// region Project Settings +// Project Settings // export const companyName = templateString( "{{ tmplr.company_name }}", From 0f31e956e75be89826277ac447e03a8ca35acabe Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Tue, 17 Sep 2024 16:21:58 -0400 Subject: [PATCH 12/14] makefile updates Signed-off-by: Nicholas Bucher --- Makefile | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/Makefile b/Makefile index eae3def5..bd89da9b 100644 --- a/Makefile +++ b/Makefile @@ -106,11 +106,32 @@ else ifneq ($(COMPANY_NAME),) endif # # CUSTOM PAGES -ifneq ($(VITE_CUSTOM PAGES),) - UI_ARGS += VITE_CUSTOM PAGES=$(VITE_CUSTOM_PAGES) +ifneq ($(VITE_CUSTOM_PAGES),) + UI_ARGS += VITE_CUSTOM_PAGES=$(VITE_CUSTOM_PAGES) else ifneq ($(CUSTOM_PAGES),) UI_ARGS += VITE_CUSTOM_PAGES=$(CUSTOM_PAGES) endif +# +# SWAGGER_PREFILL_API_KEY +ifneq ($(VITE_SWAGGER_PREFILL_API_KEY),) + UI_ARGS += VITE_SWAGGER_PREFILL_API_KEY=$(VITE_SWAGGER_PREFILL_API_KEY) +else ifneq ($(SWAGGER_PREFILL_API_KEY),) + UI_ARGS += VITE_SWAGGER_PREFILL_API_KEY=$(SWAGGER_PREFILL_API_KEY) +endif +# +# SWAGGER_PREFILL_OAUTH +ifneq ($(VITE_SWAGGER_PREFILL_OAUTH),) + UI_ARGS += VITE_SWAGGER_PREFILL_OAUTH=$(VITE_SWAGGER_PREFILL_OAUTH) +else ifneq ($(SWAGGER_PREFILL_OAUTH),) + UI_ARGS += VITE_SWAGGER_PREFILL_OAUTH=$(SWAGGER_PREFILL_OAUTH) +endif +# +# SWAGGER_PREFILL_BASIC +ifneq ($(VITE_SWAGGER_PREFILL_BASIC),) + UI_ARGS += VITE_SWAGGER_PREFILL_BASIC=$(VITE_SWAGGER_PREFILL_BASIC) +else ifneq ($(SWAGGER_PREFILL_BASIC),) + UI_ARGS += VITE_SWAGGER_PREFILL_BASIC=$(SWAGGER_PREFILL_BASIC) +endif From 1fbac244b9c08810da8457f319d4b02e6e2be774 Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Tue, 17 Sep 2024 16:25:19 -0400 Subject: [PATCH 13/14] naming fix Signed-off-by: Nicholas Bucher --- projects/ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/ui/package.json b/projects/ui/package.json index dbed14df..b8f97f89 100644 --- a/projects/ui/package.json +++ b/projects/ui/package.json @@ -1,5 +1,5 @@ { - "name": "gloo-platform-portal-ui", + "name": "dev-portal-starter", "private": true, "version": "0.0.13", "type": "module", From 46a7b7c9bc31227cd6498a9cf2e4482d4d938858 Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Wed, 18 Sep 2024 14:54:29 -0400 Subject: [PATCH 14/14] readme update and oauth fix Signed-off-by: Nicholas Bucher --- README.md | 4 ++++ .../shared/ApiSchema/swagger/SwaggerDisplay.tsx | 9 +++------ projects/ui/src/user_variables.tmplr.ts | 17 +++++++++++------ 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 2001b93d..3244cf89 100644 --- a/README.md +++ b/README.md @@ -146,6 +146,10 @@ You can add these environment variables to a `.env.local` file in the `projects/ The custom page's `path` property must be publicly accessible and end with `.md` or `.html`. - `VITE_SWAGGER_PREFILL_API_KEY` - Prefills the Swagger UI authorization configuration for an API key or Bearer authorization scheme with the specified values. This can be set using the following format: `'["authDefinitionKey", "apiKeyValue"]'`, where "authDefinitionKey" is the key name of the security scheme to use from the API definition. In case of OpenAPI 3.0 Bearer scheme, `apiKeyValue` must contain just the token itself without the Bearer prefix. To use the logged in user's authorization token for the `apiKeyValue`, you may use the following syntax: `'["authDefinitionKey", "{{USER_TOKEN}}"]'`. - `VITE_SWAGGER_PREFILL_OAUTH` - Prefills the Swagger UI authorization configuration for an OAuth server. This variable should be set to a serialized JSON object that is the OAuth2 configuration. See the [Swagger UI OAuth2 documentation](https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/oauth2.md) for more information. + - Converting the example object from the Swagger UI documentation to a string would result in the following: + ``` + VITE_SWAGGER_PREFILL_OAUTH='{"clientId": "your-client-id","clientSecret": "your-client-secret-if-required","realm": "your-realms","appName": "your-app-name","scopeSeparator": " ","scopes": "openid profile","additionalQueryStringParams": {"test": "hello"},"useBasicAuthenticationWithAccessCodeGrant": true,"usePkceWithAuthorizationCodeGrant": true}' + ``` - `VITE_SWAGGER_PREFILL_BASIC` - Prefills the Swagger UI authorization configuration for a Basic authorization scheme. This can be set using the following format: `'["authDefinitionKey", "username", "password"]'`. #### Environment Variables for PKCE Authorization Flow diff --git a/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx b/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx index 5a042c01..374e6af7 100644 --- a/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx +++ b/projects/ui/src/Components/ApiDetails/shared/ApiSchema/swagger/SwaggerDisplay.tsx @@ -47,7 +47,7 @@ export function SwaggerDisplay({ // https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md#instance-methods // API KEY AUTH - if (swaggerPrefillApiKey != undefined) { + if (swaggerPrefillApiKey !== undefined) { let apiKeyValue = swaggerPrefillApiKey.apiKeyValue; if (!!tokensResponse?.access_token) { // Try to find & replace the "{{USER_TOKEN}}" string with this user's access token. @@ -64,15 +64,12 @@ export function SwaggerDisplay({ } // OAUTH - if ( - swaggerPrefillOauth != undefined && - !!Object.keys(swaggerPrefillOauth) - ) { + if (swaggerPrefillOauth !== undefined) { swaggerInstance.initOAuth(swaggerPrefillOauth); } // BASIC AUTH - if (swaggerPrefillBasic != undefined) { + if (swaggerPrefillBasic !== undefined) { swaggerInstance.preauthorizeBasic( swaggerPrefillBasic.authDefinitionKey, swaggerPrefillBasic.username, diff --git a/projects/ui/src/user_variables.tmplr.ts b/projects/ui/src/user_variables.tmplr.ts index 5abc9c1c..e771d198 100644 --- a/projects/ui/src/user_variables.tmplr.ts +++ b/projects/ui/src/user_variables.tmplr.ts @@ -214,12 +214,17 @@ export const swaggerPrefillApiKey = (() => { /** * This is optional. Check the README for usage. */ -export const swaggerPrefillOauth = templateString( - "{{ tmplr.swaggerPrefillOauth }}", - insertedEnvironmentVariables?.VITE_SWAGGER_PREFILL_OAUTH, - import.meta.env.VITE_SWAGGER_PREFILL_OAUTH, - "{}" -); +export const swaggerPrefillOauth = (() => { + const parsed = JSON.parse( + templateString( + "{{ tmplr.swaggerPrefillOauth }}", + insertedEnvironmentVariables?.VITE_SWAGGER_PREFILL_OAUTH, + import.meta.env.VITE_SWAGGER_PREFILL_OAUTH, + "{}" + ) + ); + return Object.keys(parsed).length > 0 ? parsed : undefined; +})(); /** * This is optional. Check the README for usage.