Fix : Showed card details as dynamically based on Orderby

AdobeDocs · Oct 9, 2024 · 2fdd3fa · 2fdd3fa
1 parent 1c46222
commit 2fdd3fa
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -144,8 +144,6 @@ export const CredentialDetailsCard = ({ @@
                 }
               </div>
               {isCollapse &&
                 <>
                   <hr
@@ Expand Down @@