Fix : Removed unwanted code

Author: BaskarMitrah

src/@adobe/gatsby-aio-theme/components/GetCredential/Card/CardClientDetails.js

@@ -34,60 +34,45 @@ const CardClientDetails = ({
       `}>
       <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
 
-      {clientDetails.children.map((element) => {
-        switch (element?.type?.name) {
-          case "CardAllowedOrigins":
-            return (
-              <CardAllowedOrigins
-              cardClientDetails={clientDetails}
-              cardAllowedOrigins={allowedOrigins}
-              allowedOrigins={allowedOriginsDetails}
-            />
-            );
-          case "CardOrganizationName":
-            return (
-              <CardOrganizationName
-                cardClientDetails={clientDetails}
-                cardOrganizationName={organizationDetails}
-                organization={organizationName?.name}
-             />
-            );
-          case "CardImsOrgID":
-            return (
-              <CardImsOrgID cardClientDetails={clientDetails}  cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
-            );
-          case "CardAPIKey":
-            return (
-              <CardAPIKey
-               cardClientDetails={clientDetails}
-               cardAPIKey={apiKeyDetails}
-               apiKey={response?.['apiKey']}
-             />
-            );
-          case "CardClientId":
-            return (
-              <CardClientId
-               cardClientDetails={clientDetails}
-               cardClientId={clientIdDetails}
-               clientId={response?.['apiKey']}
-             />
-            );
-          case "CardClientSecret":
-            return (
-              <CardClientSecret
-              cardClientDetails={clientDetails}
-              cardClientSecret={clientSecretDetails}
-              response={response}
-            />
-            );
-          case "CardScopes":
-            return (
-              <CardScopes cardClientDetails={clientDetails} cardScopes={scopesDetails} />
-            );
-          default:
-            return null;
-         }
-      })}
+      {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>
   );
 };

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

@@ -136,7 +136,6 @@ export const CredentialDetailsCard = ({
                 </div>
               </div>
             </div>
-            <div>{clientDetails.toString()}</div>
             {
               bool &&
               <div role="button" css={css`cursor:pointer`} data-cy="collapse-open" onClick={handleCollapse}>

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

@@ -9,7 +9,7 @@ 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)
@@ -20,46 +20,18 @@ const ReturnCredentialDetails = ({ clientDetails, clientIdDetails, clientSecretD
         flex-direction : column;  
         gap: 32px;
       `}>
-              
-  <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading} </h4>
 
-   {clientDetails.children.map((element) => {
-        switch (element?.type?.name) {
-          case "ReturnAllowedOrigins":
-            return (
-              <ReturnAllowedOrigins returnCredentialDetails={clientDetails} allowedOrigins={allowedOriginsDetails} returnAllowedOrigins={allowedOrigins} />
-            );
-          case "ReturnOrganizationName":
-            return (
-              <ReturnOrganizationName returnCredentialDetails={clientDetails} returnOrganizationName={organizationDetails} organization={organizationName?.name} />
-            );
-          case "CardImsOrgID":
-            return (
-              <CardImsOrgID returnCredentialDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
-            );
-          case "ReturnAPIKey":
-            return (
-              <ReturnAPIKey returnCredentialDetails={clientDetails} returnAPIKey={apiKeyDetails} apiKey={response?.workspaces[0]?.credentials[0]?.clientId} />
-            );
-          case "ReturnClientId":
-            return (
-              <ReturnClientId returnCredentialDetails={clientDetails} returnClientId={clientIdDetails} clientId={response?.workspaces[0]?.credentials[0]?.clientId} />
-            );
-          case "ReturnClientSecret":
-            return (
-              <ReturnClientSecret returnCredentialDetails={clientDetails} returnClientSecret={clientSecretDetails} response={response} />
-            );
-          case "ReturnScopes":
-            return (
-              <ReturnScopes returnCredentialDetails={clientDetails} returnScopes={scopesDetails} />
-            );
-          default:
-            return null;
-         }
-      })}
+      <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading} </h4>
+
+      {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 };
-