feat: added get credential pages

gatsby-config.js

@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+
+
 module.exports = {
   siteMetadata: {
     pages: [
@@ -224,5 +226,6 @@ module.exports = {
     ]
   },
   plugins: [`@adobe/gatsby-theme-aio`],
-  pathPrefix: process.env.PATH_PREFIX || "/developer-console/docs/"
+  pathPrefix: process.env.PATH_PREFIX || "/developer-console/docs/",
+
 };

package.json

@@ -12,8 +12,9 @@
     "url": "https://github.com/icaraps"
   },
   "dependencies": {
-    "@adobe/gatsby-theme-aio": "^4.14.4",
+    "@adobe/gatsby-theme-aio": "^4.14.12",
     "gatsby": "4.22.0",
+    "http-proxy-middleware": "^3.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

src/@adobe/gatsby-aio-theme/components/GetCredential/Card/AccessToken.js

@@ -0,0 +1,142 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { css } from '@emotion/react';
+import { ProgressCircle } from "@adobe/gatsby-theme-aio/src/components/ProgressCircle";
+import { Button } from "@adobe/gatsby-theme-aio/src/components/Button";
+import { CopyIcon } from '../Icons';
+import { Toast } from '@adobe/gatsby-theme-aio/src/components/Toast';
+import GetCredentialContext from '../GetCredentialContext';
+import { generateToken, getCredentialSecrets } from '../Service';
+import { ActionButton } from '@adobe/gatsby-theme-aio/src/components/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;
+      const tokenVal = await generateToken(clientId, secrets?.clientSecret, scopesDetails);
+      navigator.clipboard.writeText(tokenVal);
+      setCredentialToken(tokenVal);
+    }
+  };
+
+  const handleSecretCopyCode = (copiedVal) => {
+    setIsCopiedTooltip(true);
+    navigator.clipboard.writeText(copiedVal);
+    setTimeout(() => setIsCopiedTooltip(false), 1000); // Hide tooltip after 1 second
+  };
+
+  useEffect(() => {
+    setCredentialToken(null);
+  }, [response]);
+
+  return (
+    <>
+      {accessToken && (
+        <div
+          css={css`
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+          `}>
+          {accessToken?.heading && (
+            <h4 className="spectrum-Heading spectrum-Heading--sizeS">{accessToken?.heading}</h4>
+          )}
+          {credentialToken === null ? (
+            accessToken?.buttonLabel && (
+              <div
+                data-cy="generate-token"
+                onClick={() => handleGenerateToken()}
+                css={css`
+                  width: fit-content;
+                  & > button {
+                    background-color : #0265dc !important;
+                  }
+                `}>
+                <Button variant="accent" style="fill">
+                  {accessToken?.buttonLabel}
+                </Button>
+              </div>
+            )
+          ) : (
+            credentialToken === 'loading' ? (
+              <ProgressCircle size="S" aria-label="Loading…" isIndeterminate />
+            ) : (
+              <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`
+                    position: relative;
+                    & > button {
+                      border: 1px solid rgba(177, 177, 177) !important;
+                      padding: 4px !important;
+                      border-radius: 2px !important;
+                    }
+                  `}>
+                  <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 >
+      )}
+      {
+        isCopiedTooltip && (
+          <Toast
+            variant="success"
+            message="Copied to clipboard"
+            disable={1000}
+            customDisableFunction={setIsCopiedTooltip}
+          />
+        )
+      }
+    </>
+  );
+};
+
+export { AccessToken };

src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardAPIKey.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import ShowCard from './ShowCard';
+
+const CardAPIKey = ({ cardAPIKey, apiKey }) => {
+  return (
+    <ShowCard heading={cardAPIKey?.heading} value={apiKey} />
+  )
+}
+
+export { CardAPIKey };

src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardAllowedOrigins.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import ShowCard from './ShowCard';
+
+const CardAllowedOrigins = ({ cardAllowedOrigins, allowedOrigins }) => {
+  return (
+    <ShowCard heading={cardAllowedOrigins?.heading} value={allowedOrigins} />
+  )
+}
+
+export { CardAllowedOrigins };

src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardClientDetails.js

@@ -0,0 +1,82 @@
+import React, { useContext } from 'react';
+import { css } from "@emotion/react";
+import { CardAPIKey } from './CardAPIKey';
+import { CardClientId } from './CardClientId';
+import { CardAllowedOrigins } from './CardAllowedOrigins';
+import { CardClientSecret } from './CardClientSecret';
+import { CardOrganizationName } from './CardOrganizationName';
+import { CardScopes } from './CardScopes';
+import { CardImsOrgID } from './CardImsOrgID';
+import GetCredentialContext from '../GetCredentialContext';
+
+const CardClientDetails = ({
+  clientDetails,
+  clientIdDetails,
+  clientSecretDetails,
+  organizationDetails,
+  scopesDetails,
+  apiKeyDetails,
+  allowedOriginsDetails,
+  organizationName,
+  allowedOrigins,
+  response,
+  imsOrgID
+}) => {
+
+  const { selectedOrganization } = useContext(GetCredentialContext);
+
+  const splitedOrderBy = clientDetails?.orderBy ? clientDetails?.orderBy?.split(',') : [];
+
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+      `}>
+      <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
+
+      {
+        splitedOrderBy?.length > 0 ?
+          <>
+            {splitedOrderBy?.map((list) => {
+              if (list === "APIKey") {
+                return apiKeyDetails && <CardAPIKey cardClientDetails={clientDetails} cardAPIKey={apiKeyDetails} apiKey={response?.['apiKey']} />
+              }
+              if (list === "AllowedOrigins") {
+                return allowedOrigins && <CardAllowedOrigins cardClientDetails={clientDetails} cardAllowedOrigins={allowedOrigins} allowedOrigins={allowedOriginsDetails} />
+              }
+              if (list === "ImsOrgID") {
+                return imsOrgID && <CardImsOrgID cardClientDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
+              }
+              if (list === "OrganizationName") {
+                return organizationDetails && <CardOrganizationName cardClientDetails={clientDetails} cardOrganizationName={organizationDetails} organization={organizationName?.name} />
+              }
+              if (list === "ClientId") {
+                return clientIdDetails && <CardClientId cardClientDetails={clientDetails} cardClientId={clientIdDetails} clientId={response?.['apiKey']} />
+              }
+              if (list === "ClientSecret") {
+                return clientSecretDetails && <CardClientSecret cardClientDetails={clientDetails} cardClientSecret={clientSecretDetails} response={response} />
+              }
+              if (list === "Scopes") {
+                return scopesDetails && <CardScopes cardClientDetails={clientDetails} cardScopes={scopesDetails} />
+              }
+            })}
+          </>
+          :
+          <>
+            {apiKeyDetails && (<CardAPIKey cardClientDetails={clientDetails} cardAPIKey={apiKeyDetails} apiKey={response?.['apiKey']} />)}
+            {clientIdDetails && (<CardClientId cardClientDetails={clientDetails} cardClientId={clientIdDetails} clientId={response?.['apiKey']} />)}
+            {allowedOrigins && (<CardAllowedOrigins cardClientDetails={clientDetails} cardAllowedOrigins={allowedOrigins} allowedOrigins={allowedOriginsDetails} />)}
+            {clientSecretDetails && (<CardClientSecret cardClientDetails={clientDetails} cardClientSecret={clientSecretDetails} response={response} />)}
+            {organizationDetails && (<CardOrganizationName cardClientDetails={clientDetails} cardOrganizationName={organizationDetails} organization={organizationName?.name} />)}
+            {scopesDetails && <CardScopes cardClientDetails={clientDetails} cardScopes={scopesDetails} />}
+            {imsOrgID && (<CardImsOrgID cardClientDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />)}
+          </>
+      }
+
+    </div>
+  );
+};
+
+export { CardClientDetails };

src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardClientId.js

@@ -0,0 +1,10 @@
+  import React from 'react'
+  import ShowCard from './ShowCard'
+
+  const CardClientId = ({ cardClientId, clientId }) => {
+    return (
+      <ShowCard heading={cardClientId?.heading} value={clientId} />
+    )
+  }
+
+  export { CardClientId }

src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardClientSecret.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import ShowCard from './ShowCard';
+
+const CardClientSecret = ({ cardClientSecret, response }) => {
+  return (
+    <ShowCard heading={cardClientSecret?.heading} isClientSecret buttonLabel={cardClientSecret?.buttonLabel} response={response} />
+  )
+}
+
+export { CardClientSecret };

src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardImsOrgID.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ShowCard from './ShowCard';
+
+const CardImsOrgID = ({ cardImsOrgID, imsOrgId }) => {
+  return <ShowCard heading={cardImsOrgID?.heading} value={imsOrgId} />;
+};
+
+export { CardImsOrgID };

src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardOrganizationName.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import ShowCard from './ShowCard';
+
+const CardOrganizationName = ({ cardOrganizationName, organization }) => {
+  return (
+    <ShowCard heading={cardOrganizationName?.heading} value={organization} isOraganization />
+  )
+}
+
+export { CardOrganizationName };

src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardScopes.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ShowCard from './ShowCard';
+
+const CardScopes = ({ cardScopes }) => {
+  return (
+    <ShowCard heading={cardScopes?.heading} value={cardScopes?.scope} />
+  )
+}
+export { CardScopes };

src/@adobe/gatsby-aio-theme/components/GetCredential/Card/DevConsoleLink.js

@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+import { css } from '@emotion/react';
+import { MAX_TABLET_SCREEN_WIDTH, MIN_MOBILE_WIDTH } from '../FormFields';
+import GetCredentialContext from '../GetCredentialContext';
+import { LinkOut } from '../Icons';
+
+const DevConsoleLink = ({ devConsoleLinkHeading, credentialName, projectId }) => {
+
+  const { selectedOrganization } = useContext(GetCredentialContext);
+
+  return (
+    <>
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        `}>
+        {devConsoleLinkHeading && (
+          <h4 className="spectrum-Heading spectrum-Heading--sizeS">
+            {devConsoleLinkHeading}
+          </h4>
+        )}
+
+        <a
+          css={css`
+            display: flex;
+          `}
+          target='_blank'
+          href={`/console/projects/${selectedOrganization?.id}/${projectId}/overview`}
+          data-cy="credentialName-link">
+          <div>
+            <p
+              className="spectrum-Body spectrum-Body--sizeS"
+              css={css`
+                font-family: Source Code Pro, Monaco, monospace;
+                white-space: normal;
+                overflow-wrap: anywhere;
+                max-width: 300px;
+                color: #0265dc;
+              `}>
+              {credentialName}
+            </p>
+          </div>
+          <div
+            css={css`
+              margin-left:10px;
+              @media screen and (min-width:${MIN_MOBILE_WIDTH}) and (max-width:${MAX_TABLET_SCREEN_WIDTH}){
+                display:none;
+              }
+            }`}>
+            <LinkOut />
+          </div>
+        </a>
+      </div>
+    </>
+  );
+};
+
+export { DevConsoleLink };