Move Rerun button and rearrange relative time

Signed-off-by: even-wei <[email protected]>
DataRecce · Jan 17, 2025 · 7011d8a · 7011d8a
1 parent 1bb055e
commit 7011d8a
Showing 1 changed file with 85 additions and 83 deletions.
diff --git a/js/src/components/check/CheckDetail.tsx b/js/src/components/check/CheckDetail.tsx
@@ -235,95 +235,84 @@ export const CheckDetail = ({ checkId }: CheckDetailProps) => {
             </Tooltip>
           )}
           <Spacer />
-          <Menu>
-            <MenuButton
-              isRound={true}
-              as={IconButton}
-              icon={<Icon as={VscKebabVertical} />}
-              variant="ghost"
-              size="sm"
-            />
-            <MenuList>
-              <MenuItem
-                as={Text}
-                fontSize={"10pt"}
-                icon={<IoMdCodeWorking />}
-                onClick={() => {
-                  setOverlay(<Overlay />);
-                  onPresetCheckTemplateOpen();
-                }}
+          <HStack mr="10px">
+            {relativeTime && (
+              <Box
+                textOverflow="ellipsis"
+                whiteSpace="nowrap"
+                overflow="hidden"
+                fontSize="10pt"
               >
-                Get Preset Check Template
-              </MenuItem>
-              <MenuItem
-                as={Text}
-                fontSize={"10pt"}
-                icon={<CopyIcon />}
-                onClick={() => handleCopy()}
-              >
-                Copy Markdown
-              </MenuItem>
-              <MenuDivider />
-              <MenuItem
-                as={Text}
-                fontSize={"10pt"}
-                icon={<DeleteIcon />}
-                color="red"
-                onClick={() => handleDelete()}
-              >
-                Delete
-              </MenuItem>
-            </MenuList>
-          </Menu>
-
-          {relativeTime && (
-            <Box
-              textOverflow="ellipsis"
-              whiteSpace="nowrap"
-              overflow="hidden"
-              fontSize="10pt"
-            >
-              {relativeTime}
-            </Box>
-          )}
+                {relativeTime}
+              </Box>
+            )}
 
-          {runTypeEntry?.RunResultView && (
-            <Tooltip label="Rerun">
-              <IconButton
+            <Menu>
+              <MenuButton
                 isRound={true}
-                isLoading={isRunning}
+                as={IconButton}
+                icon={<Icon as={VscKebabVertical} />}
                 variant="ghost"
-                aria-label="Rerun"
-                icon={<RepeatIcon />}
-                onClick={() => handleRerun()}
+                size="sm"
               />
-            </Tooltip>
-          )}
-
-          <Tooltip
-            label={
-              isDisabledByNoResult(check?.type ?? "", run)
-                ? "Run the check first" : check?.is_checked ? "Mark as Pending" : "Mark as Approved"}
-            placement="bottom-end"
-          >
-            <Button
-              flex="0 0 auto"
-              size="sm"
-              colorScheme={check?.is_checked ? "green" : "gray"}
-              variant={check?.is_checked ? "solid" : "outline"}
-              leftIcon={
-                check?.is_checked ? (
-                  <CheckCircleIcon />
-                ) : (
-                  <Icon as={VscCircleLarge} color="lightgray" />
-                )
-              }
-              onClick={() => handleApproveCheck()}
-              isDisabled={isDisabledByNoResult(check?.type ?? "", run)}
+              <MenuList>
+                <MenuItem
+                  as={Text}
+                  fontSize={"10pt"}
+                  icon={<IoMdCodeWorking />}
+                  onClick={() => {
+                    setOverlay(<Overlay />);
+                    onPresetCheckTemplateOpen();
+                  }}
+                >
+                  Get Preset Check Template
+                </MenuItem>
+                <MenuItem
+                  as={Text}
+                  fontSize={"10pt"}
+                  icon={<CopyIcon />}
+                  onClick={() => handleCopy()}
+                >
+                  Copy Markdown
+                </MenuItem>
+                <MenuDivider />
+                <MenuItem
+                  as={Text}
+                  fontSize={"10pt"}
+                  icon={<DeleteIcon />}
+                  color="red"
+                  onClick={() => handleDelete()}
+                >
+                  Delete
+                </MenuItem>
+              </MenuList>
+            </Menu>
+
+            <Tooltip
+              label={
+                isDisabledByNoResult(check?.type ?? "", run)
+                  ? "Run the check first" : check?.is_checked ? "Mark as Pending" : "Mark as Approved"}
+              placement="bottom-end"
             >
-              {check?.is_checked ? "Approved" : "Mark as Approved"}
-            </Button>
-          </Tooltip>
+              <Button
+                flex="0 0 auto"
+                size="sm"
+                colorScheme={check?.is_checked ? "green" : "gray"}
+                variant={check?.is_checked ? "solid" : "outline"}
+                leftIcon={
+                  check?.is_checked ? (
+                    <CheckCircleIcon />
+                  ) : (
+                    <Icon as={VscCircleLarge} color="lightgray" />
+                  )
+                }
+                onClick={() => handleApproveCheck()}
+                isDisabled={isDisabledByNoResult(check?.type ?? "", run)}
+              >
+                {check?.is_checked ? "Approved" : "Mark as Approved"}
+              </Button>
+            </Tooltip>
+          </HStack>
         </Flex>
 
         <Box flex="1" p="8px 16px" minHeight="100px">
@@ -351,6 +340,19 @@ export const CheckDetail = ({ checkId }: CheckDetailProps) => {
             )}
             <Spacer />
             <HStack mr="10px">
+              {runTypeEntry?.RunResultView && (
+                <Tooltip label="Rerun">
+                  <Button
+                    leftIcon={<RepeatIcon />}
+                    variant="outline"
+                    isLoading={isRunning}
+                    size="sm"
+                    onClick={() => handleRerun()}
+                  >
+                    Rerun
+                  </Button>
+                </Tooltip>
+              )}
               <Button
                 leftIcon={<CopyIcon />}
                 variant="outline"