From fa2daa610210b5c03d8b24ea396c4a2430cd7212 Mon Sep 17 00:00:00 2001
From: Germiniku <sunyifeng99@gmail.com>
Date: Thu, 19 Oct 2023 18:08:35 +0800
Subject: [PATCH] feat: panel edit icon button

---
 .../dashboard/components/PanelDatePicker.tsx  |   6 +-
 .../dashboard/grid/PanelGrid/PanelGrid.tsx    | 136 +++++++++++++++---
 2 files changed, 118 insertions(+), 24 deletions(-)

diff --git a/ui/src/views/dashboard/components/PanelDatePicker.tsx b/ui/src/views/dashboard/components/PanelDatePicker.tsx
index 42f971cce..134a4963a 100644
--- a/ui/src/views/dashboard/components/PanelDatePicker.tsx
+++ b/ui/src/views/dashboard/components/PanelDatePicker.tsx
@@ -90,17 +90,17 @@ const PanelDatePicker = ({id, timeRange, showTime = true, showRealTime = false,
             <Box>
                 {/* <Tooltip label={`${value && dateTimeFormat(value.start)} - ${value && dateTimeFormat(value.end)}`}> */}
                     <HStack spacing={0} onClick={onOpen} cursor="pointer" className="hover-text">
-                        {showIcon && <IconButton variant="ghost"  _hover={{ bg: null }}>
+                        {showIcon && <IconButton variant="ghost"  _hover={{ bg: null }} fontSize={"sm"}>
                             <FaRegClock />
                         </IconButton>}
                         {
                             showTime && <>
                                    <Box>
-                                        {!isMobileScreen && <Text layerStyle="textSecondary" fontSize="0.9rem" fontWeight="500">
+                                        {!isMobileScreen && <Text layerStyle="textSecondary" fontSize="sm" fontWeight="500">
                                             {value.startRaw.toString().startsWith('now') ? value.startRaw : dateTimeFormat(value.start)} to {value.endRaw.toString().startsWith('now') ? value.endRaw : dateTimeFormat(value.end)}
                                         </Text>}
                                         { isLargeScreen && showRealTime && value.startRaw.toString().startsWith('now') &&
-                                            <Text layerStyle="textSecondary" fontSize="0.9rem" fontWeight="500">
+                                            <Text layerStyle="textSecondary" fontSize="sm" fontWeight="500">
                                                 {dateTimeFormat(value.start)} - {dateTimeFormat(value.end)}
                                             </Text>}
                                     </Box>
diff --git a/ui/src/views/dashboard/grid/PanelGrid/PanelGrid.tsx b/ui/src/views/dashboard/grid/PanelGrid/PanelGrid.tsx
index e4b9b1ec9..7b0a31045 100644
--- a/ui/src/views/dashboard/grid/PanelGrid/PanelGrid.tsx
+++ b/ui/src/views/dashboard/grid/PanelGrid/PanelGrid.tsx
@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Dashboard, Panel, PanelProps, PanelQuery } from "types/dashboard"
-import { Box, Center, HStack, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, Portal, Text, Tooltip, useColorMode, useColorModeValue, useDisclosure, useToast } from "@chakra-ui/react";
-import { FaBook, FaBug, FaEdit, FaRegClock, FaRegClone, FaRegCopy, FaRegEye, FaRegEyeSlash, FaTrashAlt } from "react-icons/fa";
+import { Box, Center, HStack, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, Portal, Text, Tooltip, useColorMode, useColorModeValue, useDisclosure, useToast, IconButton } from "@chakra-ui/react";
+import { FaBook, FaBug, FaEdit, FaEllipsisV, FaRegClock, FaRegClone, FaRegCopy, FaRegEye, FaRegEyeSlash, FaTrashAlt } from "react-icons/fa";
 import { IoMdInformation } from "react-icons/io";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DatasourceMaxDataPoints, DatasourceMinInterval, PANEL_HEADER_HEIGHT } from "src/data/constants";
@@ -56,6 +56,8 @@ import { PanelTypeGraph } from "../../plugins/built-in/panel/graph/types";
 import { DatasourceTypeTestData } from "../../plugins/built-in/datasource/testdata/types";
 import PanelDatePicker from "../../components/PanelDatePicker";
 import useEmbed from "hooks/useEmbed";
+import { css } from "@emotion/react";
+import customColors from "theme/colors";
 
 interface PanelGridProps {
     dashboard: Dashboard
@@ -347,7 +349,13 @@ export const PanelComponent = ({ dashboard, panel, variables, onRemovePanel, onH
         return res
     }, [panel.transform, panel.enableTransform, panelData])
 
-    return <Box height={height} width={width} className={(panel.styles.border == "Normal" && "bordered") + (dashboard.data.styles.bgEnabled ? " panel-bg-alpha" : " panel-bg")} position="relative">
+    return <Box height={height} width={width} className={(panel.styles.border == "Normal" && "bordered") + (dashboard.data.styles.bgEnabled ? " panel-bg-alpha" : " panel-bg")} position="relative"
+        css={css`
+    &: hover .show-on-hover {
+        visibility: visible
+    }
+`}
+    >
 
         {data && <Box overflow="hidden">
             <PanelHeader dashboardId={dashboard.id} panel={panel} data={panelData} queryError={queryError} onCopyPanel={onCopyPanel} onRemovePanel={onRemovePanel} onHidePanel={onHidePanel} />
@@ -364,12 +372,13 @@ export const PanelComponent = ({ dashboard, panel, variables, onRemovePanel, onH
 
         </Box>}
         {loading && <Box position="absolute" top="0" right="0"><Loading size="sm" /></Box>}
-        {!loading && panel.enableScopeTime && <Popover trigger="hover"> 
+
+        {/* {!loading && panel.enableScopeTime && <Popover trigger="hover">
             <PopoverTrigger>
                 <Box position="absolute" top="5px" right="5px" opacity="0.5" fontSize="0.8rem" zIndex={1000} cursor="pointer"><FaRegClock /></Box>
             </PopoverTrigger>
             <PopoverContent>
-                <PopoverArrow /> 
+                <PopoverArrow />
                 <PopoverBody>
                     <PanelDatePicker id={panel.id.toString()} timeRange={panel.scopeTime} onChange={tr => {
                         panel.scopeTime = tr
@@ -377,11 +386,11 @@ export const PanelComponent = ({ dashboard, panel, variables, onRemovePanel, onH
                             type: UpdatePanelEvent,
                             data: cloneDeep(panel)
                         })
-                    }}  showIcon/>
+                    }} showIcon />
                     <Text opacity={0.7} mt="2" ml="3" fontSize="0.9rem">Panel time range</Text>
                 </PopoverBody>
             </PopoverContent>
-        </Popover>}
+        </Popover>} */}
         <Box position="absolute" top="0" left="0" right="0" bottom="0" zIndex={-1} overflow="hidden"><PanelBorder width={width} height={height} border={panel.styles?.border} > <Box></Box></PanelBorder></Box>
     </Box>
 }
@@ -425,24 +434,109 @@ const PanelHeader = ({ dashboardId, queryError, panel, onCopyPanel, onRemovePane
                     </Tooltip>
                 </Box>}
                 <Center width="100%">
-                    <Menu placement="bottom">
-                        <MenuButton
-                            transition='all 0.2s'
-                            _focus={{ border: null }}
-                            onClick={e => e.stopPropagation()}
-                            disabled={embed}
-                        >
-                            <Center width="100%">{!isEmpty(title) ? <Box cursor="pointer" className="hover-bordered" paddingTop={panel.styles.title.paddingTop} paddingBottom={panel.styles.title.paddingBottom} paddingLeft={panel.styles.title.paddingLeft} paddingRight={panel.styles.title.paddingRight} width="100%" fontSize={panel.styles.title.fontSize} fontWeight={panel.styles.title.fontWeight} color={paletteColorNameToHex(panel.styles.title.color, colorMode)}><TitleDecoration styles={panel.styles}><Text noOfLines={1}>{title}</Text></TitleDecoration></Box> : <Box width="100px">&nbsp;</Box>}</Center>
-                        </MenuButton>
-                        <Portal>
-                            <MenuList p="1" zIndex={1500}>
+                    {
+                        panel.enableScopeTime && (
+                            <>
+                                <Popover
+                                    isLazy
+                                    returnFocusOnClose={false}
+                                    placement='left'
+                                    closeOnBlur={false}
+                                    size="sm"
+                                    trigger="hover"
+
+                                >
+                                    <PopoverTrigger>
+                                        <Box position="absolute" top="5px" left="5px" opacity="0.5" fontSize="0.8rem" zIndex={1000} cursor="pointer"><FaRegClock /></Box>
+                                    </PopoverTrigger>
+                                    <PopoverContent width="10rem">
+                                        <PanelDatePicker id={panel.id.toString()} timeRange={panel.scopeTime} onChange={tr => {
+                                            panel.scopeTime = tr
+                                            dispatch({
+                                                type: UpdatePanelEvent,
+                                                data: cloneDeep(panel)
+                                            })
+                                        }} showIcon />
+                                    </PopoverContent>
+                                </Popover>
+                            </>
+                        )
+                    }
+                    <Center width="100%">
+                        {!isEmpty(title) ?
+                            <Box
+                                display={'flex'}
+                                justifyContent={'center'}
+                                // cursor="pointer"
+                                paddingTop={panel.styles.title.paddingTop}
+                                paddingBottom={panel.styles.title.paddingBottom}
+                                paddingLeft={panel.styles.title.paddingLeft}
+                                paddingRight={panel.styles.title.paddingRight}
+                                width="100%"
+                                fontSize={panel.styles.title.fontSize}
+                                fontWeight={panel.styles.title.fontWeight}
+                                color={paletteColorNameToHex(panel.styles.title.color, colorMode)}>
+                                <TitleDecoration styles={panel.styles}>
+                                    <Text noOfLines={1}>
+                                        {title}
+                                    </Text>
+                                </TitleDecoration>
+                            </Box> : <Box width="100px">&nbsp;</Box>}
+                    </Center>
+                    <Box visibility={'hidden'} className="show-on-hover">
+                        <Menu placement="bottom" isLazy>
+                            <MenuButton
+                                background={useColorModeValue(customColors.bodyBg.light, customColors.bodyBg.dark)}
+                                transition='all 0.2s'
+                                _focus={{ border: null }}
+                                onClick={e => e.stopPropagation()}
+                                disabled={embed}
+                                cursor={'pointer'}
+                                as={IconButton}
+                                aria-label='Options'
+                                icon={
+                                    <Box
+                                        fontSize={panel.styles.title.fontSize}
+                                        fontWeight={panel.styles.title.fontWeight}
+                                        color={paletteColorNameToHex(panel.styles.title.color, colorMode)}
+                                    >
+                                        <FaEllipsisV />
+                                    </Box>}
+                                size={'sm'}
+                                variant={'none'}
+                            >
+                                <Center width="100%">
+                                    {
+                                        !isEmpty(title)
+                                            ?
+                                            <Box
+                                                cursor="pointer"
+                                                className="hover-bordered"
+                                                paddingTop={panel.styles.title.paddingTop}
+                                                paddingBottom={panel.styles.title.paddingBottom}
+                                                paddingLeft={panel.styles.title.paddingLeft}
+                                                paddingRight={panel.styles.title.paddingRight} width="100%"
+                                                fontSize={panel.styles.title.fontSize}
+                                                fontWeight={panel.styles.title.fontWeight}
+                                                color={paletteColorNameToHex(panel.styles.title.color, colorMode)}
+                                            >
+                                                <TitleDecoration styles={panel.styles}>
+                                                    <Text noOfLines={1}>{title}</Text>
+                                                </TitleDecoration>
+                                            </Box>
+                                            :
+                                            <Box width="100px">&nbsp;</Box>
+                                    }
+                                </Center>
+                            </MenuButton>
+
+                            <MenuList p="1" zIndex={1500} rootProps={{ fontSize: "sm" }}>
                                 <MenuItem icon={<FaEdit />} onClick={() => addParamToUrl({ edit: panel.id })}>{t.edit}</MenuItem>
                                 <MenuItem icon={<FaRegCopy />} onClick={() => onCopyPanel(panel, "copy")}>{t.copy}</MenuItem>
                                 <MenuItem icon={<FaRegClone />} onClick={() => onCopyPanel(panel, "clone")}>{t.clone}</MenuItem>
                                 <MenuDivider my="1" />
                                 <MenuItem icon={<FaBug />} onClick={onOpen}>{t1.debugPanel}</MenuItem>
                                 <MenuItem icon={<FaRegEye />} onClick={() => addParamToUrl({ viewPanel: viewPanel ? null : panel.id })}>{viewPanel ? t1.exitlView : t1.viewPanel}</MenuItem>
-
                                 {!viewPanel && <>
                                     <MenuDivider my="1" />
                                     <MenuItem icon={<FaRegEyeSlash />} onClick={() => onHidePanel(panel)}>{t1.hidePanel}</MenuItem>
@@ -451,8 +545,8 @@ const PanelHeader = ({ dashboardId, queryError, panel, onCopyPanel, onRemovePane
 
                                 </>}
                             </MenuList>
-                        </Portal>
-                    </Menu>
+                        </Menu>
+                    </Box>
                 </Center>
                 {/* <Box display="none"><FaBook className="grid-drag-handle" /></Box> */}
             </HStack>