Bug : Update the credential card dynamically (#1618)

* Bug : Update the credential card dynamically * --Fixed smoke fail issues * --Removed console
adobe · Sep 13, 2024 · 627e88e · 627e88e
1 parent e903adb
commit 627e88e
Show file tree

Hide file tree

Showing 18 changed files with 145 additions and 81 deletions.
diff --git a/cypress/e2e/get-credentials.cy.js b/cypress/e2e/get-credentials.cy.js
@@ -18,21 +18,24 @@ function checkRequestAccessEdgeCase() {
 
 function getIframeBody() {
   return cy.get('iframe[data-cy="request-access-iframe"]')
-  .its('0.contentDocument.body').should('not.be.empty')
-  .then(cy.wrap);
+    .its('0.contentDocument.body').should('not.be.empty')
+    .then(cy.wrap);
 }
 
 function checkRequestAccess() {
   cy.get('body').then(($body) => {
     // if the request is not already sent, send the request
     if ($body.find('[data-cy="request-access-button"]').length > 0) {
       cy.get('[data-cy="request-access-button"]').click();
-      getIframeBody().find('button[data-testid="send-request-button"]').should('exist').click();
+
+      getIframeBody().find('h3[data-testid="title"]').invoke('text').then((text) => {
+        if (text.trim() !== 'Your request is on its way') {
+          getIframeBody().find('button[data-testid="send-request-button"]').should('exist').click();
+        }
+      });
       getIframeBody().find('button[data-testid="close-button"]').should('exist').click();
     }
   });
-  cy.get('button[data-cy="request-info"]').should('be.visible').should('be.enabled').click();
-  cy.get('body', { timeout: 1000 }).click();
 };
 
 function checkReturnFlow(credentialType) {
@@ -84,7 +87,7 @@ function checkOAuthS2S() {
 }
 
 function checkCredential(credentialType) {
-  switch(credentialType) {
+  switch (credentialType) {
     case API_KEY:
       checkAPIKey();
       break;

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAPIKey.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAPIKey.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardAPIKey = ({ cardAPIKey, apiKey }) => {
+const CardAPIKey = ({ val: { heading, apiKey } }) => {
   return (
-    <ShowCard heading={cardAPIKey?.heading} value={apiKey} />
+    heading && <ShowCard heading={heading} value={apiKey} />
   )
 }
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAllowedOrigins.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAllowedOrigins.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardAllowedOrigins = ({ cardAllowedOrigins, allowedOrigins }) => {
+const CardAllowedOrigins = ({ val: { heading, allowedOrigins } }) => {
   return (
-    <ShowCard heading={cardAllowedOrigins?.heading} value={allowedOrigins} />
+    heading && <ShowCard heading={heading} value={allowedOrigins} />
   )
 }
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js
@@ -9,6 +9,16 @@ import { CardScopes } from './CardScopes';
 import { CardImsOrgID } from './CardImsOrgID';
 import GetCredentialContext from '../GetCredentialContext';
 
+const COMPONENT_MAP = {
+  "CardAPIKey": CardAPIKey,
+  "CardAllowedOrigins": CardAllowedOrigins,
+  "CardClientId": CardClientId,
+  "CardClientSecret": CardClientSecret,
+  "CardOrganizationName": CardOrganizationName,
+  "CardScopes": CardScopes,
+  "CardImsOrgID": CardImsOrgID
+};
+
 const CardClientDetails = ({
   clientDetails,
   clientIdDetails,
@@ -21,10 +31,42 @@ const CardClientDetails = ({
   allowedOrigins,
   response,
   imsOrgID,
+  myCredentialFields
 }) => {
 
   const { selectedOrganization } = useContext(GetCredentialContext);
 
+  const cardCompDetails = {
+    "CardAPIKey": {
+      heading: apiKeyDetails?.heading,
+      apiKey: response?.['apiKey']
+    },
+    "CardAllowedOrigins": {
+      heading: allowedOrigins?.heading,
+      allowedOrigins: allowedOriginsDetails,
+    },
+    "CardClientId": {
+      heading: clientIdDetails?.heading,
+      clientId: response?.['apiKey']
+    },
+    "CardClientSecret": {
+      cardClientSecret: clientSecretDetails,
+      response
+    },
+    "CardOrganizationName": {
+      heading: organizationDetails?.heading,
+      organization: organizationName?.name
+    },
+    "CardScopes": {
+      heading: scopesDetails?.heading,
+      scope: scopesDetails?.scope
+    },
+    "CardImsOrgID": {
+      heading: imsOrgID?.heading,
+      imsOrgId: selectedOrganization?.code
+    }
+  };
+
   return (
     <div
       css={css`
@@ -33,45 +75,10 @@ const CardClientDetails = ({
         gap: 32px;
       `}>
       <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
-      {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} />
-      )}
+      {myCredentialFields?.[CardClientDetails]?.children.map(({ type }, index) => {
+        const Component = COMPONENT_MAP[type?.name];
+        return Component ? <Component key={index} val={cardCompDetails[type?.name]} /> : null;
+      })}
     </div>
   );
 };

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientId.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientId.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard'
 
-const CardClientId = ({ cardClientId, clientId }) => {
+const CardClientId = ({ val: { heading, clientId } }) => {
   return (
-    <ShowCard heading={cardClientId?.heading} value={clientId} />
+    heading && <ShowCard heading={heading} value={clientId} />
   )
 }
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientSecret.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientSecret.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardClientSecret = ({ cardClientSecret, response }) => {
+const CardClientSecret = ({ val : { cardClientSecret, response }}) => {
   return (
-    <ShowCard heading={cardClientSecret?.heading} isClientSecret buttonLabel={cardClientSecret?.buttonLabel} response={response} />
+    cardClientSecret && <ShowCard heading={cardClientSecret?.heading} isClientSecret buttonLabel={cardClientSecret?.buttonLabel} response={response} />
   )
 }
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ShowCard from './ShowCard';
 
-const CardImsOrgID = ({ cardImsOrgID, imsOrgId }) => {
-  return <ShowCard heading={cardImsOrgID?.heading} value={imsOrgId} />;
+const CardImsOrgID = ({ val: { heading, imsOrgId } }) => {
+  return heading && <ShowCard heading={heading} value={imsOrgId} />
 };
 
 export { CardImsOrgID };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardOrganizationName.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardOrganizationName.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardOrganizationName = ({ cardOrganizationName, organization }) => {
+const CardOrganizationName = ({ val: { heading, organization } }) => {
   return (
-    <ShowCard heading={cardOrganizationName?.heading} value={organization} isOraganization />
+    heading && <ShowCard heading={heading} value={organization} isOraganization />
   )
 }
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardScopes.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardScopes.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardScopes = ({ cardScopes }) => {
+const CardScopes = ({ val: { heading, scope } }) => {
   return (
-    <ShowCard heading={cardScopes?.heading} value={cardScopes?.scope} />
+    heading && <ShowCard heading={heading} value={scope} />
   )
 }
 export { CardScopes };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js b/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
@@ -148,6 +148,8 @@ export const CredentialDetailsCard = ({
                 allowedOrigins={allowedOrigins}
                 response={response}
                 imsOrgID={imsOrgID}
+                returnFields={returnFields}
+                myCredentialFields={myCredentialFields}
               />
             )}
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/MyCredential.js b/packages/gatsby-theme-aio/src/components/GetCredential/MyCredential.js
@@ -32,6 +32,7 @@ const MyCredential = ({
   credentialProps?.[MyCredential]?.children.forEach(({ type, props }) => {
     myCredentialFields[type] = props;
     if (props.children && type === CardClientDetails) {
+      myCredentialFields[type] = props;
       props?.children?.forEach(({ type, props }) => {
         myCredentialFields[type] = props;
       });

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAPIKey.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAPIKey.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnAPIKey = ({ returnCredentialDetails , returnAPIKey, apiKey }) => {
+const ReturnAPIKey = ({ val: { heading, apiKey } }) => {
   return (
-    <ShowCard heading={returnAPIKey?.heading} value={apiKey} />
+    heading && <ShowCard heading={heading} value={apiKey} />
   )
 }
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAllowedOrigins.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAllowedOrigins.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnAllowedOrigins = ({ returnAllowedOrigins, allowedOrigins }) => {
+const ReturnAllowedOrigins = ({ val: { allowedOrigins, heading } }) => {
   return (
-    <ShowCard heading={returnAllowedOrigins?.heading} value={allowedOrigins} />
+    heading && <ShowCard heading={heading} value={allowedOrigins} />
   )
 }
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientId.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientId.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from '../Card/ShowCard';
 
-const ReturnClientId = ({ returnClientId, clientId }) => {
+const ReturnClientId = ({ val: { heading, clientId } }) => {
   return (
-    <ShowCard heading={returnClientId?.heading} value={clientId} />
+    heading && <ShowCard heading={heading} value={clientId} />
   )
 }
 export { ReturnClientId };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientSecret.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientSecret.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnClientSecret = ({ returnClientSecret, response }) => {
+const ReturnClientSecret = ({ val: { returnClientSecret, response } }) => {
   return (
-    <ShowCard heading={returnClientSecret?.heading} isClientSecret buttonLabel={returnClientSecret?.buttonLabel} response={response} />
+    returnClientSecret && <ShowCard heading={returnClientSecret?.heading} isClientSecret buttonLabel={returnClientSecret?.buttonLabel} response={response} />
   )
 }
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js
@@ -9,26 +9,77 @@ import { ReturnScopes } from './ReturnScopes';
 import GetCredentialContext from '../GetCredentialContext';
 import { CardImsOrgID } from '../Card/CardImsOrgID';
 
-const ReturnCredentialDetails = ({ clientDetails, clientIdDetails, clientSecretDetails, organizationDetails, scopesDetails, apiKeyDetails, allowedOriginsDetails, organizationName, allowedOrigins, response, imsOrgID }) => {
+const COMPONENT_MAP = {
+  "ReturnAPIKey": ReturnAPIKey,
+  "ReturnAllowedOrigins": ReturnAllowedOrigins,
+  "ReturnClientId": ReturnClientId,
+  "ReturnClientSecret": ReturnClientSecret,
+  "ReturnOrganizationName": ReturnOrganizationName,
+  "ReturnScopes": ReturnScopes,
+  "CardImsOrgID": CardImsOrgID
+};
+
+const ReturnCredentialDetails = ({
+  clientDetails,
+  apiKeyDetails,
+  clientIdDetails,
+  clientSecretDetails,
+  organizationDetails,
+  scopesDetails,
+  allowedOriginsDetails,
+  organizationName,
+  allowedOrigins,
+  response,
+  imsOrgID,
+  returnFields
+}) => {
 
   const { selectedOrganization } = useContext(GetCredentialContext);
 
+  const returnCompDetails = {
+    "ReturnAPIKey": {
+      heading: apiKeyDetails?.heading,
+      apiKey: response?.workspaces[0]?.credentials[0]?.clientId,
+    },
+    "ReturnAllowedOrigins": {
+      heading: allowedOrigins?.heading,
+      allowedOrigins: allowedOriginsDetails,
+    },
+    "ReturnClientId": {
+      heading: clientIdDetails?.heading,
+      clientId: response?.workspaces[0]?.credentials[0]?.clientId,
+    },
+    "ReturnClientSecret": {
+      returnClientSecret: clientSecretDetails,
+      response
+    },
+    "ReturnOrganizationName": {
+      heading: organizationDetails?.heading,
+      organization: organizationName?.name
+    },
+    "ReturnScopes": {
+      heading: scopesDetails?.heading,
+      scope: scopesDetails?.scope
+    },
+    "CardImsOrgID": {
+      heading: imsOrgID?.heading,
+      imsOrgId: selectedOrganization?.code
+    }
+  };
+
   return (
     <div css={css`
         display : flex;
         flex-direction : column;  
         gap: 32px;
       `}>
       <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
-      {apiKeyDetails && <ReturnAPIKey returnCredentialDetails={clientDetails} returnAPIKey={apiKeyDetails} apiKey={response?.workspaces[0]?.credentials[0]?.clientId} />}
-      {allowedOrigins && <ReturnAllowedOrigins returnCredentialDetails={clientDetails} allowedOrigins={allowedOriginsDetails} returnAllowedOrigins={allowedOrigins} />}
-      {clientIdDetails && <ReturnClientId returnCredentialDetails={clientDetails} returnClientId={clientIdDetails} clientId={response?.workspaces[0]?.credentials[0]?.clientId} />}
-      {clientSecretDetails && <ReturnClientSecret returnCredentialDetails={clientDetails} returnClientSecret={clientSecretDetails} response={response} />}
-      {organizationDetails && <ReturnOrganizationName returnCredentialDetails={clientDetails} returnOrganizationName={organizationDetails} organization={organizationName?.name} />}
-      {scopesDetails && <ReturnScopes returnCredentialDetails={clientDetails} returnScopes={scopesDetails} />}
-      {imsOrgID && <CardImsOrgID returnCredentialDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />}
+      {returnFields?.[ReturnCredentialDetails]?.children.map(({ type }, index) => {
+        const Component = COMPONENT_MAP[type?.name];
+        return Component ? <Component key={index} val={returnCompDetails[type?.name]} /> : null;
+      })}
     </div>
-  )
-}
+  );
+};
 
 export { ReturnCredentialDetails };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnOrganizationName.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnOrganizationName.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnOrganizationName = ({ returnOrganizationName, organization }) => {
+const ReturnOrganizationName = ({ val: { heading, organization } }) => {
   return (
-    <ShowCard heading={returnOrganizationName?.heading} value={organization} isOraganization />
+    heading && <ShowCard heading={heading} value={organization} isOraganization />
   )
 }