Fix : Static content update

Author: BaskarMitrah

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

@@ -9,51 +9,65 @@ 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 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} />
-  };
-
-  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()])
-    : []
-
-  return (
-    <div
-      css={css`
-        display: flex;
-        flex-direction: column;
+  const splitedOrderBy = clientDetails?.orderBy ? clientDetails?.orderBy?.split(',') : [];
+  console.log('splitedOrderBy', splitedOrderBy)
+
+  console.log('splitedOrderBy?.length', splitedOrderBy?.length)
+
+return (
+  <div css={css`
+        display : flex;
+        flex-direction : column;  
         gap: 32px;
-      `}
-    >
-      <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
-      {orderedComponents}
-    </div>
-  );
-};
+      `}>
+
+    <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} />}
+
+        </>
+    }
+
+  </div>
+)
+}
 
 export { ReturnCredentialDetails };