feat: add endpoints to oauth2 provider applications (#11718)

These will show up when configuring the application along with the
client ID and everything else.  Should make it easier to configure the
application, otherwise you will have to go look up the URLs in the
docs (which are not yet written).

Co-authored-by: Steven Masley <stevenmasley@gmail.com>

site/src/api/typesGenerated.ts

@@ -656,6 +656,13 @@ export interface MinimalUser {
   readonly avatar_url: string;
 }
 
+// From codersdk/oauth2.go
+export interface OAuth2AppEndpoints {
+  readonly authorization: string;
+  readonly token: string;
+  readonly device_authorization: string;
+}
+
 // From codersdk/deployment.go
 export interface OAuth2Config {
   readonly github: OAuth2GithubConfig;
@@ -678,6 +685,7 @@ export interface OAuth2ProviderApp {
   readonly name: string;
   readonly callback_url: string;
   readonly icon: string;
+  readonly endpoints: OAuth2AppEndpoints;
 }
 
 // From codersdk/oauth2.go

site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@emotion/react";
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import CopyIcon from "@mui/icons-material/FileCopyOutlined";
 import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
 import Divider from "@mui/material/Divider";
@@ -139,16 +139,28 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
               onCancel={() => setShowDelete(false)}
             />
 
-            <h2 css={{ marginBottom: 0 }}>Client ID</h2>
-            <CopyableValue value={app.id}>
-              {app.id}{" "}
-              <CopyIcon
-                css={{
-                  width: 16,
-                  height: 16,
-                }}
-              />
-            </CopyableValue>
+            <dl css={styles.dataList}>
+              <dt>Client ID</dt>
+              <dd>
+                <CopyableValue value={app.id}>
+                  {app.id} <CopyIcon css={{ width: 16, height: 16 }} />
+                </CopyableValue>
+              </dd>
+              <dt>Authorization URL</dt>
+              <dd>
+                <CopyableValue value={app.endpoints.authorization}>
+                  {app.endpoints.authorization}{" "}
+                  <CopyIcon css={{ width: 16, height: 16 }} />
+                </CopyableValue>
+              </dd>
+              <dt>Token URL</dt>
+              <dd>
+                <CopyableValue value={app.endpoints.token}>
+                  {app.endpoints.token}{" "}
+                  <CopyIcon css={{ width: 16, height: 16 }} />
+                </CopyableValue>
+              </dd>
+            </dl>
 
             <Divider css={{ borderColor: theme.palette.divider }} />
 
@@ -303,3 +315,16 @@ const OAuth2SecretRow: FC<OAuth2SecretRowProps> = ({
     </TableRow>
   );
 };
+
+const styles = {
+  dataList: {
+    display: "grid",
+    gridTemplateColumns: "max-content auto",
+    "& > dt": {
+      fontWeight: "bold",
+    },
+    "& > dd": {
+      marginLeft: 10,
+    },
+  },
+} satisfies Record<string, Interpolation<Theme>>;

site/src/testHelpers/entities.ts

@@ -3371,6 +3371,11 @@ export const MockOAuth2ProviderApps: TypesGen.OAuth2ProviderApp[] = [
     name: "foo",
     callback_url: "http://localhost:3001",
     icon: "/icon/github.svg",
+    endpoints: {
+      authorization: "http://localhost:3001/login/oauth2/authorize",
+      token: "http://localhost:3001/login/oauth2/token",
+      device_authorization: "",
+    },
   },
 ];