Charlesthebird/header refactor and OIDC auth fixes

Dockerfile

@@ -45,7 +45,11 @@ ENV VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \
     VITE_HOME_IMAGE_URL=$VITE_HOME_IMAGE_URL \
     VITE_APIS_IMAGE_URL=$VITE_APIS_IMAGE_URL \
     VITE_LOGO_IMAGE_URL=$VITE_LOGO_IMAGE_URL \
-    VITE_COMPANY_NAME=$VITE_COMPANY_NAME
+    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
 
 # Copy the server files, (this includes the UI build).
 WORKDIR /app
@@ -70,4 +74,8 @@ ENTRYPOINT 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_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

Makefile

@@ -104,6 +104,34 @@ ifneq ($(VITE_COMPANY_NAME),)
 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
 
 
 

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:
@@ -137,6 +137,20 @@ You can add these environment variables to a `.env.local` file in the `projects/
 - `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.
+  - 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
 

changelog/v0.0.36/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.36/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.36/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.36/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.36/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.36/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.

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",

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;
+}
+```

projects/ui/src/Apis/api-types.ts

@@ -108,6 +108,16 @@ export type App = {
   teamId: string;
 };
 
+export type ApiKey = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string;
+  apiKey: string;
+  name: string;
+  metadata: Record<string, string>;
+};
+
 export type Team = {
   createdAt: string;
   description: string;