Show provider ID on auth list (#11058)

app/models/AuthenticationProvider.ts

@@ -11,6 +11,8 @@ class AuthenticationProvider extends Model {
 
   name: string;
 
+  providerId: string;
+
   @observable
   isConnected: boolean;
 

app/scenes/Settings/Authentication.tsx

@@ -22,6 +22,7 @@ import DomainManagement from "./components/DomainManagement";
 import Button from "~/components/Button";
 import { ConnectedIcon } from "~/components/Icons/ConnectedIcon";
 import { useTheme } from "styled-components";
+import { VStack } from "~/components/primitives/VStack";
 
 function Authentication() {
   const { authenticationProviders, dialogs } = useStores();
@@ -134,23 +135,28 @@ function Authentication() {
         >
           <Flex align="center" gap={12}>
             {provider.isConnected ? (
-              <Button
-                icon={
-                  provider.isEnabled ? (
-                    <ConnectedIcon />
-                  ) : (
-                    <ConnectedIcon color={theme.textSecondary} />
-                  )
-                }
-                onClick={() =>
-                  !provider.isEnabled
-                    ? handleToggleProvider(provider, true)
-                    : handleRemoveProvider(provider)
-                }
-                neutral
-              >
-                {provider.isEnabled ? t("Connected") : t("Disabled")}
-              </Button>
+              <VStack align="start">
+                <Button
+                  icon={
+                    provider.isEnabled ? (
+                      <ConnectedIcon />
+                    ) : (
+                      <ConnectedIcon color={theme.textSecondary} />
+                    )
+                  }
+                  onClick={() =>
+                    !provider.isEnabled
+                      ? handleToggleProvider(provider, true)
+                      : handleRemoveProvider(provider)
+                  }
+                  neutral
+                >
+                  {provider.isEnabled ? t("Connected") : t("Disabled")}
+                </Button>
+                <Text type="tertiary" size="small">
+                  {provider.providerId}
+                </Text>
+              </VStack>
             ) : (
               <Button
                 onClick={() => handleConnectProvider(provider.name)}

server/presenters/authenticationProvider.ts

@@ -6,6 +6,7 @@ export default function presentAuthenticationProvider(
   return {
     id: authenticationProvider.id,
     name: authenticationProvider.name,
+    providerId: authenticationProvider.providerId,
     createdAt: authenticationProvider.createdAt,
     isEnabled: authenticationProvider.enabled,
     isConnected: true,