Fix : Added static data

AdobeDocs · Oct 9, 2024 · 616e7fb · 616e7fb
1 parent 3c898d4
commit 616e7fb
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 63 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
@@ -20,35 +20,61 @@ const CardClientDetails = ({
   organizationName,
   allowedOrigins,
   response,
-  imsOrgID,
+  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 { selectedOrganization } = useContext(GetCredentialContext);
 
-  const splitedOrderBy = clientDetails?.orderBy?.split(',') || [];
-  const orderedComponents = splitedOrderBy.length > 0
-    ? splitedOrderBy.map(component => componentsMap[component])
-    : Object.values(componentsMap)?.map(key => componentsMap[key]);;
+  const splitedOrderBy = clientDetails?.orderBy ? clientDetails?.orderBy?.split(',') : [];
 
   return (
     <div
       css={css`
         display: flex;
         flex-direction: column;
         gap: 32px;
-      `}
-    >
+      `}>
       <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
-      {orderedComponents}
+
+      {
+        splitedOrderBy?.length > 0 ?
+          <>
+            {splitedOrderBy?.map((list) => {
+              if (list === "APIKey") {
+                return apiKeyDetails && <CardAPIKey cardClientDetails={clientDetails} cardAPIKey={apiKeyDetails} apiKey={response?.['apiKey']} />
+              }
+              if (list === "AllowedOrigins") {
+                return allowedOrigins && <CardAllowedOrigins cardClientDetails={clientDetails} cardAllowedOrigins={allowedOrigins} allowedOrigins={allowedOriginsDetails} />
+              }
+              if (list === "ImsOrgID") {
+                return imsOrgID && <CardImsOrgID cardClientDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
+              }
+              if (list === "OrganizationName") {
+                return organizationDetails && <CardOrganizationName cardClientDetails={clientDetails} cardOrganizationName={organizationDetails} organization={organizationName?.name} />
+              }
+              if (list === "ClientId") {
+                return clientIdDetails && <CardClientId cardClientDetails={clientDetails} cardClientId={clientIdDetails} clientId={response?.['apiKey']} />
+              }
+              if (list === "ClientSecret") {
+                return clientSecretDetails && <CardClientSecret cardClientDetails={clientDetails} cardClientSecret={clientSecretDetails} response={response} />
+              }
+              if (list === "Scopes") {
+                return scopesDetails && <CardScopes cardClientDetails={clientDetails} cardScopes={scopesDetails} />
+              }
+            })}
+          </>
+          :
+          <>
+            {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>
   );
 };

diff --git a/src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardClientId.js b/src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardClientId.js
@@ -1,10 +1,10 @@
-import React from 'react'
-import ShowCard from './ShowCard'
+  import React from 'react'
+  import ShowCard from './ShowCard'
 
-const CardClientId = ({ cardClientId, clientId }) => {
-  return (
-    <ShowCard heading={cardClientId?.heading} value={clientId} />
-  )
-}
+  const CardClientId = ({ cardClientId, clientId }) => {
+    return (
+      <ShowCard heading={cardClientId?.heading} value={clientId} />
+    )
+  }
 
-export { CardClientId }
+  export { CardClientId }
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,49 +9,75 @@ 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: <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} />
+    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} />
   };
 
-  const splitedOrderBy = clientDetails?.orderBy?.split(',') || [];
-  const orderedComponents = splitedOrderBy.length > 0
-    ? splitedOrderBy?.map(key => componentsMap[key])
-    : Object.values(componentsMap)?.map(key => componentsMap[key]);
-
-  return (
-    <div
-      css={css`
-        display: flex;
-        flex-direction: column;
+  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>
-      {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 };