Merge pull request #799 from jlandowner/fix/ui-my-addon

Improve UI about UserAddon infomation
cosmo-workspace · Aug 3, 2023 · 65af293 · 65af293
2 parents 61a1ae3 + 136790c
commit 65af293
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 9 deletions.
diff --git a/web/dashboard-ui/src/App.tsx b/web/dashboard-ui/src/App.tsx
@@ -9,6 +9,8 @@ import { MyThemeProvider } from './components/MyThemeProvider';
 import { PageSettingsProvider } from './components/PageSettingsProvider';
 import { ProgressProvider } from './components/ProgressProvider';
 import { PasswordChangeDialogContext } from './views/organisms/PasswordChangeDialog';
+import { UserInfoDialogContext } from './views/organisms/UserActionDialog';
+import { UserAddonChangeDialogContext } from './views/organisms/UserAddonsChangeDialog';
 import { UserContext } from './views/organisms/UserModule';
 import { UserNameChangeDialogContext } from './views/organisms/UserNameChangeDialog';
 import { SignIn } from './views/pages/SignIn';
@@ -65,11 +67,15 @@ function App() {
                 <HashRouter >
                   <LoginProvider>
                     <UserContext.Provider>
-                      <UserNameChangeDialogContext.Provider>
-                        <PasswordChangeDialogContext.Provider>
-                          <SwitchApp />
-                        </PasswordChangeDialogContext.Provider>
-                      </UserNameChangeDialogContext.Provider>
+                      <UserInfoDialogContext.Provider>
+                        <UserNameChangeDialogContext.Provider>
+                          <UserAddonChangeDialogContext.Provider>
+                            <PasswordChangeDialogContext.Provider>
+                              <SwitchApp />
+                            </PasswordChangeDialogContext.Provider>
+                          </UserAddonChangeDialogContext.Provider>
+                        </UserNameChangeDialogContext.Provider>
+                      </UserInfoDialogContext.Provider>
                     </UserContext.Provider>
                   </LoginProvider>
                 </HashRouter >

diff --git a/web/dashboard-ui/src/__tests__/views/organisms/__snapshots__/UserModule.spec.tsx.snap b/web/dashboard-ui/src/__tests__/views/organisms/__snapshots__/UserModule.spec.tsx.snap
@@ -10,13 +10,15 @@ exports[`useTemplates > useTemplates getUserAddonTemplates > normal 1`] = `
     "description": "",
     "isClusterScope": false,
     "name": "tmpl1",
+    "requiredUseraddons": [],
     "requiredVars": [],
   },
   {
     "description": "hoge",
     "isClusterScope": false,
     "isDefaultUserAddon": true,
     "name": "tmpl2",
+    "requiredUseraddons": [],
     "requiredVars": [
       {
         "defaultValue": "var1Value",
@@ -32,6 +34,7 @@ exports[`useTemplates > useTemplates getUserAddonTemplates > normal 1`] = `
     "description": "",
     "isClusterScope": false,
     "name": "tmpl3",
+    "requiredUseraddons": [],
     "requiredVars": [],
   },
 ]

diff --git a/web/dashboard-ui/src/__tests__/views/organisms/__snapshots__/WorkspaceModule.spec.tsx.snap b/web/dashboard-ui/src/__tests__/views/organisms/__snapshots__/WorkspaceModule.spec.tsx.snap
@@ -69,12 +69,14 @@ exports[`useTemplates > normal 1`] = `
     "description": "",
     "isClusterScope": false,
     "name": "tmpl1",
+    "requiredUseraddons": [],
     "requiredVars": [],
   },
   {
     "description": "",
     "isClusterScope": false,
     "name": "tmpl2",
+    "requiredUseraddons": [],
     "requiredVars": [
       {
         "defaultValue": "",
@@ -90,6 +92,7 @@ exports[`useTemplates > normal 1`] = `
     "description": "",
     "isClusterScope": false,
     "name": "tmpl3",
+    "requiredUseraddons": [],
     "requiredVars": [],
   },
 ]

diff --git a/web/dashboard-ui/src/views/organisms/UserActionDialog.tsx b/web/dashboard-ui/src/views/organisms/UserActionDialog.tsx
@@ -7,7 +7,7 @@ import {
   Grid, IconButton, InputAdornment, List, ListItem, ListItemText, MenuItem, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableRow, TextField, Tooltip, Typography
 } from "@mui/material";
 import React, { useEffect, useState } from "react";
-import { useFieldArray, useForm, UseFormRegisterReturn } from "react-hook-form";
+import { UseFormRegisterReturn, useFieldArray, useForm } from "react-hook-form";
 import { DialogContext } from "../../components/ContextProvider";
 import { Template } from "../../proto/gen/dashboard/v1alpha1/template_pb";
 import { User, UserAddon } from "../../proto/gen/dashboard/v1alpha1/user_pb";
@@ -122,13 +122,14 @@ const UserActionDialog: React.FC<UserActionDialogProps> = ({ title, actions, use
 /**
  * Info
  */
-export const UserInfoDialog: React.VFC<{ onClose: () => void, user: User }> = ({ onClose, user }) => {
+export const UserInfoDialog: React.VFC<{ onClose: () => void, user: User, defaultOpenUserAddon?: boolean }> = ({ onClose, user, defaultOpenUserAddon }) => {
   console.log('UserInfoDialog');
   return (
     <UserActionDialog
       title='User Info'
       onClose={() => onClose()}
       user={user}
+      defaultOpenUserAddon={defaultOpenUserAddon}
       actions={<Button variant="contained" color="primary" onClick={() => { onClose() }}>Close</Button>} />
   );
 }
@@ -401,7 +402,7 @@ export const UserCreateDialog: React.VFC<{ onClose: () => void }> = ({ onClose }
 /**
  * Context
  */
-export const UserInfoDialogContext = DialogContext<{ user: User }>(
+export const UserInfoDialogContext = DialogContext<{ user: User, defaultOpenUserAddon?: boolean }>(
   props => (<UserInfoDialog {...props} />));
 export const UserDeleteDialogContext = DialogContext<{ user: User }>(
   props => (<UserDeleteDialog {...props} />));

diff --git a/web/dashboard-ui/src/views/templates/PageTemplate.tsx b/web/dashboard-ui/src/views/templates/PageTemplate.tsx
@@ -16,6 +16,8 @@ import { useLogin } from "../../components/LoginProvider";
 import logo from "../../logo-with-name-small.png";
 import { NameAvatar } from "../atoms/NameAvatar";
 import { PasswordChangeDialogContext } from "../organisms/PasswordChangeDialog";
+import { UserInfoDialogContext } from "../organisms/UserActionDialog";
+import { UserAddonChangeDialogContext } from "../organisms/UserAddonsChangeDialog";
 import { isAdminRole, isAdminUser, isPrivilegedRole } from "../organisms/UserModule";
 import { UserNameChangeDialogContext } from "../organisms/UserNameChangeDialog";
 
@@ -49,6 +51,8 @@ export const PageTemplate: React.FC<React.PropsWithChildren<PageTemplateProps>>
   const { loginUser, logout } = useLogin();
   const passwordChangeDialogDispach = PasswordChangeDialogContext.useDispatch();
   const userNameChangeDialogDispach = UserNameChangeDialogContext.useDispatch();
+  const userAddonChangeDialogDispatch = UserAddonChangeDialogContext.useDispatch();
+  const userInfoDialogDispatch = UserInfoDialogContext.useDispatch();
   const isAdmin = isAdminUser(loginUser);
   const isSignIn = Boolean(loginUser);
   const canChangePassword = Boolean(loginUser?.authType === 'password-secret');
@@ -65,6 +69,18 @@ export const PageTemplate: React.FC<React.PropsWithChildren<PageTemplateProps>>
     setAnchorEl(null);
   }
 
+  const changeAddons = () => {
+    console.log('changeAddons');
+    userAddonChangeDialogDispatch(true, { user: loginUser! });
+    setAnchorEl(null);
+  }
+
+  const openUserInfoDialog = () => {
+    console.log('openUserInfoDialog');
+    userInfoDialogDispatch(true, { user: loginUser!, defaultOpenUserAddon: true });
+    setAnchorEl(null);
+  }
+
   const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
@@ -130,7 +146,7 @@ export const PageTemplate: React.FC<React.PropsWithChildren<PageTemplateProps>>
               onClose={() => setAnchorEl(null)}
             >
               <Stack alignItems="center" spacing={1} sx={{ mt: 1, mb: 2 }}>
-                <NameAvatar name={loginUser?.displayName} sx={{ width: 50, height: 50 }} />
+                <NameAvatar name={loginUser?.displayName} sx={{ width: 50, height: 50 }} onClick={() => openUserInfoDialog()} />
                 <Typography>{loginUser?.displayName}</Typography>
                 <Typography color={colors.grey[700]} fontSize="small">{loginUser?.name}</Typography>
                 <Grid container justifyContent="center" sx={{ width: 200 }}>
@@ -151,6 +167,10 @@ export const PageTemplate: React.FC<React.PropsWithChildren<PageTemplateProps>>
                 <ListItemIcon><VpnKey fontSize="small" /></ListItemIcon>
                 <ListItemText>Change password...</ListItemText>
               </MenuItem>}
+              {isSignIn && isAdmin && <MenuItem onClick={() => changeAddons()}>
+                <ListItemIcon><Badge fontSize="small" /></ListItemIcon>
+                <ListItemText>Change addons...</ListItemText>
+              </MenuItem>}
               <Divider />
               {isSignIn && <MenuItem onClick={() => logout()}>
                 <ListItemIcon><ExitToApp fontSize="small" /></ListItemIcon>