Merge branch 'devsite-1243'

adobe · Jul 25, 2024 · 9acb08a · 9acb08a
2 parents 133ca6f + f4882ae
commit 9acb08a
Show file tree

Hide file tree

Showing 11 changed files with 607 additions and 365 deletions.
diff --git a/packages/gatsby-theme-aio/package.json b/packages/gatsby-theme-aio/package.json
@@ -65,7 +65,6 @@
     "@adobe/focus-ring-polyfill": "^0.1.5",
     "@adobe/gatsby-source-github-file-contributors": "^0.3.1",
     "@adobe/prism-adobe": "^1.0.3",
-    "@adobe/react-spectrum": "^3.35.1",
     "@emotion/react": "^11.10.4",
     "@loadable/component": "^5.15.2",
     "@mdx-js/mdx": "1.6.22",

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/AccessToken.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/AccessToken.js
@@ -1,37 +1,39 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { css } from '@emotion/react';
-import { Button, ProgressCircle } from '@adobe/react-spectrum';
-import { ActionButton, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
+import { ProgressCircle } from "../../ProgressCircle";
+import { Button } from "../../Button";
 import { CopyIcon } from '../Icons';
 import { Toast } from '../../Toast';
 import GetCredentialContext from '../GetCredentialContext';
 import { generateToken, getCredentialSecrets } from '../Service';
+import { ActionButton } from '../../ActionButton';
 
 const AccessToken = ({ accessToken, response, scopesDetails }) => {
-
   const [credentialToken, setCredentialToken] = useState(null);
   const { selectedOrganization } = useContext(GetCredentialContext);
   const [isCopiedTooltip, setIsCopiedTooltip] = useState(false);
+  const [isHoveringCopyButton, setIsHoveringCopyButton] = useState(false);
 
   const handleGenerateToken = async () => {
     setCredentialToken('loading');
     const secrets = await getCredentialSecrets(response, selectedOrganization);
     if (secrets) {
-      let clientId = response?.workspaces ? response?.workspaces[0]?.credentials[0]?.clientId : response?.apiKey
+      let clientId = response?.workspaces ? response?.workspaces[0]?.credentials[0]?.clientId : response?.apiKey;
       const tokenVal = await generateToken(clientId, secrets?.clientSecret, scopesDetails);
       navigator.clipboard.writeText(tokenVal);
       setCredentialToken(tokenVal);
     }
   };
 
   const handleSecretCopyCode = (copiedVal) => {
-    setIsCopiedTooltip(true)
+    setIsCopiedTooltip(true);
     navigator.clipboard.writeText(copiedVal);
-  }
+    setTimeout(() => setIsCopiedTooltip(false), 1000); // Hide tooltip after 1 second
+  };
 
   useEffect(() => {
     setCredentialToken(null);
-  }, [response])
+  }, [response]);
 
   return (
     <>
@@ -48,52 +50,80 @@ const AccessToken = ({ accessToken, response, scopesDetails }) => {
           {credentialToken === null ? (
             accessToken?.buttonLabel && (
               <div
+                data-cy="generate-token"
+                onClick={() => handleGenerateToken()}
                 css={css`
-
                   width: fit-content;
-
                   & > button {
                     background-color : #0265dc !important;
                   }
-
                 `}>
-                <Button onPress={() => handleGenerateToken()} variant="accent" data-cy="generate-token">
+                <Button variant="accent" style="fill">
                   {accessToken?.buttonLabel}
                 </Button>
               </div>
             )
           ) : (
             credentialToken === 'loading' ? (
               <ProgressCircle size="S" aria-label="Loading…" isIndeterminate />
-            ) :
-              credentialToken && (
+            ) : (
+              <div
+                css={css`
+                  display: flex;
+                  align-items: center;
+                  gap: 16px;
+                `}>
+                <p
+                  className="spectrum-Body spectrum-Body--sizeS"
+                  css={css`
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    color: #000000;
+                    width: 320px;
+                  `}>
+                  {credentialToken}
+                </p>
                 <div
+                  data-cy="copy-token"
+                  onClick={() => handleSecretCopyCode(credentialToken)}
                   css={css`
-                    display: flex;
-                    align-items: center;
-                    gap: 16px;
+                    position: relative;
+                    & > button {
+                      border: 1px solid rgba(177, 177, 177) !important;
+                      padding: 4px !important;
+                      border-radius: 2px !important;
+                    }
                   `}>
-                  <p
-                    className="spectrum-Body spectrum-Body--sizeS"
-                    css={css`
-                      white-space: nowrap;
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                      color: #000000;
-                      width: 320px;
-                    `}>
-                    {credentialToken}
-                  </p>
-                  <TooltipTrigger delay={0}>
-                    <ActionButton onPress={() => handleSecretCopyCode(credentialToken)} data-cy="copy-token">
-                      <CopyIcon />
-                    </ActionButton>
-                    <Tooltip>Copy</Tooltip>
-                  </TooltipTrigger>
-                </div>
-              )
+                  <ActionButton
+                    onMouseEnter={() => setIsHoveringCopyButton(true)}
+                    onMouseLeave={() => setIsHoveringCopyButton(false)}
+                  >
+                    <CopyIcon />
+                  </ActionButton>
+                  {isHoveringCopyButton && (
+                    <div
+                      className="spectrum-Tooltip spectrum-Tooltip--top is-open"
+                      css={css`
+                        position: absolute;
+                        top: -30px;
+                        transform: translateX(-50%);
+                        background: #333;
+                        color: #fff;
+                        border-radius: 4px;
+                        white-space: nowrap;
+                        z-index: 10;
+                      `}
+                    >
+                      <div className="spectrum-Tooltip-label">Copy</div>
+                      <div className="spectrum-Tooltip-tip" ></div>
+                    </div>
+                  )}
+                </div >
+              </div >
+            )
           )}
-        </div>
+        </div >
       )}
       {
         isCopiedTooltip && (

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/ShowCard.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/ShowCard.js
@@ -1,7 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { css } from '@emotion/react';
 import { CopyIcon } from '../Icons';
-import { ActionButton, ProgressCircle, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
+import { ActionButton } from "../../ActionButton";
+import { ProgressCircle } from "../../ProgressCircle";
 import { Toast } from '../../Toast';
 import GetCredentialContext from '../GetCredentialContext';
 import { getCredentialSecrets } from '../Service';
@@ -17,6 +18,7 @@ const ShowCard = ({
 
   const [showClientSecret, setShowClientSecret] = useState(null);
   const [isCopiedTooltip, setIsCopiedTooltip] = useState(false);
+  const [isHoveringCopyButton, setIsHoveringCopyButton] = useState(false);
   const { selectedOrganization } = useContext(GetCredentialContext);
 
   const handleCreateClientSecret = async () => {
@@ -27,13 +29,14 @@ const ShowCard = ({
   };
 
   const handleSecretCopyCode = (copiedVal) => {
-    setIsCopiedTooltip(true)
+    setIsCopiedTooltip(true);
     navigator.clipboard.writeText(copiedVal);
+    setTimeout(() => setIsCopiedTooltip(false), 1000); // Hide tooltip after 1 second
   }
 
   useEffect(() => {
-    setShowClientSecret(null)
-  }, [response])
+    setShowClientSecret(null);
+  }, [response]);
 
   return (
     <div
@@ -54,10 +57,16 @@ const ShowCard = ({
         `}>
         {isClientSecret && (
           showClientSecret === null ? (
-            <ActionButton
-              onPress={() => { handleCreateClientSecret() }} data-cy="retrieve-client-secret">
-              {buttonLabel}
-            </ActionButton>
+            <div onClick={() => { handleCreateClientSecret() }} data-cy="retrieve-client-secret"
+              css={css`
+                & > button {
+                  border: 1px solid rgba(177, 177, 177) !important;
+                  padding: 4px !important;
+                  border-radius: 2px !important;
+                }
+              `}>
+              <ActionButton>{buttonLabel}</ActionButton>
+            </div>
           ) : showClientSecret === 'loading' ? (
             <ProgressCircle size="S" aria-label="Loading…" isIndeterminate />
           ) : (
@@ -77,12 +86,37 @@ const ShowCard = ({
                 `}>
                 {showClientSecret?.clientSecret}
               </p>
-              <TooltipTrigger delay={0}>
-                <ActionButton onPress={() => handleSecretCopyCode(showClientSecret?.clientSecret)}  data-cy="copy-client-secret">
-                  <CopyIcon />
-                </ActionButton>
-                <Tooltip>Copy</Tooltip>
-              </TooltipTrigger>
+              <div
+                css={css`
+                  position: relative;
+                `}>
+                <div onMouseEnter={() => setIsHoveringCopyButton(true)}
+                  css={css`
+                    & > button {
+                      border: 1px solid rgba(177, 177, 177) !important;
+                      padding: 4px !important;
+                      border-radius: 2px !important;
+                    }
+                  `}
+                  onMouseLeave={() => setIsHoveringCopyButton(false)} data-cy="copy-client-secret" onClick={() => { handleSecretCopyCode(showClientSecret?.clientSecret) }}>
+                  <ActionButton > <CopyIcon /> </ActionButton>
+                </div>
+                {isHoveringCopyButton && (
+                  <div
+                    className="spectrum-Tooltip spectrum-Tooltip--top is-open"
+                    css={css`
+                      position: absolute;
+                      top: -25px; 
+                      transform: translateX(-50%);
+                      width: 40px;
+                      left: -5px;
+                    `}
+                  >
+                    <div className="spectrum-Tooltip-label">Copy</div>
+                    <div className="spectrum-Tooltip-tip"></div>
+                  </div>
+                )}
+              </div>
             </div>
           )
         )}
@@ -102,16 +136,38 @@ const ShowCard = ({
 
         {!isClientSecret && (
           <div
+            onMouseEnter={() => setIsHoveringCopyButton(true)}
+            onMouseLeave={() => setIsHoveringCopyButton(false)}
             css={css`
               position: relative;
               display: ${isOraganization ? 'none' : 'block'};
             `}>
-            <TooltipTrigger delay={0}>
-              <ActionButton onPress={() => handleSecretCopyCode(value)} data-cy={`${heading}-copyIcon`}>
-                <CopyIcon />
-              </ActionButton>
-              <Tooltip>Copy</Tooltip>
-            </TooltipTrigger>
+            <div data-cy={`${heading}-copyIcon`} onClick={() => { handleSecretCopyCode(value) }}
+              css={css`
+                & > button {
+                  border: 1px solid rgba(177, 177, 177) !important;
+                  padding: 4px !important;
+                  border-radius: 2px !important;
+                }
+              `}
+            >
+              <ActionButton> <CopyIcon /> </ActionButton>
+            </div>
+            {isHoveringCopyButton && (
+              <div
+                className="spectrum-Tooltip spectrum-Tooltip--top is-open"
+                css={css`
+                  position: absolute;
+                  top: -25px; 
+                  transform: translateX(-50%);
+                  width: 40px;
+                  left: -5px;
+                `}
+              >
+                <div className="spectrum-Tooltip-label">Copy</div>
+                <div className="spectrum-Tooltip-tip"></div>
+              </div>
+            )}
           </div>
         )}
       </div>

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Loading.js b/packages/gatsby-theme-aio/src/components/GetCredential/Loading.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { css } from "@emotion/react";
-import { ProgressCircle } from '@adobe/react-spectrum';
+import { ProgressCircle } from '../ProgressCircle';
 
 const Loading = ({
   credentials,