coder · kylecarbs · Oct 17, 2022 · Sep 20, 2022 · Sep 20, 2022 · Sep 22, 2022
diff --git a/codersdk/flags.go b/codersdk/flags.go
@@ -38,7 +38,7 @@ type DeploymentFlags struct {
 	OAuth2GithubEnterpriseBaseURL    *StringFlag      `json:"oauth2_github_enterprise_base_url" typescript:",notnull"`
 	OIDCAllowSignups                 *BoolFlag        `json:"oidc_allow_signups" typescript:",notnull"`
 	OIDCClientID                     *StringFlag      `json:"oidc_client_id" typescript:",notnull"`
-	OIDCClientSecret                 *StringFlag      `json:"oidc_cliet_secret" typescript:",notnull"`
+	OIDCClientSecret                 *StringFlag      `json:"oidc_client_secret" typescript:",notnull"`
 	OIDCEmailDomain                  *StringFlag      `json:"oidc_email_domain" typescript:",notnull"`
 	OIDCIssuerURL                    *StringFlag      `json:"oidc_issuer_url" typescript:",notnull"`
 	OIDCScopes                       *StringArrayFlag `json:"oidc_scopes" typescript:",notnull"`
@@ -49,7 +49,7 @@ type DeploymentFlags struct {
 	TLSCertFiles                     *StringArrayFlag `json:"tls_cert_files" typescript:",notnull"`
 	TLSClientCAFile                  *StringFlag      `json:"tls_client_ca_file" typescript:",notnull"`
 	TLSClientAuth                    *StringFlag      `json:"tls_client_auth" typescript:",notnull"`
-	TLSKeyFiles                      *StringArrayFlag `json:"tls_key_tiles" typescript:",notnull"`
+	TLSKeyFiles                      *StringArrayFlag `json:"tls_key_files" typescript:",notnull"`
 	TLSMinVersion                    *StringFlag      `json:"tls_min_version" typescript:",notnull"`
 	TraceEnable                      *BoolFlag        `json:"trace_enable" typescript:",notnull"`
 	SecureAuthCookie                 *BoolFlag        `json:"secure_auth_cookie" typescript:",notnull"`

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -21,6 +21,7 @@ import { XServiceContext } from "xServices/StateContext"
 import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
 import { RequireAuth } from "./components/RequireAuth/RequireAuth"
 import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"
+import { DeploySettingsLayout } from "components/DeploySettingsLayout/DeploySettingsLayout"
 
 // Lazy load pages
 // - Pages that are secondary, not in the main navigation or not usually accessed
@@ -67,6 +68,18 @@ const GroupPage = lazy(() => import("./pages/GroupsPage/GroupPage"))
 const SettingsGroupPage = lazy(
   () => import("./pages/GroupsPage/SettingsGroupPage"),
 )
+const GeneralSettingsPage = lazy(
+  () => import("./pages/DeploySettingsPage/GeneralSettingsPage"),
+)
+const SecuritySettingsPage = lazy(
+  () => import("./pages/DeploySettingsPage/SecuritySettingsPage"),
+)
+const AuthSettingsPage = lazy(
+  () => import("./pages/DeploySettingsPage/AuthSettingsPage"),
+)
+const NetworkSettingsPage = lazy(
+  () => import("./pages/DeploySettingsPage/NetworkSettingsPage"),
+)
 
 export const AppRouter: FC = () => {
   const xServices = useContext(XServiceContext)
@@ -237,6 +250,65 @@ export const AppRouter: FC = () => {
           />
         </Route>
 
+        <Route path="/settings/deployment">
+          <Route
+            path="general"
+            element={
+              <AuthAndFrame>
+                <RequirePermission
+                  isFeatureVisible={Boolean(permissions?.viewDeploymentFlags)}
+                >
+                  <DeploySettingsLayout>
+                    <GeneralSettingsPage />
+                  </DeploySettingsLayout>
+                </RequirePermission>
+              </AuthAndFrame>
+            }
+          />
+          <Route
+            path="security"
+            element={
+              <AuthAndFrame>
+                <RequirePermission
+                  isFeatureVisible={Boolean(permissions?.viewDeploymentFlags)}
+                >
+                  <DeploySettingsLayout>
+                    <SecuritySettingsPage />
+                  </DeploySettingsLayout>
+                </RequirePermission>
+              </AuthAndFrame>
+            }
+          />
+          <Route
+            path="network"
+            element={
+              <AuthAndFrame>
+                <RequirePermission
+                  isFeatureVisible={Boolean(permissions?.viewDeploymentFlags)}
+                >
+                  <DeploySettingsLayout>
+                    <NetworkSettingsPage />
+                  </DeploySettingsLayout>
+                </RequirePermission>
+              </AuthAndFrame>
+            }
+          />
+          <Route
+            path="auth"
+            element={
+              <AuthAndFrame>
+                <RequirePermission
+                  isFeatureVisible={Boolean(permissions?.viewDeploymentFlags)}
+                >
+                  <DeploySettingsLayout>
+                    <AuthSettingsPage />
+                  </DeploySettingsLayout>
+                </RequirePermission>
+              </AuthAndFrame>
+            }
+          />
+        </Route>
+
         <Route path="settings" element={<SettingsLayout />}>
           <Route path="account" element={<AccountPage />} />
           <Route path="security" element={<SecurityPage />} />

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -641,3 +641,14 @@ export const getAgentListeningPorts = async (
   )
   return response.data
 }
+
+export const getDeploymentFlags =
+  async (): Promise<TypesGen.DeploymentFlags> => {
+    const response = await axios.get(`/api/v2/flags/deployment`)
+    return response.data
+  }
+
+export const getReplicas = async (): Promise<TypesGen.Replica[]> => {
+  const response = await axios.get(`/api/v2/replicas`)
+  return response.data
+}
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -293,7 +293,7 @@ export interface DeploymentFlags {
   readonly oauth2_github_enterprise_base_url: StringFlag
   readonly oidc_allow_signups: BoolFlag
   readonly oidc_client_id: StringFlag
-  readonly oidc_cliet_secret: StringFlag
+  readonly oidc_client_secret: StringFlag
   readonly oidc_email_domain: StringFlag
   readonly oidc_issuer_url: StringFlag
   readonly oidc_scopes: StringArrayFlag
@@ -304,7 +304,7 @@ export interface DeploymentFlags {
   readonly tls_cert_files: StringArrayFlag
   readonly tls_client_ca_file: StringFlag
   readonly tls_client_auth: StringFlag
-  readonly tls_key_tiles: StringArrayFlag
+  readonly tls_key_files: StringArrayFlag
   readonly tls_min_version: StringFlag
   readonly trace_enable: BoolFlag
   readonly secure_auth_cookie: BoolFlag

diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx
@@ -0,0 +1,79 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { Stack } from "components/Stack/Stack"
+import React, { PropsWithChildren } from "react"
+import { combineClasses } from "util/combineClasses"
+
+export const EnabledBadge: React.FC = () => {
+  const styles = useStyles()
+  return (
+    <span className={combineClasses([styles.badge, styles.enabledBadge])}>
+      Enabled
+    </span>
+  )
+}
+
+export const DisabledBadge: React.FC = () => {
+  const styles = useStyles()
+  return (
+    <span className={combineClasses([styles.badge, styles.disabledBadge])}>
+      Disabled
+    </span>
+  )
+}
+
+export const EnterpriseBadge: React.FC = () => {
+  const styles = useStyles()
+  return (
+    <span className={combineClasses([styles.badge, styles.enterpriseBadge])}>
+      Enterprise
+    </span>
+  )
+}
+
+export const Badges: React.FC<PropsWithChildren> = ({ children }) => {
+  const styles = useStyles()
+  return (
+    <Stack
+      className={styles.badges}
+      direction="row"
+      alignItems="center"
+      spacing={1}
+    >
+      {children}
+    </Stack>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  badges: {
+    margin: theme.spacing(0, 0, 2),
+  },
+
+  badge: {
+    fontSize: 10,
+    height: 24,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.085em",
+    padding: theme.spacing(0, 1.5),
+    borderRadius: 9999,
+    display: "flex",
+    alignItems: "center",
+    width: "fit-content",
+  },
+
+  enterpriseBadge: {
+    backgroundColor: theme.palette.info.dark,
+    border: `1px solid ${theme.palette.info.light}`,
+  },
+
+  enabledBadge: {
+    border: `1px solid ${theme.palette.success.light}`,
+    backgroundColor: theme.palette.success.dark,
+  },
+
+  disabledBadge: {
+    border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper,
+  },
+}))
diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
@@ -0,0 +1,73 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { Margins } from "components/Margins/Margins"
+import { Stack } from "components/Stack/Stack"
+import { Sidebar } from "./Sidebar"
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+} from "react"
+import { useActor } from "@xstate/react"
+import { XServiceContext } from "xServices/StateContext"
+import { Loader } from "components/Loader/Loader"
+import { DeploymentFlags } from "api/typesGenerated"
+
+type DeploySettingsContextValue = { deploymentFlags: DeploymentFlags }
+
+const DeploySettingsContext = createContext<
+  DeploySettingsContextValue | undefined
+>(undefined)
+
+export const useDeploySettings = (): DeploySettingsContextValue => {
+  const context = useContext(DeploySettingsContext)
+  if (!context) {
+    throw new Error(
+      "useDeploySettings should be used inside of DeploySettingsLayout",
+    )
+  }
+  return context
+}
+
+export const DeploySettingsLayout: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const xServices = useContext(XServiceContext)
+  const [state, send] = useActor(xServices.deploymentFlagsXService)
+  const styles = useStyles()
+  const { deploymentFlags } = state.context
+
+  useEffect(() => {
+    if (state.matches("idle")) {
+      send("LOAD")
+    }
+  }, [send, state])
+
+  return (
+    <Margins>
+      <Stack className={styles.wrapper} direction="row" spacing={5}>
+        <Sidebar />
+        <main className={styles.content}>
+          {deploymentFlags ? (
+            <DeploySettingsContext.Provider value={{ deploymentFlags }}>
+              {children}
+            </DeploySettingsContext.Provider>
+          ) : (
+            <Loader />
+          )}
+        </main>
+      </Stack>
+    </Margins>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    padding: theme.spacing(6, 0),
+  },
+
+  content: {
+    maxWidth: 800,
+    width: "100%",
+  },
+}))
diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx
@@ -0,0 +1,67 @@
+import Button from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
+import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
+import { Stack } from "components/Stack/Stack"
+import React from "react"
+
+export const Header: React.FC<{
+  title: string | JSX.Element
+  description: string | JSX.Element
+  secondary?: boolean
+  docsHref?: string
+}> = ({ title, description, docsHref, secondary }) => {
+  const styles = useStyles()
+
+  return (
+    <Stack alignItems="baseline" direction="row" justifyContent="space-between">
+      <div className={styles.headingGroup}>
+        <h1 className={`${styles.title} ${secondary ? "secondary" : ""}`}>
+          {title}
+        </h1>
+        <span className={styles.description}>{description}</span>
+      </div>
+
+      {docsHref && (
+        <Button
+          size="small"
+          startIcon={<LaunchOutlined />}
+          component="a"
+          href={docsHref}
+          target="_blank"
+          variant="outlined"
+        >
+          Read the docs
+        </Button>
+      )}
+    </Stack>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  headingGroup: {
+    maxWidth: 420,
+    marginBottom: theme.spacing(3),
+  },
+
+  title: {
+    fontSize: 32,
+    fontWeight: 700,
+    display: "flex",
+    alignItems: "center",
+    lineHeight: "initial",
+    margin: 0,
+    marginBottom: theme.spacing(0.5),
+    gap: theme.spacing(1),
+
+    "&.secondary": {
+      fontSize: 24,
+      fontWeight: 500,
+    },
+  },
+
+  description: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+    lineHeight: "160%",
+  },
+}))