From e0b93f055fd2bec2db8eae8d428ce08fe61627ad Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Wed, 20 Nov 2024 16:43:25 +0300
Subject: [PATCH] Swagger: show user icon (#96736)

---
 .betterer.results              |  3 ++-
 public/swagger/SwaggerPage.tsx | 31 +++++++++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 152968f9869..e1996888277 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -5626,7 +5626,8 @@ exports[`better eslint`] = {
     ],
     "public/swagger/SwaggerPage.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
     ],
     "public/swagger/index.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
diff --git a/public/swagger/SwaggerPage.tsx b/public/swagger/SwaggerPage.tsx
index f32033cc206..e74f411e867 100644
--- a/public/swagger/SwaggerPage.tsx
+++ b/public/swagger/SwaggerPage.tsx
@@ -4,7 +4,7 @@ import { useAsync } from 'react-use';
 import SwaggerUI from 'swagger-ui-react';
 
 import { createTheme, monacoLanguageRegistry, SelectableValue } from '@grafana/data';
-import { Stack, Select } from '@grafana/ui';
+import { Stack, Select, UserIcon, UserView, Button } from '@grafana/ui';
 import { setMonacoEnv } from 'app/core/monacoEnv';
 import { ThemeProvider } from 'app/core/utils/ConfigProvider';
 
@@ -49,16 +49,34 @@ export const Page = () => {
     return urls;
   });
 
+  const [userView, setUserView] = useState<UserView>();
+
   const namespace = useAsync(async () => {
     const response = await fetch('api/frontend/settings');
     if (!response.ok) {
       console.warn('No settings found');
-      return '';
+      return 'default';
     }
     const val = await response.json();
     return val.namespace;
   });
 
+  useAsync(async () => {
+    const response = await fetch('api/user');
+    if (!response.ok) {
+      console.warn('No user found, show login button');
+      return;
+    }
+    const val = await response.json();
+    setUserView({
+      user: {
+        name: val.email || val.login,
+        avatarUrl: val.avatarUrl,
+      },
+      lastActiveAt: new Date(),
+    });
+  });
+
   return (
     <div>
       <ThemeProvider value={theme}>
@@ -83,6 +101,15 @@ export const Page = () => {
                 value={url}
                 isLoading={urls.loading}
               />
+              <div style={{ marginTop: '5px' }}>
+                {userView ? (
+                  <UserIcon userView={userView} />
+                ) : (
+                  <a href="/login">
+                    <Button variant="primary">Login</Button>
+                  </a>
+                )}
+              </div>
             </Stack>
           </div>