From 2fdd3fa45d5a5f6f8b43da46413df722208a34d0 Mon Sep 17 00:00:00 2001
From: BaskarMitrah <mit44186@adobe.com>
Date: Wed, 9 Oct 2024 12:52:20 +0530
Subject: [PATCH] Fix : Showed card details as dynamically based on Orderby

---
 .../GetCredential/Card/CardClientDetails.js   | 60 ++++++-------------
 .../GetCredential/CredentialDetailsCard.js    |  2 -
 .../Return/ReturnCredentialDetails.js         | 56 +++++++++++------
 src/pages/credential/GetCredentialApiKey.js   | 10 ++--
 4 files changed, 61 insertions(+), 67 deletions(-)

diff --git a/src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardClientDetails.js b/src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardClientDetails.js
index 46c5158c..208eb98b 100644
--- a/src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardClientDetails.js
+++ b/src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardClientDetails.js
@@ -22,57 +22,33 @@ const CardClientDetails = ({
   response,
   imsOrgID,
 }) => {
-
   const { selectedOrganization } = useContext(GetCredentialContext);
 
+  const componentsMap = {
+    APIKey: <CardAPIKey cardClientDetails={clientDetails} cardAPIKey={apiKeyDetails} apiKey={response?.apiKey} />,
+    ClientId: <CardClientId cardClientDetails={clientDetails} cardClientId={clientIdDetails} clientId={response?.apiKey} />,
+    AllowedOrigins: <CardAllowedOrigins cardClientDetails={clientDetails} cardAllowedOrigins={allowedOrigins} allowedOrigins={allowedOriginsDetails} />,
+    ClientSecret: <CardClientSecret cardClientDetails={clientDetails} cardClientSecret={clientSecretDetails} response={response} />,
+    OrganizationName: <CardOrganizationName cardClientDetails={clientDetails} cardOrganizationName={organizationDetails} organization={organizationName?.name} />,
+    Scopes: <CardScopes cardClientDetails={clientDetails} cardScopes={scopesDetails} />,
+    ImsOrgID: <CardImsOrgID cardClientDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
+  };
+
+  const splitedOrderBy = clientDetails?.orderBy?.split(',') || [];
+  const orderedComponents = splitedOrderBy.length > 0
+    ? splitedOrderBy.map(component => componentsMap[component])
+    : Object.values(componentsMap);
+
   return (
     <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}
-        />
-      )}
-      {scopesDetails && <CardScopes cardClientDetails={clientDetails} cardScopes={scopesDetails} />}
-      {imsOrgID && (
-        <CardImsOrgID cardClientDetails={clientDetails}  cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
-      )}
+      {orderedComponents}
     </div>
   );
 };
diff --git a/src/@adobe/gatsby-aio-theme/components/GetCredential/CredentialDetailsCard.js b/src/@adobe/gatsby-aio-theme/components/GetCredential/CredentialDetailsCard.js
index 14db12f9..127a9e92 100644
--- a/src/@adobe/gatsby-aio-theme/components/GetCredential/CredentialDetailsCard.js
+++ b/src/@adobe/gatsby-aio-theme/components/GetCredential/CredentialDetailsCard.js
@@ -144,8 +144,6 @@ export const CredentialDetailsCard = ({
             }
           </div>
 
-         
-
           {isCollapse &&
             <>
               <hr
diff --git a/src/@adobe/gatsby-aio-theme/components/GetCredential/Return/ReturnCredentialDetails.js b/src/@adobe/gatsby-aio-theme/components/GetCredential/Return/ReturnCredentialDetails.js
index 6ebb00ab..feb93ab5 100644
--- a/src/@adobe/gatsby-aio-theme/components/GetCredential/Return/ReturnCredentialDetails.js
+++ b/src/@adobe/gatsby-aio-theme/components/GetCredential/Return/ReturnCredentialDetails.js
@@ -9,29 +9,49 @@ 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 ReturnCredentialDetails = ({
+  clientDetails,
+  clientIdDetails,
+  clientSecretDetails,
+  organizationDetails,
+  scopesDetails,
+  apiKeyDetails,
+  allowedOriginsDetails,
+  organizationName,
+  allowedOrigins,
+  response,
+  imsOrgID
+}) => {
 
   const { selectedOrganization } = useContext(GetCredentialContext);
-  console.log('clientDetails', clientDetails)
 
-  return (
-    <div css={css`
-        display : flex;
-        flex-direction : column;  
-        gap: 32px;
-      `}>
+  const componentsMap = {
+    APIKey: <ReturnAPIKey returnCredentialDetails={clientDetails} returnAPIKey={apiKeyDetails} apiKey={response?.workspaces[0]?.credentials[0]?.clientId} />,
+    AllowedOrigins: <ReturnAllowedOrigins returnCredentialDetails={clientDetails} allowedOrigins={allowedOriginsDetails} returnAllowedOrigins={allowedOrigins} />,
+    ImsOrgID: <CardImsOrgID returnCredentialDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />,
+    OrganizationName: <ReturnOrganizationName returnCredentialDetails={clientDetails} returnOrganizationName={organizationDetails} organization={organizationName?.name} />,
+    ClientId: <ReturnClientId returnCredentialDetails={clientDetails} returnClientId={clientIdDetails} clientId={response?.workspaces[0]?.credentials[0]?.clientId} />,
+    ClientSecret: <ReturnClientSecret returnCredentialDetails={clientDetails} returnClientSecret={clientSecretDetails} response={response} />,
+    Scopes: <ReturnScopes returnCredentialDetails={clientDetails} returnScopes={scopesDetails} />
+  };
 
-      <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading} </h4>
+  const splitedOrderBy = clientDetails?.orderBy?.split(',') || [];
+  const orderedComponents = splitedOrderBy.length > 0
+    ? splitedOrderBy.map(key => componentsMap[key])
+    : Object.values(componentsMap);
 
-      {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} />}
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+      `}
+    >
+      <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
+      {orderedComponents}
     </div>
-  )
-}
+  );
+};
 
 export { ReturnCredentialDetails };
diff --git a/src/pages/credential/GetCredentialApiKey.js b/src/pages/credential/GetCredentialApiKey.js
index bb607610..48c578a6 100644
--- a/src/pages/credential/GetCredentialApiKey.js
+++ b/src/pages/credential/GetCredentialApiKey.js
@@ -59,10 +59,10 @@ const GetCredentialApiKey = () => {
 
         <GetCredential.Card.DevConsoleLink heading="Developer Console Project" />
 
-        <GetCredential.Card.CredentialDetails heading="Credential details">
-          <GetCredential.Card.CredentialDetails.AllowedOrigins heading="Allowed domains" />
-          <GetCredential.Card.CredentialDetails.APIKey heading="API Key" />
+        <GetCredential.Card.CredentialDetails heading="Credential details" orderBy='AllowedOrigins,APIKey,ImsOrgID,OrganizationName'>
           <GetCredential.Card.CredentialDetails.ImsOrgID heading="IMS Organization ID" />
+          <GetCredential.Card.CredentialDetails.APIKey heading="API Key" />
+          <GetCredential.Card.CredentialDetails.AllowedOrigins heading="Allowed domains" />
           <GetCredential.Card.CredentialDetails.OrganizationName heading="Organization" />
         </GetCredential.Card.CredentialDetails>
 
@@ -80,10 +80,10 @@ const GetCredentialApiKey = () => {
           <GetCredential.Return.Side.NewCredential heading="Need another credential?" buttonLabel="Create new credential" />
         </GetCredential.Return.Side>
 
-        <GetCredential.Return.CredentialDetails heading="Credential details">
+        <GetCredential.Return.CredentialDetails heading="Credential details" orderBy='ImsOrgID,AllowedOrigins,APIKey,OrganizationName' >
+          <GetCredential.Return.CredentialDetails.ImsOrgID heading="IMS Organization ID" />
           <GetCredential.Return.CredentialDetails.AllowedOrigins heading="Allowed domains" />
           <GetCredential.Return.CredentialDetails.APIKey heading="API Key" />
-          <GetCredential.Return.CredentialDetails.ImsOrgID heading="IMS Organization ID" />
           <GetCredential.Return.CredentialDetails.OrganizationName heading="Organization" />
         </GetCredential.Return.CredentialDetails>