Merge pull request #114 from solo-io/gg-portal-1.18-features

GG portal 1.18 features

.nvmrc

@@ -1 +1 @@
-v18.16.0
+v18.17.0

Dockerfile

@@ -4,7 +4,7 @@
 #             #
 ###############
 
-FROM node:18.16.0 AS build_stage
+FROM node:18.17.0 AS build_stage
 
 # Install global dependencies.
 RUN apt-get update && apt-get install -y build-essential
@@ -30,7 +30,7 @@ RUN START_SERVER=false sh ./scripts/startup.sh
 #             #
 ###############
 
-FROM node:18.16.0 AS serve_stage
+FROM node:18.17.0 AS serve_stage
 
 ENV VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \
     VITE_CLIENT_ID=$VITE_CLIENT_ID \
@@ -43,9 +43,14 @@ ENV VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \
     VITE_SWAGGER_CONFIG_URL=$VITE_SWAGGER_CONFIG_URL \
     VITE_AUDIENCE=$VITE_AUDIENCE \
     VITE_HOME_IMAGE_URL=$VITE_HOME_IMAGE_URL \
-    VITE_APIS_IMAGE_URL=$VITE_APIS_IMAGE_URL \
+    VITE_BANNER_IMAGE_URL=$VITE_BANNER_IMAGE_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 \
+    VITE_DEFAULT_APP_AUTH=$VITE_DEFAULT_APP_AUTH \
     VITE_API_PAGE_RELOAD=$VITE_API_PAGE_RELOAD
 
 # Copy the server files, (this includes the UI build).
@@ -68,8 +73,13 @@ ENTRYPOINT VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \
     VITE_SWAGGER_CONFIG_URL=$VITE_SWAGGER_CONFIG_URL \
     VITE_AUDIENCE=$VITE_AUDIENCE \
     VITE_HOME_IMAGE_URL=$VITE_HOME_IMAGE_URL \
-    VITE_APIS_IMAGE_URL=$VITE_APIS_IMAGE_URL \
+    VITE_BANNER_IMAGE_URL=$VITE_BANNER_IMAGE_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 \
+    VITE_DEFAULT_APP_AUTH=$VITE_DEFAULT_APP_AUTH \
     VITE_API_PAGE_RELOAD=$VITE_API_PAGE_RELOAD \
     node ./bin/www

Makefile

@@ -84,11 +84,11 @@ else ifneq ($(HOME_IMAGE_URL),)
 	UI_ARGS += VITE_HOME_IMAGE_URL=$(HOME_IMAGE_URL)
 endif
 #
-# APIS_IMAGE_URL
-ifneq ($(VITE_APIS_IMAGE_URL),)
-	UI_ARGS += VITE_APIS_IMAGE_URL=$(VITE_APIS_IMAGE_URL)
-else ifneq ($(APIS_IMAGE_URL),)
-	UI_ARGS += VITE_APIS_IMAGE_URL=$(APIS_IMAGE_URL)
+# BANNER_IMAGE_URL
+ifneq ($(VITE_BANNER_IMAGE_URL),)
+	UI_ARGS += VITE_BANNER_IMAGE_URL=$(VITE_BANNER_IMAGE_URL)
+else ifneq ($(BANNER_IMAGE_URL),)
+	UI_ARGS += VITE_BANNER_IMAGE_URL=$(BANNER_IMAGE_URL)
 endif
 #
 # LOGO_IMAGE_URL
@@ -105,6 +105,41 @@ else ifneq ($(COMPANY_NAME),)
 	UI_ARGS += VITE_COMPANY_NAME=$(COMPANY_NAME)
 endif
 #
+# 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
+#
+# DEFAULT_APP_AUTH
+ifneq ($(VITE_DEFAULT_APP_AUTH),)
+	UI_ARGS += VITE_DEFAULT_APP_AUTH=$(VITE_DEFAULT_APP_AUTH)
+else ifneq ($(DEFAULT_APP_AUTH),)
+	UI_ARGS += VITE_DEFAULT_APP_AUTH=$(DEFAULT_APP_AUTH)
+endif
+
 # API_PAGE_RELOAD
 ifneq ($(VITE_API_PAGE_RELOAD),)
 	UI_ARGS += VITE_API_PAGE_RELOAD=$(VITE_API_PAGE_RELOAD)

README.md

@@ -23,7 +23,7 @@ This is an example Solo.io Gloo Platform Dev Portal frontend app, built with [Vi
 2. Build your image.
 
    ```sh
-   docker build -t "your-image-name"
+   docker build -t "your-image-name" .
    ```
 
 3. Push your image:
@@ -135,9 +135,24 @@ You can add these environment variables to a `.env.local` file in the `projects/
   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_BANNER_IMAGE_URL` - This is an optional parameter to set the banner image URL for the teams, apps, subscriptions, and API's pages.
 - `VITE_LOGO_IMAGE_URL` - This is an optional parameter to set the image URL for the logo in the upper left.
-- `VITE_API_PAGE_RELOAD` - This is an optional parameter that ensures the API page reloads when navigating to it. This is useful when gating the API page behind an auth flow.
+- `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.
+  - 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"]'`.
+- `VITE_DEFAULT_APP_AUTH` - This controls whether the OAuth and/or API Key sections are shown on the App details page. Can be set to `"OAUTH"`, `"API_KEY"`, or `"ALL"`. Defaults to `"ALL"`.
+- `VITE_API_PAGE_RELOAD` - This is an optional parameter that ensures the API page reloads when navigating to it when set to `"true"`. This is useful when gating the API page behind an auth flow.
 
 #### Environment Variables for PKCE Authorization Flow
 

changelog/v0.0.39/app-and-subscription-metadata.yaml

@@ -0,0 +1,11 @@
+changelog:
+  - type: NEW_FEATURE
+    issueLink: https://github.com/solo-io/solo-projects/issues/6952
+    description: >-
+      Adds metadata CRUD operations for apps and subscriptions,
+      based on admin/non-admin role.
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/6958
+    description: >-
+      Adds a request to create the logged in user if they are not found
+      in the portal server DB.

changelog/v0.0.39/app-details-api-keys-section.yaml

@@ -0,0 +1,5 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/6881
+    description: >-
+      Adds an API keys section to the App Details page.

changelog/v0.0.39/app-oauth-client-functionality.yaml

@@ -0,0 +1,9 @@
+changelog:
+  - type: NEW_FEATURE
+    issueLink: https://github.com/solo-io/solo-projects/issues/6886
+    description: >-
+      Adds the ability to create and delete oauth clients from the App details page.
+  - type: NEW_FEATURE
+    issueLink: https://github.com/solo-io/solo-projects/issues/6953
+    description: >-
+      Adds the ability to customize all banner images through the VITE_BANNER_IMAGE_URL environment variable.

changelog/v0.0.39/apps-docs-loading-fixes.yaml

@@ -0,0 +1,17 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/6853
+    description: >-
+      Fixes flickering loading state on landing pages.
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/6852
+    description: >-
+      Adds docs setup information to API details page.
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/6851
+    description: >-
+      Removes placeholder images for apps.
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/6854
+    description: >-
+      Adds information when in a logged out empty state on private Portals.

changelog/v0.0.39/custom-pages.yaml

@@ -0,0 +1,5 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/6860
+    description: >-
+      Adds the ability for users to create custom pages that show up in the UI.

changelog/v0.0.39/header-section-oidc-fixes.yaml

@@ -0,0 +1,6 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/gloo-mesh-enterprise/issues/18658
+    description: >-
+      Adds links for the new teams + apps pages to the OIDC auth header variant.
+      This also includes some refactoring of that area.

changelog/v0.0.39/options-for-app-auth-methods.yaml

@@ -0,0 +1,6 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/7059
+    description: >-
+      Adds an option to configure the UI to show the API Key, OAuth, or both
+      authorization sections on the App details page.

changelog/v0.0.39/rate-limit-display-updated-when-mixed.yaml

@@ -0,0 +1,10 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/7043
+    description: >-
+      Updates the rate limit UI element to show mixed values when there is a App which
+      has multiple subscriptions with different rate limits.
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/7066
+    description: >-
+      Fixes a bug where subscriptions incorrectly showed up as deleted.

changelog/v0.0.39/swagger-ui-prefill-token.yaml

@@ -0,0 +1,7 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/6859
+    description: >-
+      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.

changelog/v0.0.39/teams-page.yaml

@@ -0,0 +1,30 @@
+changelog:
+  - type: NEW_FEATURE
+    issueLink: https://github.com/solo-io/solo-projects/issues/6808
+    description: >-
+      Adds the Teams page in to the GG version of the UI.
+  - type: NEW_FEATURE
+    issueLink: https://github.com/solo-io/solo-projects/issues/6809
+    description: >-
+      Adds the Team Details page in to the GG version of the UI.
+  - type: NEW_FEATURE
+    issueLink: https://github.com/solo-io/solo-projects/issues/6810
+    description: >-
+      Adds the Apps page in to the GG version of the UI.
+  - type: NEW_FEATURE
+    issueLink: https://github.com/solo-io/solo-projects/issues/6811
+    description: >-
+      Adds the App Details page in to the GG version of the UI.
+  - type: NEW_FEATURE
+    issueLink: https://github.com/solo-io/solo-projects/issues/6812
+    description: >-
+      Adds the Admin Subscriptions page in to the GG version of the UI.
+  - type: NEW_FEATURE
+    issueLink: https://github.com/solo-io/solo-projects/issues/6813
+    description: >-
+      Adds the Admin Teams page in to the GG version of the UI.
+  - type: NEW_FEATURE
+    issueLink: https://github.com/solo-io/solo-projects/issues/6814
+    description: >-
+      Adds in an edit button + modal to the Apps + Teams Details pages 
+      (for both admins + non-admins) on the GG version of the UI.

changelog/v0.0.39/update-hotfixes-for-gg-portal-demo-build.yaml

@@ -0,0 +1,7 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/7038
+    description: >-
+      Update metadata endpoint to allow updating of metadata.
+      Updated subscription modal to allow toggling of subscription status by admin.
+      Use a selection dropdown for rate limit units to not allow invalid values.

projects/ui/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  var insertedEnvironmentVariables = {};
+</script>

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",
@@ -25,6 +25,7 @@
     "@mantine/hooks": "^6.0.6",
     "@types/color": "^3.0.6",
     "color": "^4.2.3",
+    "highlight.js": "^11.10.0",
     "mobx": "^6.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -78,5 +79,6 @@
     "braces": "^3.0.3",
     "ws": "^8.17.1",
     "axios": "^1.7.4"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

projects/ui/public/pages/html-example.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+  <body>
+    <style>
+      body {
+        padding: 20px 50px;
+        /* background-color: bisque; */
+      }
+    </style>
+
+    <h1>Example HTML Page</h1>
+
+    <h2>Section 1</h2>
+
+    <ul>
+      <li>This is an example custom page.</li>
+      <li>Feel free to update this to your needs.</li>
+    </ul>
+
+    <h2>Section 2</h2>
+
+    <p>Any HTML content can go here.</p>
+
+    Here is an image:
+    <br />
+    <img
+      src="/pages/gg-logo.png"
+      alt="Gloo Gateway Logo"
+      style="
+        width: 50px;
+        padding: 5px;
+        border-radius: 8px;
+        margin: 20px 0px;
+        background: white;
+        border: 2px solid #d6d6d6;
+      "
+    />
+
+    <br />
+    <button onclick="alert('Anything in an HTML iframe is supported here!')">
+      Click me!
+    </button>
+  </body>
+</html>

projects/ui/public/pages/markdown-example.md

@@ -0,0 +1,37 @@
+# Example Markdown Page (#)
+
+This is a custom Markdown page test.
+
+## Section 1 (##)
+
+- Supports bullet points
+- Supports bullet points
+
+### 1.1 (###)
+
+Testing that **Bold works** here.
+
+#### 1.1.1 (####)
+
+Testing that _Italics works_ here.
+
+##### 1.1.1 (#####)
+
+Links work: [www.solo.io](www.solo.io)
+
+1. Numbered lists work
+2. test
+3. test
+
+Images work:
+
+![Gloo Gateway Logo](/pages/gg-logo.png)
+
+And code does too:
+
+```ts
+const x = 123;
+function y() {
+  return x + 5;
+}
+```