From cb4a1e31ac2b6d3a4733995a5271766f346d8b92 Mon Sep 17 00:00:00 2001
From: sharpd <davidsharp7@gmail.com>
Date: Fri, 1 Mar 2024 21:24:13 +1300
Subject: [PATCH] update based on feedback

Signed-off-by: sharpd <davidsharp7@gmail.com>
---
 web/src/components/datasets/DatasetTags.tsx | 14 +++++++-------
 web/src/helpers/theme.ts                    |  3 +++
 web/src/store/reducers/tags.ts              |  8 +++++---
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/web/src/components/datasets/DatasetTags.tsx b/web/src/components/datasets/DatasetTags.tsx
index 5ebd404666..245214fa3c 100644
--- a/web/src/components/datasets/DatasetTags.tsx
+++ b/web/src/components/datasets/DatasetTags.tsx
@@ -82,6 +82,7 @@ const DatasetTags: React.FC<IProps> = (props) => {
     options[selectedIndex] === 'Add a Tag' ? setDialogOpen(true) : setOpenTagDesc(true)
   }
   const [snackbarOpen, setSnackbarOpen] = useState(false)
+  const theme = createTheme(useTheme())
 
   const handleMenuItemClick = (
     _event: React.MouseEvent<HTMLLIElement, MouseEvent>,
@@ -145,7 +146,6 @@ const DatasetTags: React.FC<IProps> = (props) => {
   }
 
   const formatTags = (tags: string[], tag_desc: Tag[]) => {
-    const theme = createTheme(useTheme())
     return tags.map((tag) => {
       const tagDescription = tag_desc.find((tagItem) => tagItem.name === tag)
       const tooltipTitle = tagDescription?.description || 'No Tag Description'
@@ -170,8 +170,8 @@ const DatasetTags: React.FC<IProps> = (props) => {
     <>
       <Snackbar
         open={snackbarOpen}
-        autoHideDuration={500}
-        style={{ zIndex: 9999 }}
+        autoHideDuration={1000}
+        style={{ zIndex: theme.zIndex.snackbar }}
         onClose={() => setSnackbarOpen(false)}
         message={'Tag updated.'}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
@@ -182,13 +182,13 @@ const DatasetTags: React.FC<IProps> = (props) => {
         <ButtonGroup
           variant='contained'
           ref={anchorRef}
-          aria-label='Tags Nested Menu'
-          sx={{ height: '30px', width: '20px', marginLeft: '5px' }}
+          aria-label='tags-nested-menu'
+          sx={{ height: '32px', width: '20px', marginLeft: '8px' }}
         >
           <MQTooltip placement='left' title={options[selectedIndex]}>
             <Button
               variant='outlined'
-              sx={{ height: '30px', width: '20px' }}
+              sx={{ height: '32px', width: '20px' }}
               onClick={handleButtonClick}
             >
               {selectedIndex === 0 ? <AddIcon /> : <EditNoteIcon />}
@@ -199,7 +199,7 @@ const DatasetTags: React.FC<IProps> = (props) => {
             size='small'
             aria-controls={openDropDown ? 'split-button-menu' : undefined}
             aria-expanded={openDropDown ? 'true' : undefined}
-            aria-label='Tags Menu'
+            aria-label='tags-menu'
             aria-haspopup='menu'
             onClick={handleDropDownToggle}
           >
diff --git a/web/src/helpers/theme.ts b/web/src/helpers/theme.ts
index 1353f8b288..652878f6a2 100644
--- a/web/src/helpers/theme.ts
+++ b/web/src/helpers/theme.ts
@@ -52,6 +52,9 @@ export const theme = createTheme({
       main: '#454f5b',
     },
   },
+  zIndex: {
+    snackbar: 9999,
+  },
 })
 
 export const THEME_EXTRA = {
diff --git a/web/src/store/reducers/tags.ts b/web/src/store/reducers/tags.ts
index 4e2070eda6..3aea27d4a6 100644
--- a/web/src/store/reducers/tags.ts
+++ b/web/src/store/reducers/tags.ts
@@ -9,9 +9,11 @@ import {
 import { Tag } from '../../types/api'
 import { addTagsSuccess, fetchTagsSuccess } from '../actionCreators'
 
-export type ITagsState = { tags: Tag[] }
+export type ITagsState = { isLoading: boolean; tags: Tag[]; init: boolean }
 
 export const initialState: ITagsState = {
+  isLoading: false,
+  init: false,
   tags: [],
 }
 
@@ -21,9 +23,9 @@ export default (state: ITagsState = initialState, action: ITagsAction): ITagsSta
   const { type, payload } = action
   switch (type) {
     case FETCH_TAGS:
-      return { ...state }
+      return { ...state, isLoading: true }
     case FETCH_TAGS_SUCCESS:
-      return { ...state, tags: payload.tags }
+      return { ...state, isLoading: false, init: true, tags: payload.tags }
     case ADD_TAGS:
       return { ...state }
     case ADD_TAGS_SUCCESS: