Bugs/remaned components (#1584)

* -- Removed the Subscription Error * renamed NestedAlertContent files * --Fixed Sample code download issues * --fixed the project link to the card after create the credential * --Fixed the checkmark issues on the picker in the return flow project details * Fixed scopes details as dynamic * --Separated the Service and formfields page --------- Co-authored-by: BaskarMitrah <mit44186@adobe.com> Co-authored-by: Manimaran Kottursamy <mit80447@adobe.com>
adobe · Jun 7, 2024 · a0341da · a0341da
1 parent 4922ec4
commit a0341da
Show file tree

Hide file tree

Showing 29 changed files with 499 additions and 606 deletions.
diff --git a/example/src/pages/credential/GetCredentialApiKey.js b/example/src/pages/credential/GetCredentialApiKey.js
@@ -126,8 +126,6 @@ const GetCredentialApiKey = () => {
  </GetCredential.RequestAccess.RequestAccessSide>
  </GetCredential.RequestAccess>
 
- <GetCredential.ErrorCode helpLink="Get help" title="Error code ###" description="Your personal account does not have Developer role permission to access the [Org Name, Inc.] organization in the Adobe Developer Console." buttonLabel="Contact Adobe" buttonLink="https://some_help_link" />
-
  </GetCredential>
 
  )

diff --git a/example/src/pages/credential/GetCredentialOAuthS2s.js b/example/src/pages/credential/GetCredentialOAuthS2s.js
@@ -213,8 +213,6 @@ const GetCredentialOAuthS2s = () => {
  </GetCredential.RequestAccess.RequestAccessSide>
  </GetCredential.RequestAccess>
 
- <GetCredential.ErrorCode helpLink="Get help" title="Error code ###" description="Your personal account does not have Developer role permission to access the [Org Name, Inc.] organization in the Adobe Developer Console." buttonLabel="Contact Adobe" buttonLink="https://some_help_link" />
-
  </GetCredential>
 
  )

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/AccessToken.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/AccessToken.js
@@ -2,11 +2,12 @@ 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 { CopyIcon, getCredentialSecrets, generateToken } from '../FormFields';
+import { CopyIcon } from '../Icons';
 import { Toast } from '../../Toast';
 import GetCredentialContext from '../GetCredentialContext';
+import { generateToken, getCredentialSecrets } from '../Service';
 
-const AccessToken = ({ accessToken, response }) => {
+const AccessToken = ({ accessToken, response, scopesDetails }) => {
 
  const [credentialToken, setCredentialToken] = useState(null);
  const [isCopiedTooltip, setIsCopiedTooltip] = useState(false);
@@ -17,7 +18,7 @@ const AccessToken = ({ accessToken, response }) => {
  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);
+ const tokenVal = await generateToken(clientId, secrets?.clientSecret, scopesDetails);
  setCredentialToken(tokenVal);
  }
  };

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/DevConsoleLink.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/DevConsoleLink.js
@@ -1,7 +1,8 @@
 import React, { useContext } from 'react';
 import { css } from '@emotion/react';
-import { LinkOut, MAX_TABLET_SCREEN_WIDTH, MIN_MOBILE_WIDTH } from '../FormFields';
+import { MAX_TABLET_SCREEN_WIDTH, MIN_MOBILE_WIDTH } from '../FormFields';
 import GetCredentialContext from '../GetCredentialContext';
+import { LinkOut } from '../Icons';
 
 const DevConsoleLink = ({ devConsoleLinkHeading, credentialName, projectId }) => {
 

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,9 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { css } from '@emotion/react';
-import { CopyIcon, getCredentialSecrets } from '../FormFields';
+import { CopyIcon } from '../Icons';
 import { ActionButton, ProgressCircle, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
 import { Toast } from '../../Toast';
 import GetCredentialContext from '../GetCredentialContext';
+import { getCredentialSecrets } from '../Service';
 
 const ShowCard = ({
  heading,

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js b/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { KeyIcon, LinkOut, MAX_TABLET_SCREEN_WIDTH, MIN_MOBILE_WIDTH } from './FormFields';
+import { MAX_TABLET_SCREEN_WIDTH, MIN_MOBILE_WIDTH } from './FormFields';
 import { css } from '@emotion/react';
 import { AccessToken } from './Card/AccessToken';
 import { DevConsoleLink } from './Card/DevConsoleLink';
@@ -19,6 +19,7 @@ import { ReturnScopes } from './Return/ReturnScopes';
 import { ReturnAPIKey } from './Return/ReturnAPIKey';
 import { ReturnAllowedOrigins } from './Return/ReturnAllowedOrigins';
 import { ReturnOrganizationName } from './Return/ReturnOrganizationName';
+import { KeyIcon, LinkOut } from './Icons';
 
 export const CredentialDetailsCard = ({
  credentialName,
@@ -121,13 +122,13 @@ export const CredentialDetailsCard = ({
  flex-direction: column;
  gap: 32px;
  `}>
- {accessToken && <AccessTokenComponent accessToken={accessToken} response={response} />}
+ {accessToken && <AccessTokenComponent accessToken={accessToken} response={response} scopesDetails={scopesDetails} />}
 
  {devConsoleLinkHeading && (
  <DevConsoleLinkComponent
  devConsoleLinkHeading={devConsoleLinkHeading}
  credentialName={credentialName}
- projectId={response?.id}
+ projectId={response?.projectId ? response?.projectId : response?.id}
  />
  )}
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/ErrorCode/SubscriptionError.js b/packages/gatsby-theme-aio/src/components/GetCredential/ErrorCode/SubscriptionError.js
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Form/CredentialName.js b/packages/gatsby-theme-aio/src/components/GetCredential/Form/CredentialName.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { css } from "@emotion/react";
-import { AlertIcon, FormFields } from "../FormFields";
+import { FormFields } from "../FormFields";
+import { AlertIcon } from '../Icons';
 
 const CredentialName = ({ nameProps, isFormValue, formData, handleChange }) => {
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/FormFields.js b/packages/gatsby-theme-aio/src/components/GetCredential/FormFields.js
@@ -68,158 +68,7 @@ export const FormFields = ({ isFormValue, fields, children, formData, isRed }) =
  )
 }
 
-export const AlertIcon = () => {
- return (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- height="18"
- viewBox="0 0 18 18"
- width="18"
- style={{
- position: "absolute",
- right: "10px",
- top: "50%",
- transform: "translateY(-50%)",
- }}
- >
- <rect id="Canvas" fill="rgb(211, 21, 16)" opacity="0" width="18" height="18" />
- <path fill="rgb(211, 21, 16)" d="M8.5635,1.2895.2,16.256A.5.5,0,0,0,.636,17H17.364a.5.5,0,0,0,.436-.744L9.4365,1.2895a.5.5,0,0,0-.873,0ZM10,14.75a.25.25,0,0,1-.25.25H8.25A.25.25,0,0,1,8,14.75v-1.5A.25.25,0,0,1,8.25,13h1.5a.25.25,0,0,1,.25.25Zm0-3a.25.25,0,0,1-.25.25H8.25A.25.25,0,0,1,8,11.75v-6a.25.25,0,0,1,.25-.25h1.5a.25.25,0,0,1,.25.25Z" />
- </svg>
- )
-}
-
 export const MIN_MOBILE_WIDTH = "320px";
 export const MAX_MOBILE_WIDTH = "767px";
 export const MAX_TABLET_SCREEN_WIDTH = "1024px";
 export const MIN_TABLET_SCREEB_WIDTH = "768px";
-
-export const CopyIcon = () => {
- return (
- <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
- <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><rect height="1" rx="0.25" width="1" x="16" y="11" />
- <rect height="1" rx="0.25" width="1" x="16" y="9" />
- <rect height="1" rx="0.25" width="1" x="16" y="7" />
- <rect height="1" rx="0.25" width="1" x="16" y="5" />
- <rect height="1" rx="0.25" width="1" x="16" y="3" />
- <rect height="1" rx="0.25" width="1" x="16" y="1" />
- <rect height="1" rx="0.25" width="1" x="14" y="1" />
- <rect height="1" rx="0.25" width="1" x="12" y="1" />
- <rect height="1" rx="0.25" width="1" x="10" y="1" />
- <rect height="1" rx="0.25" width="1" x="8" y="1" />
- <rect height="1" rx="0.25" width="1" x="6" y="1" />
- <rect height="1" rx="0.25" width="1" x="6" y="3" />
- <rect height="1" rx="0.25" width="1" x="6" y="5" />
- <rect height="1" rx="0.25" width="1" x="6" y="7" />
- <rect height="1" rx="0.25" width="1" x="6" y="9" />
- <rect height="1" rx="0.25" width="1" x="6" y="11" />
- <rect height="1" rx="0.25" width="1" x="8" y="11" />
- <rect height="1" rx="0.25" width="1" x="10" y="11" />
- <rect height="1" rx="0.25" width="1" x="12" y="11" />
- <rect height="1" rx="0.25" width="1" x="14" y="11" />
- <path d="M5,6H1.5a.5.5,0,0,0-.5.5v10a.5.5,0,0,0,.5.5h10a.5.5,0,0,0,.5-.5V13H5.5a.5.5,0,0,1-.5-.5Z" />
- </svg>
- )
-};
-
-export const LinkOut = () => {
- return (
- <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
- <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path d="M16.5,9h-1a.5.5,0,0,0-.5.5V15H3V3H8.5A.5.5,0,0,0,9,2.5v-1A.5.5,0,0,0,8.5,1h-7a.5.5,0,0,0-.5.5v15a.5.5,0,0,0,.5.5h15a.5.5,0,0,0,.5-.5v-7A.5.5,0,0,0,16.5,9Z" />
- <path d="M16.75,1H11.377A.4.4,0,0,0,11,1.4a.392.392,0,0,0,.1175.28l1.893,1.895L9.4895,7.096a.5.5,0,0,0-.00039.70711l.00039.00039.707.707a.5.5,0,0,0,.707,0l3.5215-3.521L16.318,6.882A.39051.39051,0,0,0,16.6,7a.4.4,0,0,0,.4-.377V1.25A.25.25,0,0,0,16.75,1Z" />
- </svg>
- )
-};
-
-export const KeyIcon = () => {
- return (
- <svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 0 18 18" width="32" fill="var(--spectrum-global-color-gray-700)">
- <rect id="Canvas" fill="var(--spectrum-global-color-gray-700)" opacity="0" width="18" height="18" /><path d="M17.761,4.3875,14.53,1.156a.75.75,0,0,0-1.06066-.00034L13.469,1.156,6.5885,8.0365A4.45,4.45,0,0,0,4.5,7.5,4.5,4.5,0,1,0,9,12a4.45,4.45,0,0,0-.5245-2.0665l3.363-3.363,1.87,1.87a.375.375,0,0,0,.53033.00017L14.239,8.4405l1.672-1.672L13.776,4.633l.6155-.6155,2.135,2.1355L17.761,4.918A.37543.37543,0,0,0,17.761,4.3875ZM3.75,14.25a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,3.75,14.25Z" />
- </svg>
- )
-}
-
-export const getOrganizations = async () => {
- try {
-
- const token = window.adobeIMS?.getTokenFromStorage()?.token;
-
- if (token) {
- const response = await fetch("/console/api/accounts?includeOrganizations=true", {
- method: "GET",
- headers: {
- "Content-Type": "application/json",
- "Authorization": "Bearer " + token,
- "x-api-key": window?.adobeIMS?.adobeIdData?.client_id
- }
- });
-
- if (!response.ok) {
- throw new Error('Could not fetch accounts');
- }
-
- const accountsResult = await response.json();
-
- const organizations = []
- accountsResult.accounts.forEach(account => {
- if (account.organizations?.length > 0) {
- account.organizations.forEach(org => {
- organizations.push({
- ...org,
- accountId: account.id,
- accountType: account.type
- })
- });
- }
- });
-
- organizations.sort((a, b) => a.name.localeCompare(b.name));
-
- return organizations;
- }
-
- } catch (error) {
- console.error('Error:', error);
- }
-}
-
-export const getCredentialSecrets = async (response, selectedOrganization) => {
-
- let projectId=response?.workspaces ? response?.workspaces[0]?.credentials[0]?.id : response?.id
- const secretsUrl = `/console/api/organizations/${selectedOrganization.code}/integrations/${projectId}/secrets`;
- const token = window.adobeIMS?.getTokenFromStorage()?.token;
- const secretsResponse = await fetch(secretsUrl, {
- headers: {
- 'Content-Type': 'application/json',
- Authorization: `Bearer ${token}`,
- 'x-api-key': window.adobeIMS?.adobeIdData?.client_id,
- },
- });
-
- const secrets = await secretsResponse.json();
-
- const secret = secrets.client_secrets[0]?.client_secret;
-
- return { clientId: secrets?.client_id, clientSecret: secret }
-
-};
-
-export const generateToken = async (apikey, secret) => {
- const options = {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/x-www-form-urlencoded',
- },
- body: new URLSearchParams({
- client_id: apikey,
- client_secret: secret,
- grant_type: 'client_credentials',
- scope: 'openid, AdobeID, read_organizations, ff_apis, firefly_api',
- }),
- };
-
- const tokenResponse = await fetch('/ims/token/v3', options);
- const tokenJson = await tokenResponse.json();
-
- return (tokenJson.access_token)
-
-}