From 46c3b8b770c8de7876be79de173ea53b81c110ff Mon Sep 17 00:00:00 2001
From: BaskarMitrah <113968869+BaskarMitrah@users.noreply.github.com>
Date: Thu, 15 Aug 2024 03:44:01 +0530
Subject: [PATCH] feat: Ims Org ID (#1611)

* --Added Ims Org ID in the credential card

* --Added test case for the Ims Org ID & Removed Duplicate file
---
 cypress/e2e/get-credentials.cy.js             |  5 ++
 .../pages/credential/GetCredentialApiKey.js   |  2 +
 .../pages/credential/GetCredentialOAuthS2s.js |  2 +
 .../GetCredential/Card/CardClientDetails.js   | 78 +++++++++++++++----
 .../GetCredential/Card/CardImsOrgID.js        |  8 ++
 .../GetCredential/CredentialDetailsCard.js    |  6 +-
 .../GetCredential/PreviousProject.js          |  2 +-
 .../Return/ReturnCredentialDetails.js         | 13 +++-
 .../src/components/GetCredential/index.js     |  3 +
 9 files changed, 99 insertions(+), 20 deletions(-)
 create mode 100644 packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js

diff --git a/cypress/e2e/get-credentials.cy.js b/cypress/e2e/get-credentials.cy.js
index bc95759237..8827889868 100644
--- a/cypress/e2e/get-credentials.cy.js
+++ b/cypress/e2e/get-credentials.cy.js
@@ -65,6 +65,10 @@ function checkAPIKey() {
 
   // verify allowed domains copy button is clickable
   cy.get('[data-cy="Allowed domains-copyIcon"]').should('be.visible');
+
+  // verify IMS Organization ID copy button is clickable
+  cy.get('[data-cy="IMS Organization ID-copyIcon"]').should('exist');
+
 }
 
 function checkOAuthS2S() {
@@ -75,6 +79,7 @@ function checkOAuthS2S() {
   cy.get('[data-cy="retrieve-client-secret"]').should('be.visible');
   // cy.get('button[data-cy="copy-client-secret"]').should('exist');
   cy.get('[data-cy="Scopes-copyIcon"]').should('exist');
+  cy.get('[data-cy="IMS Organization ID-copyIcon"]').should('exist');
   cy.contains('openid, AdobeID, read_organizations, firefly_api, ff_apis').should('exist');
 }
 
diff --git a/example/src/pages/credential/GetCredentialApiKey.js b/example/src/pages/credential/GetCredentialApiKey.js
index c967a41b77..0c4e1b1eb0 100644
--- a/example/src/pages/credential/GetCredentialApiKey.js
+++ b/example/src/pages/credential/GetCredentialApiKey.js
@@ -63,6 +63,7 @@ const GetCredentialApiKey = () => {
           <GetCredential.Card.CredentialDetails.APIKey heading="API Key" />
           <GetCredential.Card.CredentialDetails.AllowedOrigins heading="Allowed domains" />
           <GetCredential.Card.CredentialDetails.OrganizationName heading="Organization" />
+          <GetCredential.Card.CredentialDetails.ImsOrgID heading="IMS Organization ID" />
         </GetCredential.Card.CredentialDetails>
 
       </GetCredential.Card>
@@ -83,6 +84,7 @@ const GetCredentialApiKey = () => {
           <GetCredential.Return.CredentialDetails.APIKey heading="API Key" />
           <GetCredential.Return.CredentialDetails.AllowedOrigins heading="Allowed domains" />
           <GetCredential.Return.CredentialDetails.OrganizationName heading="Organization" />
+          <GetCredential.Return.CredentialDetails.ImsOrgID heading="IMS Organization ID" />
         </GetCredential.Return.CredentialDetails>
 
         <GetCredential.Return.ProjectsDropdown label="Projects" subHeading="Only your projects that contain credentials are shown" />
diff --git a/example/src/pages/credential/GetCredentialOAuthS2s.js b/example/src/pages/credential/GetCredentialOAuthS2s.js
index 78fbc5af11..47b190015f 100644
--- a/example/src/pages/credential/GetCredentialOAuthS2s.js
+++ b/example/src/pages/credential/GetCredentialOAuthS2s.js
@@ -110,6 +110,7 @@ const GetCredentialOAuthS2s = () => {
           <GetCredential.Card.CredentialDetails.ClientId heading="ClientId" />
           <GetCredential.Card.CredentialDetails.ClientSecret heading="Client Secret" buttonLabel="Retrieve and copy client secret" />
           <GetCredential.Card.CredentialDetails.Scopes heading="Scopes" scope="openid, AdobeID, read_organizations, firefly_api, ff_apis" />
+          <GetCredential.Card.CredentialDetails.ImsOrgID heading="IMS Organization ID" />
         </GetCredential.Card.CredentialDetails>
 
       </GetCredential.Card>
@@ -130,6 +131,7 @@ const GetCredentialOAuthS2s = () => {
           <GetCredential.Return.CredentialDetails.ClientId heading="ClientId" />
           <GetCredential.Return.CredentialDetails.ClientSecret heading="Client Secret" buttonLabel="Retrieve and copy client secret" />
           <GetCredential.Return.CredentialDetails.Scopes heading="Scopes" scope="openid, AdobeID, read_organizations, firefly_api, ff_apis" />
+          <GetCredential.Return.CredentialDetails.ImsOrgID heading="IMS Organization ID" />
         </GetCredential.Return.CredentialDetails>
 
         <GetCredential.Return.ProjectsDropdown label="Projects" subHeading="Only your projects that contain credentials are shown" />
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js
index 3e18880a72..f7b47b2b5c 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react';
 import { css } from "@emotion/react";
 import { CardAPIKey } from './CardAPIKey';
 import { CardClientId } from './CardClientId';
@@ -6,24 +6,74 @@ 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 }) => {
+const CardClientDetails = ({
+  clientDetails,
+  clientIdDetails,
+  clientSecretDetails,
+  organizationDetails,
+  scopesDetails,
+  apiKeyDetails,
+  allowedOriginsDetails,
+  organizationName,
+  allowedOrigins,
+  response,
+  imsOrgID,
+}) => {
+
+  const { selectedOrganization } = useContext(GetCredentialContext);
 
   return (
-    <div css={css`
-          display : flex;
-          flex-direction : column;
-          gap: 32px;
-        `}>
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        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} />}
+      {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 };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js
new file mode 100644
index 0000000000..7b42d88442
--- /dev/null
+++ b/packages/gatsby-theme-aio/src/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 };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js b/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
index 7b07e22ae5..0474813cbf 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
@@ -20,6 +20,7 @@ import { ReturnAPIKey } from './Return/ReturnAPIKey';
 import { ReturnAllowedOrigins } from './Return/ReturnAllowedOrigins';
 import { ReturnOrganizationName } from './Return/ReturnOrganizationName';
 import { KeyIcon, LinkOut } from './Icons';
+import { CardImsOrgID } from './Card/CardImsOrgID';
 
 export const CredentialDetailsCard = ({
   credentialName,
@@ -39,7 +40,7 @@ export const CredentialDetailsCard = ({
   returnFields
 }) => {
 
-  let accessToken, devConsoleLinkHeading, clientDetails, clientIdDetails, clientSecretDetails, organizationDetails, scopesDetails, apiKeyDetails, allowedOrigins
+  let accessToken, devConsoleLinkHeading, clientDetails, clientIdDetails, clientSecretDetails, organizationDetails, scopesDetails, apiKeyDetails, allowedOrigins , imsOrgID;
   if (myCredentialFields) {
     accessToken = myCredentialFields[AccessToken];
     devConsoleLinkHeading = myCredentialFields[DevConsoleLink]?.heading;
@@ -50,6 +51,7 @@ export const CredentialDetailsCard = ({
     scopesDetails = myCredentialFields[CardScopes];
     apiKeyDetails = myCredentialFields[CardAPIKey];
     allowedOrigins = myCredentialFields[CardAllowedOrigins];
+    imsOrgID = myCredentialFields?.[CardImsOrgID];
   }
   else if (returnFields) {
     accessToken = returnFields?.[ReturnAccessToken];
@@ -61,6 +63,7 @@ export const CredentialDetailsCard = ({
     apiKeyDetails = returnFields?.[ReturnAPIKey];
     organizationDetails = returnFields?.[ReturnOrganizationName];
     allowedOrigins = returnFields?.[ReturnAllowedOrigins];
+    imsOrgID = returnFields?.[CardImsOrgID];
   }
 
   return (
@@ -144,6 +147,7 @@ export const CredentialDetailsCard = ({
                 organizationName={organizationName}
                 allowedOrigins={allowedOrigins}
                 response={response}
+                imsOrgID={imsOrgID}
               />
             )}
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/PreviousProject.js b/packages/gatsby-theme-aio/src/components/GetCredential/PreviousProject.js
index 60ccb5c118..02d676635d 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/PreviousProject.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/PreviousProject.js
@@ -27,7 +27,7 @@ const PreviousProject = ({ returnFields, productList }) => {
   const projectDetails = previousProjectsDetails?.[selectedIndex];
   const manageProps = returnProps[PreviousProject];
 
-  const allowedDomains = projectDetails?.workspaces[0]?.credentials[0]?.metadata?.["adobeid.domain"];
+  const allowedDomains = projectDetails?.workspaces[0]?.credentials[0]?.metadata?.["adobeid.domain"];  
 
   return (
     <>
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js
index a077629426..28d1fa6f33 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { css } from '@emotion/react';
 import { ReturnAPIKey } from './ReturnAPIKey';
 import { ReturnAllowedOrigins } from './ReturnAllowedOrigins';
@@ -6,13 +6,17 @@ import { ReturnClientId } from './ReturnClientId';
 import { ReturnClientSecret } from './ReturnClientSecret';
 import { ReturnOrganizationName } from './ReturnOrganizationName';
 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 { selectedOrganization } = useContext(GetCredentialContext);
 
-const ReturnCredentialDetails = ({ clientDetails, clientIdDetails, clientSecretDetails, organizationDetails, scopesDetails, apiKeyDetails, allowedOriginsDetails, organizationName, allowedOrigins, response }) => {
-  
   return (
     <div css={css`
         display : flex;
-        flex-direction : column;
+        flex-direction : column;  
         gap: 32px;
       `}>
       <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
@@ -22,6 +26,7 @@ const ReturnCredentialDetails = ({ clientDetails, clientIdDetails, clientSecretD
       {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} />}
     </div>
   )
 }
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/index.js b/packages/gatsby-theme-aio/src/components/GetCredential/index.js
index 521b9fdf52..997f8d1fa1 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/index.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/index.js
@@ -53,6 +53,7 @@ import { OrganizationAccessDetailsType1User } from './RequestAccess/Organization
 import { OrganizationAccessDetailsNotMember } from './RequestAccess/OrganizationAccessDetailsNotMember';
 import { OrganizationAccessDetailsNotSignUp } from './RequestAccess/OrganizationAccessDetailsNotSignUp';
 import { getOrganizations } from './Service';
+import { CardImsOrgID } from './Card/CardImsOrgID';
 
 const LocalStorageKey = 'OrgInfo';
 
@@ -373,6 +374,7 @@ GetCredential.Card.CredentialDetails.OrganizationName = CardOrganizationName;
 GetCredential.Card.CredentialDetails.Scopes = CardScopes;
 GetCredential.Card.CredentialDetails.AllowedOrigins = CardAllowedOrigins;
 GetCredential.Card.CredentialDetails.APIKey = CardAPIKey;
+GetCredential.Card.CredentialDetails.ImsOrgID = CardImsOrgID;
 GetCredential.NoBetaAccessError = JoinBetaProgram;
 GetCredential.Return = PreviousProject;
 GetCredential.Return.AccessToken = ReturnAccessToken;
@@ -391,6 +393,7 @@ GetCredential.Return.CredentialDetails.OrganizationName = ReturnOrganizationName
 GetCredential.Return.CredentialDetails.Scopes = ReturnScopes;
 GetCredential.Return.CredentialDetails.AllowedOrigins = ReturnAllowedOrigins;
 GetCredential.Return.CredentialDetails.APIKey = ReturnAPIKey;
+GetCredential.Return.CredentialDetails.ImsOrgID = CardImsOrgID;
 GetCredential.RequestAccess = RequestAccess;
 GetCredential.RequestAccess.RestrictedAccess = RestrictedAccess;
 GetCredential.RequestAccess.EdgeCase = OrganizationAccessDetailsEdgeCase;