Clarify new secret vs secret list

code-asher · code-asher · commit 7c7fd7e703ad · 2023-12-14T14:44:21.000-09:00
diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPage.tsx b/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPage.tsx
@@ -22,7 +22,11 @@ const EditOAuth2AppPage: FC = () => {
   const navigate = useNavigate();
   const { appId } = useParams() as { appId: string };
   const queryClient = useQueryClient();
-  const [newAppSecret, setNewAppSecret] =
+  // When a new secret is created it is returned with the full secret.  This is
+  // the only time it will be visible.  The secret list only returns a truncated
+  // version of the secret (for differentiation purposes).  Once the user
+  // acknowledges the secret we will clear it from the state.
+  const [fullNewSecret, setFullNewSecret] =
     useState<TypesGen.OAuth2ProviderAppSecretFull>();
 
   const appQuery = useQuery(oauth2ProviderApp(appId));
@@ -62,7 +66,7 @@ const EditOAuth2AppPage: FC = () => {
     mutationFn: postOAuth2ProviderAppSecret,
     onSuccess: async (secret: TypesGen.OAuth2ProviderAppSecretFull) => {
       displaySuccess("Successfully generated OAuth2 client secret");
-      setNewAppSecret(secret);
+      setFullNewSecret(secret);
       await queryClient.invalidateQueries([oauth2ProviderAppSecretsKey, appId]);
     },
     onError: () => displayError("Failed to generate OAuth2 client secret"),
@@ -95,8 +99,8 @@ const EditOAuth2AppPage: FC = () => {
           createSecret: postSecretMutation.isLoading,
           deleteSecret: deleteSecretMutation.isLoading,
         }}
-        newAppSecret={newAppSecret}
-        dismissNewSecret={() => setNewAppSecret(undefined)}
+        fullNewSecret={fullNewSecret}
+        ackFullNewSecret={() => setFullNewSecret(undefined)}
         error={
           appQuery.error ||
           putMutation.error ||
diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx b/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx
@@ -44,8 +44,8 @@ type EditOAuth2AppProps = {
   generateAppSecret: () => void;
   deleteAppSecret: (id: string) => void;
   secrets?: readonly TypesGen.OAuth2ProviderAppSecret[];
-  newAppSecret?: TypesGen.OAuth2ProviderAppSecretFull;
-  dismissNewSecret: () => void;
+  fullNewSecret?: TypesGen.OAuth2ProviderAppSecretFull;
+  ackFullNewSecret: () => void;
   error?: unknown;
 };
 
@@ -59,8 +59,8 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
   generateAppSecret,
   deleteAppSecret,
   secrets,
-  newAppSecret,
-  dismissNewSecret,
+  fullNewSecret,
+  ackFullNewSecret,
   error,
 }) => {
   const theme = useTheme();
@@ -87,12 +87,12 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
         </Button>
       </Stack>
 
-      {newAppSecret && (
+      {fullNewSecret && (
         <ConfirmDialog
           hideCancel
-          open={Boolean(newAppSecret)}
-          onConfirm={dismissNewSecret}
-          onClose={dismissNewSecret}
+          open={Boolean(fullNewSecret)}
+          onConfirm={ackFullNewSecret}
+          onClose={ackFullNewSecret}
           title="OAuth2 client secret"
           confirmText="OK"
           description={
@@ -102,7 +102,7 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
                 now; you will not be able to see it again.
               </p>
               <CodeExample
-                code={newAppSecret.client_secret_full}
+                code={fullNewSecret.client_secret_full}
                 css={{
                   minHeight: "auto",
                   userSelect: "all",
