Ims Org ID

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');
 }
 

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" />

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" />

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

@@ -1,29 +1,79 @@
-import React from 'react'
+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 }) => {
+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 };

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 };

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}
               />
             )}
 

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 (
     <>

packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js

@@ -1,18 +1,22 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { css } from '@emotion/react';
 import { ReturnAPIKey } from './ReturnAPIKey';
 import { ReturnAllowedOrigins } from './ReturnAllowedOrigins';
 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>
   )
 }

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;