Merge pull request #108 from solo-io/charlesthebird/optionsForEnablingAppAuthSections

Added options to configure the app details page auth sections.

Author: Charlesthebird

Dockerfile

@@ -49,7 +49,8 @@ ENV VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \
     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_SWAGGER_PREFILL_BASIC=$VITE_SWAGGER_PREFILL_BASIC \
+    VITE_DEFAULT_APP_AUTH=$VITE_DEFAULT_APP_AUTH
 
 # Copy the server files, (this includes the UI build).
 WORKDIR /app
@@ -78,4 +79,5 @@ ENTRYPOINT VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \
     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 \
     node ./bin/www

Makefile

@@ -132,6 +132,14 @@ ifneq ($(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
+
 
 
 

README.md

@@ -151,6 +151,7 @@ You can add these environment variables to a `.env.local` file in the `projects/
   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"`.
 
 #### Environment Variables for PKCE Authorization Flow
 

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

projects/ui/src/Components/Apps/Details/AppDetailsPageContent.tsx

@@ -9,6 +9,10 @@ import {
 } from "../../../Apis/gg_hooks";
 import { Icon } from "../../../Assets/Icons";
 import { UtilityStyles } from "../../../Styles/shared/Utility.style";
+import {
+  AppAuthMethod,
+  defaultAppAuthMethod,
+} from "../../../user_variables.tmplr";
 import { getTeamDetailsLink } from "../../../Utility/link-builders";
 import { BannerHeading } from "../../Common/Banner/BannerHeading";
 import { BannerHeadingTitle } from "../../Common/Banner/BannerHeadingTitle";
@@ -77,11 +81,17 @@ export const AppDetailsPageContent = ({ app }: { app: App }) => {
       />
       <Box px={"30px"}>
         <Flex gap={"30px"} direction={"column"}>
-          <AppAuthenticationSection app={app} />
+          {(defaultAppAuthMethod === AppAuthMethod[AppAuthMethod.ALL] ||
+            defaultAppAuthMethod === AppAuthMethod[AppAuthMethod.OAUTH]) && (
+            <AppAuthenticationSection app={app} />
+          )}
 
           <AppMetadataSection app={app} />
 
-          <AppApiKeysSection app={app} />
+          {(defaultAppAuthMethod === AppAuthMethod[AppAuthMethod.ALL] ||
+            defaultAppAuthMethod === AppAuthMethod[AppAuthMethod.API_KEY]) && (
+            <AppApiKeysSection app={app} />
+          )}
 
           {isLoadingSubscriptions || subscriptions === undefined ? (
             <Loader />

projects/ui/src/user_variables.tmplr.ts

@@ -246,3 +246,24 @@ export const swaggerPrefillBasic = (() => {
       }
     : undefined;
 })();
+
+/**
+ * This is optional.
+ */
+export enum AppAuthMethod {
+  ALL,
+  OAUTH,
+  API_KEY,
+}
+export const defaultAppAuthMethod = templateString(
+  "{{ tmplr.defaultAppAuthMethod }}",
+  insertedEnvironmentVariables?.VITE_DEFAULT_APP_AUTH,
+  import.meta.env.VITE_DEFAULT_APP_AUTH,
+  "ALL"
+).toUpperCase() as keyof typeof AppAuthMethod;
+if (AppAuthMethod[defaultAppAuthMethod] === undefined) {
+  // eslint-disable-next-line no-console
+  console.error(
+    'The value for `VITE_DEFAULT_APP_AUTH` must be: "OAUTH", "ALL", or "API_KEY".'
+  );
+}