From 4c91146cb8b9524d43fb4cf09d5ba912b2701de9 Mon Sep 17 00:00:00 2001
From: Kayla Washburn <mckayla@hey.com>
Date: Wed, 30 Aug 2023 15:56:18 -0600
Subject: [PATCH] fix: hide OIDC and Github auth settings when they are
 disabled (#9447)

---
 .../DeploySettingsLayout/OptionsTable.tsx     |   3 +-
 .../SecuritySettingsPageView.tsx              | 116 +++++++++---------
 .../UserAuthSettingsPageView.tsx              |  99 +++++++--------
 3 files changed, 112 insertions(+), 106 deletions(-)

diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
index b573d41b55..aef2661071 100644
--- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx
+++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@@ -12,7 +12,6 @@ import {
   OptionValue,
 } from "components/DeploySettingsLayout/Option"
 import { FC } from "react"
-import { DisabledBadge } from "./Badges"
 import { intervalToDuration, formatDuration } from "date-fns"
 
 const OptionsTable: FC<{
@@ -21,7 +20,7 @@ const OptionsTable: FC<{
   const styles = useStyles()
 
   if (options.length === 0) {
-    return <DisabledBadge></DisabledBadge>
+    return <p>No options to configure</p>
   }
 
   return (
diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx b/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx
index 3e5da55fb9..aad2743fb2 100644
--- a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx
+++ b/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx
@@ -23,66 +23,70 @@ export const SecuritySettingsPageView = ({
   options: options,
   featureAuditLogEnabled,
   featureBrowserOnlyEnabled,
-}: SecuritySettingsPageViewProps): JSX.Element => (
-  <>
-    <Stack direction="column" spacing={6}>
-      <div>
-        <Header
-          title="Security"
-          description="Ensure your Coder deployment is secure."
-        />
+}: SecuritySettingsPageViewProps): JSX.Element => {
+  const tlsOptions = options.filter((o) =>
+    deploymentGroupHasParent(o.group, "TLS"),
+  )
 
-        <OptionsTable
-          options={useDeploymentOptions(
-            options,
-            "SSH Keygen Algorithm",
-            "Secure Auth Cookie",
-            "Disable Owner Workspace Access",
-          )}
-        />
-      </div>
+  return (
+    <>
+      <Stack direction="column" spacing={6}>
+        <div>
+          <Header
+            title="Security"
+            description="Ensure your Coder deployment is secure."
+          />
 
-      <div>
-        <Header
-          title="Audit Logging"
-          secondary
-          description="Allow auditors to monitor user operations in your deployment."
-          docsHref={docs("/admin/audit-logs")}
-        />
+          <OptionsTable
+            options={useDeploymentOptions(
+              options,
+              "SSH Keygen Algorithm",
+              "Secure Auth Cookie",
+              "Disable Owner Workspace Access",
+            )}
+          />
+        </div>
 
-        <Badges>
-          {featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
-          <EnterpriseBadge />
-        </Badges>
-      </div>
+        <div>
+          <Header
+            title="Audit Logging"
+            secondary
+            description="Allow auditors to monitor user operations in your deployment."
+            docsHref={docs("/admin/audit-logs")}
+          />
 
-      <div>
-        <Header
-          title="Browser Only Connections"
-          secondary
-          description="Block all workspace access via SSH, port forward, and other non-browser connections."
-          docsHref={docs("/networking#browser-only-connections-enterprise")}
-        />
+          <Badges>
+            {featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
+            <EnterpriseBadge />
+          </Badges>
+        </div>
 
-        <Badges>
-          {featureBrowserOnlyEnabled ? <EnabledBadge /> : <DisabledBadge />}
-          <EnterpriseBadge />
-        </Badges>
-      </div>
+        <div>
+          <Header
+            title="Browser Only Connections"
+            secondary
+            description="Block all workspace access via SSH, port forward, and other non-browser connections."
+            docsHref={docs("/networking#browser-only-connections-enterprise")}
+          />
 
-      <div>
-        <Header
-          title="TLS"
-          secondary
-          description="Ensure TLS is properly configured for your Coder deployment."
-        />
+          <Badges>
+            {featureBrowserOnlyEnabled ? <EnabledBadge /> : <DisabledBadge />}
+            <EnterpriseBadge />
+          </Badges>
+        </div>
 
-        <OptionsTable
-          options={options.filter((o) =>
-            deploymentGroupHasParent(o.group, "TLS"),
-          )}
-        />
-      </div>
-    </Stack>
-  </>
-)
+        {tlsOptions.length > 0 && (
+          <div>
+            <Header
+              title="TLS"
+              secondary
+              description="Ensure TLS is properly configured for your Coder deployment."
+            />
+
+            <OptionsTable options={tlsOptions} />
+          </div>
+        )}
+      </Stack>
+    </>
+  )
+}
diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx
index a1c01adefc..1bf89edea3 100644
--- a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx
+++ b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx
@@ -19,56 +19,59 @@ export type UserAuthSettingsPageViewProps = {
 
 export const UserAuthSettingsPageView = ({
   options,
-}: UserAuthSettingsPageViewProps): JSX.Element => (
-  <>
-    <Stack direction="column" spacing={6}>
-      <div>
-        <Header title="User Authentication" />
+}: UserAuthSettingsPageViewProps): JSX.Element => {
+  const oidcEnabled = Boolean(
+    useDeploymentOptions(options, "OIDC Client ID")[0].value,
+  )
+  const githubEnabled = Boolean(
+    useDeploymentOptions(options, "OAuth2 GitHub Client ID")[0].value,
+  )
 
-        <Header
-          title="Login with OpenID Connect"
-          secondary
-          description="Set up authentication to login with OpenID Connect."
-          docsHref={docs("/admin/auth#openid-connect-with-google")}
-        />
+  return (
+    <>
+      <Stack direction="column" spacing={6}>
+        <div>
+          <Header title="User Authentication" />
 
-        <Badges>
-          {useDeploymentOptions(options, "OIDC Client ID")[0].value ? (
-            <EnabledBadge />
-          ) : (
-            <DisabledBadge />
+          <Header
+            title="Login with OpenID Connect"
+            secondary
+            description="Set up authentication to login with OpenID Connect."
+            docsHref={docs("/admin/auth#openid-connect-with-google")}
+          />
+
+          <Badges>{oidcEnabled ? <EnabledBadge /> : <DisabledBadge />}</Badges>
+
+          {oidcEnabled && (
+            <OptionsTable
+              options={options.filter((o) =>
+                deploymentGroupHasParent(o.group, "OIDC"),
+              )}
+            />
           )}
-        </Badges>
+        </div>
 
-        <OptionsTable
-          options={options.filter((o) =>
-            deploymentGroupHasParent(o.group, "OIDC"),
+        <div>
+          <Header
+            title="Login with GitHub"
+            secondary
+            description="Set up authentication to login with GitHub."
+            docsHref={docs("/admin/auth#github")}
+          />
+
+          <Badges>
+            {githubEnabled ? <EnabledBadge /> : <DisabledBadge />}
+          </Badges>
+
+          {githubEnabled && (
+            <OptionsTable
+              options={options.filter((o) =>
+                deploymentGroupHasParent(o.group, "GitHub"),
+              )}
+            />
           )}
-        />
-      </div>
-
-      <div>
-        <Header
-          title="Login with GitHub"
-          secondary
-          description="Set up authentication to login with GitHub."
-          docsHref={docs("/admin/auth#github")}
-        />
-
-        <Badges>
-          {useDeploymentOptions(options, "OAuth2 GitHub Client ID")[0].value ? (
-            <EnabledBadge />
-          ) : (
-            <DisabledBadge />
-          )}
-        </Badges>
-
-        <OptionsTable
-          options={options.filter((o) =>
-            deploymentGroupHasParent(o.group, "GitHub"),
-          )}
-        />
-      </div>
-    </Stack>
-  </>
-)
+        </div>
+      </Stack>
+    </>
+  )
+}