Fix : Passed Dynamic value

Author: BaskarMitrah

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

@@ -9,75 +9,51 @@ 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?.orderBy)
-
-  const splitedOrderBy = clientDetails?.orderBy ? clientDetails?.orderBy?.split(',') : [];
-  console.log('splitedOrderBy', splitedOrderBy)
 
   const componentsMap = {
-    APIKey: apiKeyDetails && <ReturnAPIKey returnCredentialDetails={clientDetails} returnAPIKey={apiKeyDetails} apiKey={response?.workspaces[0]?.credentials[0]?.clientId} />,
-    AllowedOrigins: allowedOrigins && <ReturnAllowedOrigins returnCredentialDetails={clientDetails} allowedOrigins={allowedOriginsDetails} returnAllowedOrigins={allowedOrigins} />,
-    ImsOrgID: imsOrgID && <CardImsOrgID returnCredentialDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />,
-    OrganizationName: organizationDetails && <ReturnOrganizationName returnCredentialDetails={clientDetails} returnOrganizationName={organizationDetails} organization={organizationName?.name} />,
-    ClientId: clientIdDetails && <ReturnClientId returnCredentialDetails={clientDetails} returnClientId={clientIdDetails} clientId={response?.workspaces[0]?.credentials[0]?.clientId} />,
-    ClientSecret: clientSecretDetails && <ReturnClientSecret returnCredentialDetails={clientDetails} returnClientSecret={clientSecretDetails} response={response} />,
-    Scopes: scopesDetails && <ReturnScopes returnCredentialDetails={clientDetails} returnScopes={scopesDetails} />
+    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} />
   };
 
-  console.log(' Object.values(componentsMap) ', Object.values(componentsMap))
-  
-return (
-  <div css={css`
-        display : flex;
-        flex-direction : column;  
-        gap: 32px;
-      `}>
-
-    <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading} </h4>
-    {
-      splitedOrderBy?.length > 0 ?
-        <>
-          {splitedOrderBy?.map((list) => {
-            if (list === "APIKey") {
-              return apiKeyDetails && <ReturnAPIKey returnCredentialDetails={clientDetails} returnAPIKey={apiKeyDetails} apiKey={response?.workspaces[0]?.credentials[0]?.clientId} />
-            }
-            if (list === "AllowedOrigins") {
-              return allowedOrigins && <ReturnAllowedOrigins returnCredentialDetails={clientDetails} allowedOrigins={allowedOriginsDetails} returnAllowedOrigins={allowedOrigins} />
-            }
-            if (list === "ImsOrgID") {
-              return imsOrgID && <CardImsOrgID returnCredentialDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
-            }
-            if (list === "OrganizationName") {
-              return organizationDetails && <ReturnOrganizationName returnCredentialDetails={clientDetails} returnOrganizationName={organizationDetails} organization={organizationName?.name} />
-            }
-            if (list === "ClientId") {
-              return clientIdDetails && <ReturnClientId returnCredentialDetails={clientDetails} returnClientId={clientIdDetails} clientId={response?.workspaces[0]?.credentials[0]?.clientId} />
-            }
-            if (list === "ClientSecret") {
-              return clientSecretDetails && <ReturnClientSecret returnCredentialDetails={clientDetails} returnClientSecret={clientSecretDetails} response={response} />
-            }
-            if (list === "Scopes") {
-              return scopesDetails && <ReturnScopes returnCredentialDetails={clientDetails} returnScopes={scopesDetails} />
-            }
-          })}
-        </> :
-        <>
-          {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} />}
+  console.log('first', Object.keys(componentsMap)?.map((sample)=>console.log('sample', sample)))
 
-        </>
-    }
+  const splitedOrderBy = clientDetails?.orderBy?.split(',') || [];
+  const orderedComponents = splitedOrderBy.length > 0
+    ? splitedOrderBy.map(key => componentsMap[key.trim()])
+    : []
 
-  </div>
-)
-}
+  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 };

src/pages/credential/GetCredentialOAuthS2s.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { GetCredential } from '@adobe/gatsby-theme-aio/src/components/GetCredential';
+import { GetCredential } from '../../@adobe/gatsby-aio-theme/components/GetCredential';
 import firefly from "./images/firefly.png";
 import ps from "./images/ps.png";