updated on click on query screen with reveal widgets

2025-07-17 21:00:45 +00:00 · 2023-05-05 12:59:49 -05:00
parent 0895c614d9
commit 06c78d4dec
2 changed files with 71 additions and 62 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -4948,9 +4948,9 @@
         "devOptional": true
      },
      "node_modules/@types/node": {
-         "version": "14.18.43",
-         "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.43.tgz",
-         "integrity": "sha512-n3eFEaoem0WNwLux+k272P0+aq++5o05bA9CfiwKPdYPB5ZambWKdWoeHy7/OJiizMhzg27NLaZ6uzjLTzXceQ=="
+         "version": "14.18.44",
+         "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.44.tgz",
+         "integrity": "sha512-Sg79dXC3jrRlG0QOLrK5eq2hRzpU4pkD7xBiYNYJ6r9OitJMxkpTpWf6m3qa2AWzb76uMHx+6x5T1Y/WAiS3nw=="
      },
      "node_modules/@types/parse-json": {
         "version": "4.0.0",
@ -5053,9 +5053,9 @@
         }
      },
      "node_modules/@types/react-transition-group": {
-         "version": "4.4.5",
-         "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
-         "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+         "version": "4.4.6",
+         "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+         "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
         "dependencies": {
            "@types/react": "*"
         }
@ -8758,9 +8758,9 @@
         }
      },
      "node_modules/electron-to-chromium": {
-         "version": "1.4.380",
-         "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.380.tgz",
-         "integrity": "sha512-XKGdI4pWM78eLH2cbXJHiBnWUwFSzZM7XujsB6stDiGu9AeSqziedP6amNLpJzE3i0rLTcfAwdCTs5ecP5yeSg==",
+         "version": "1.4.384",
+         "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.384.tgz",
+         "integrity": "sha512-I97q0MmRAAqj53+a8vZsDkEXBZki+ehYAOPzwtQzALip52aEp2+BJqHFtTlsfjoqVZYwPpHC8wM6MbsSZQ/Eqw==",
         "devOptional": true
      },
      "node_modules/emittery": {
@ -15061,9 +15061,9 @@
         }
      },
      "node_modules/lit": {
-         "version": "2.7.3",
-         "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.3.tgz",
-         "integrity": "sha512-0a+u+vVbmgSfPu+fyvqjMPBX0Kwbyj9QOv9MbQFZhWGlV2cyk3lEwgfUQgYN+i/lx++1Z3wZknSIp3QCKxHLyg==",
+         "version": "2.7.4",
+         "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.4.tgz",
+         "integrity": "sha512-cgD7xrZoYr21mbrkZIuIrj98YTMw/snJPg52deWVV4A8icLyNHI3bF70xsJeAgwTuiq5Kkd+ZR8gybSJDCPB7g==",
         "dependencies": {
            "@lit/reactive-element": "^1.6.0",
            "lit-element": "^3.3.0",
@ -18402,9 +18402,9 @@
         }
      },
      "node_modules/react-google-drive-picker": {
-         "version": "1.2.1",
-         "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.1.tgz",
-         "integrity": "sha512-p+7AJo0FKcxzhYkYd+tnNEOOHQOeDKgo2L+UY5DBZnggXcCf/nz0RTqT4eoOCuq6DMtKI6XboKhj9tY75zWf+g==",
+         "version": "1.2.2",
+         "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.2.tgz",
+         "integrity": "sha512-x30mYkt9MIwPCgL+fyK75HZ8E6G5L/WGW0bfMG6kbD4NG2kmdlmV9oH5lPa6P6d46y9hj5Y3btAMrZd4JRRkSA==",
         "peerDependencies": {
            "react": ">=17.0.0",
            "react-dom": ">=17.0.0"
@ -21162,9 +21162,9 @@
         }
      },
      "node_modules/webpack": {
-         "version": "5.81.0",
-         "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.81.0.tgz",
-         "integrity": "sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==",
+         "version": "5.82.0",
+         "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.82.0.tgz",
+         "integrity": "sha512-iGNA2fHhnDcV1bONdUu554eZx+XeldsaeQ8T67H6KKHl2nUSwX8Zm7cmzOA46ox/X1ARxf7Bjv8wQ/HsB5fxBg==",
         "dev": true,
         "dependencies": {
            "@types/eslint-scope": "^3.7.3",
@ -25602,9 +25602,9 @@
         "devOptional": true
      },
      "@types/node": {
-         "version": "14.18.43",
-         "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.43.tgz",
-         "integrity": "sha512-n3eFEaoem0WNwLux+k272P0+aq++5o05bA9CfiwKPdYPB5ZambWKdWoeHy7/OJiizMhzg27NLaZ6uzjLTzXceQ=="
+         "version": "14.18.44",
+         "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.44.tgz",
+         "integrity": "sha512-Sg79dXC3jrRlG0QOLrK5eq2hRzpU4pkD7xBiYNYJ6r9OitJMxkpTpWf6m3qa2AWzb76uMHx+6x5T1Y/WAiS3nw=="
      },
      "@types/parse-json": {
         "version": "4.0.0",
@ -25707,9 +25707,9 @@
         }
      },
      "@types/react-transition-group": {
-         "version": "4.4.5",
-         "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
-         "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+         "version": "4.4.6",
+         "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+         "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
         "requires": {
            "@types/react": "*"
         }
@ -28497,9 +28497,9 @@
         }
      },
      "electron-to-chromium": {
-         "version": "1.4.380",
-         "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.380.tgz",
-         "integrity": "sha512-XKGdI4pWM78eLH2cbXJHiBnWUwFSzZM7XujsB6stDiGu9AeSqziedP6amNLpJzE3i0rLTcfAwdCTs5ecP5yeSg==",
+         "version": "1.4.384",
+         "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.384.tgz",
+         "integrity": "sha512-I97q0MmRAAqj53+a8vZsDkEXBZki+ehYAOPzwtQzALip52aEp2+BJqHFtTlsfjoqVZYwPpHC8wM6MbsSZQ/Eqw==",
         "devOptional": true
      },
      "emittery": {
@ -33179,9 +33179,9 @@
         }
      },
      "lit": {
-         "version": "2.7.3",
-         "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.3.tgz",
-         "integrity": "sha512-0a+u+vVbmgSfPu+fyvqjMPBX0Kwbyj9QOv9MbQFZhWGlV2cyk3lEwgfUQgYN+i/lx++1Z3wZknSIp3QCKxHLyg==",
+         "version": "2.7.4",
+         "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.4.tgz",
+         "integrity": "sha512-cgD7xrZoYr21mbrkZIuIrj98YTMw/snJPg52deWVV4A8icLyNHI3bF70xsJeAgwTuiq5Kkd+ZR8gybSJDCPB7g==",
         "requires": {
            "@lit/reactive-element": "^1.6.0",
            "lit-element": "^3.3.0",
@ -35505,9 +35505,9 @@
         }
      },
      "react-google-drive-picker": {
-         "version": "1.2.1",
-         "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.1.tgz",
-         "integrity": "sha512-p+7AJo0FKcxzhYkYd+tnNEOOHQOeDKgo2L+UY5DBZnggXcCf/nz0RTqT4eoOCuq6DMtKI6XboKhj9tY75zWf+g==",
+         "version": "1.2.2",
+         "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.2.tgz",
+         "integrity": "sha512-x30mYkt9MIwPCgL+fyK75HZ8E6G5L/WGW0bfMG6kbD4NG2kmdlmV9oH5lPa6P6d46y9hj5Y3btAMrZd4JRRkSA==",
         "requires": {}
      },
      "react-is": {
@ -37631,9 +37631,9 @@
         "dev": true
      },
      "webpack": {
-         "version": "5.81.0",
-         "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.81.0.tgz",
-         "integrity": "sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==",
+         "version": "5.82.0",
+         "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.82.0.tgz",
+         "integrity": "sha512-iGNA2fHhnDcV1bONdUu554eZx+XeldsaeQ8T67H6KKHl2nUSwX8Zm7cmzOA46ox/X1ARxf7Bjv8wQ/HsB5fxBg==",
         "dev": true,
         "requires": {
            "@types/eslint-scope": "^3.7.3",
--- a/src/qqq/utils/qqq/ValueUtils.tsx
+++ b/src/qqq/utils/qqq/ValueUtils.tsx
@ -485,7 +485,7 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
   const [adornmentFieldsMap, setAdornmentFieldsMap] = useState(new Map<string, boolean>);
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
   const [tooltipOpen, setToolTipOpen] = useState(false);
-   const [displayValue, setDisplayValue] = useState(value.replace(/./g, "*"));
+   const [displayValue, setDisplayValue] = useState(value ? value.replace(/./g, "*") : "");

   const handleTooltipClose = () =>
   {
@ -497,8 +497,9 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
      setToolTipOpen(true);
   };

-   const handleRevealIconClick = (fieldName: string) =>
+   const handleRevealIconClick = (event: React.MouseEvent<HTMLSpanElement>, fieldName: string) =>
   {
+      event.stopPropagation();
      const displayValue = (adornmentFieldsMap.get(fieldName)) ? value.replace(/./g, "*") : value;
      setDisplayValue(displayValue);
      adornmentFieldsMap.set(fieldName, !adornmentFieldsMap.get(fieldName));
@ -506,36 +507,44 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
      forceUpdate();
   };

-   const copyToClipboard = (value: string) =>
+   const copyToClipboard = (event: React.MouseEvent<HTMLSpanElement>, value: string) =>
   {
+      event.stopPropagation();
      navigator.clipboard.writeText(value);
      setToolTipOpen(true);
   };

   return (
-      usage === "view" && adornmentFieldsMap.get(fieldName) === true ? (
-         <Box>
-            <Icon onClick={() => handleRevealIconClick(fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_on</Icon>
-            {displayValue}
-            <ClickAwayListener onClickAway={handleTooltipClose}>
-               <Tooltip
-                  PopperProps={{
-                     disablePortal: true,
-                  }}
-                  onClose={handleTooltipClose}
-                  open={tooltipOpen}
-                  disableFocusListener
-                  disableHoverListener
-                  disableTouchListener
-                  title="Copied To Clipboard"
-               >
-                  <Icon onClick={() => copyToClipboard(value)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginLeft: "5px"}}>copy</Icon>
-               </Tooltip>
-            </ClickAwayListener>
-         </Box>
-      ):(
-         <Box><Icon onClick={() => handleRevealIconClick(fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_off</Icon>{displayValue}</Box>
-      )
+      <>
+         {
+            displayValue && (
+               adornmentFieldsMap.get(fieldName) === true ? (
+                  <Box>
+                     <Icon onClick={(e) => handleRevealIconClick(e, fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_on</Icon>
+                     {displayValue}
+                     <ClickAwayListener onClickAway={handleTooltipClose}>
+                        <Tooltip
+                           sx={{zIndex: 1000}}
+                           PopperProps={{
+                              disablePortal: true,
+                           }}
+                           onClose={handleTooltipClose}
+                           open={tooltipOpen}
+                           disableFocusListener
+                           disableHoverListener
+                           disableTouchListener
+                           title="Copied To Clipboard"
+                        >
+                           <Icon onClick={(e) => copyToClipboard(e, value)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginLeft: "5px"}}>copy</Icon>
+                        </Tooltip>
+                     </ClickAwayListener>
+                  </Box>
+               ):(
+                  <Box><Icon onClick={(e) => handleRevealIconClick(e, fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_off</Icon>{displayValue}</Box>
+               )
+            )
+         }
+      </>
   );
 }