Skip to content

Commit 2fdd3fa

Browse files
BaskarMitrahBaskarMitrah
committed
Fix : Showed card details as dynamically based on Orderby
1 parent 1c46222 commit 2fdd3fa

File tree

4 files changed

+61
-67
lines changed

4 files changed

+61
-67
lines changed

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

Lines changed: 18 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -22,57 +22,33 @@ const CardClientDetails = ({
2222
response,
2323
imsOrgID,
2424
}) => {
25-
2625
const { selectedOrganization } = useContext(GetCredentialContext);
2726

27+
const componentsMap = {
28+
APIKey: <CardAPIKey cardClientDetails={clientDetails} cardAPIKey={apiKeyDetails} apiKey={response?.apiKey} />,
29+
ClientId: <CardClientId cardClientDetails={clientDetails} cardClientId={clientIdDetails} clientId={response?.apiKey} />,
30+
AllowedOrigins: <CardAllowedOrigins cardClientDetails={clientDetails} cardAllowedOrigins={allowedOrigins} allowedOrigins={allowedOriginsDetails} />,
31+
ClientSecret: <CardClientSecret cardClientDetails={clientDetails} cardClientSecret={clientSecretDetails} response={response} />,
32+
OrganizationName: <CardOrganizationName cardClientDetails={clientDetails} cardOrganizationName={organizationDetails} organization={organizationName?.name} />,
33+
Scopes: <CardScopes cardClientDetails={clientDetails} cardScopes={scopesDetails} />,
34+
ImsOrgID: <CardImsOrgID cardClientDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
35+
};
36+
37+
const splitedOrderBy = clientDetails?.orderBy?.split(',') || [];
38+
const orderedComponents = splitedOrderBy.length > 0
39+
? splitedOrderBy.map(component => componentsMap[component])
40+
: Object.values(componentsMap);
41+
2842
return (
2943
<div
3044
css={css`
3145
display: flex;
3246
flex-direction: column;
3347
gap: 32px;
34-
`}>
48+
`}
49+
>
3550
<h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
36-
37-
{apiKeyDetails && (
38-
<CardAPIKey
39-
cardClientDetails={clientDetails}
40-
cardAPIKey={apiKeyDetails}
41-
apiKey={response?.['apiKey']}
42-
/>
43-
)}
44-
{clientIdDetails && (
45-
<CardClientId
46-
cardClientDetails={clientDetails}
47-
cardClientId={clientIdDetails}
48-
clientId={response?.['apiKey']}
49-
/>
50-
)}
51-
{allowedOrigins && (
52-
<CardAllowedOrigins
53-
cardClientDetails={clientDetails}
54-
cardAllowedOrigins={allowedOrigins}
55-
allowedOrigins={allowedOriginsDetails}
56-
/>
57-
)}
58-
{clientSecretDetails && (
59-
<CardClientSecret
60-
cardClientDetails={clientDetails}
61-
cardClientSecret={clientSecretDetails}
62-
response={response}
63-
/>
64-
)}
65-
{organizationDetails && (
66-
<CardOrganizationName
67-
cardClientDetails={clientDetails}
68-
cardOrganizationName={organizationDetails}
69-
organization={organizationName?.name}
70-
/>
71-
)}
72-
{scopesDetails && <CardScopes cardClientDetails={clientDetails} cardScopes={scopesDetails} />}
73-
{imsOrgID && (
74-
<CardImsOrgID cardClientDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
75-
)}
51+
{orderedComponents}
7652
</div>
7753
);
7854
};

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,6 @@ export const CredentialDetailsCard = ({
144144
}
145145
</div>
146146

147-
148-
149147
{isCollapse &&
150148
<>
151149
<hr

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

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,49 @@ import { ReturnScopes } from './ReturnScopes';
99
import GetCredentialContext from '../GetCredentialContext';
1010
import { CardImsOrgID } from '../Card/CardImsOrgID';
1111

12-
const ReturnCredentialDetails = ({ clientDetails, clientIdDetails, clientSecretDetails, organizationDetails, scopesDetails, apiKeyDetails, allowedOriginsDetails, organizationName, allowedOrigins, response, imsOrgID }) => {
12+
const ReturnCredentialDetails = ({
13+
clientDetails,
14+
clientIdDetails,
15+
clientSecretDetails,
16+
organizationDetails,
17+
scopesDetails,
18+
apiKeyDetails,
19+
allowedOriginsDetails,
20+
organizationName,
21+
allowedOrigins,
22+
response,
23+
imsOrgID
24+
}) => {
1325

1426
const { selectedOrganization } = useContext(GetCredentialContext);
15-
console.log('clientDetails', clientDetails)
1627

17-
return (
18-
<div css={css`
19-
display : flex;
20-
flex-direction : column;
21-
gap: 32px;
22-
`}>
28+
const componentsMap = {
29+
APIKey: <ReturnAPIKey returnCredentialDetails={clientDetails} returnAPIKey={apiKeyDetails} apiKey={response?.workspaces[0]?.credentials[0]?.clientId} />,
30+
AllowedOrigins: <ReturnAllowedOrigins returnCredentialDetails={clientDetails} allowedOrigins={allowedOriginsDetails} returnAllowedOrigins={allowedOrigins} />,
31+
ImsOrgID: <CardImsOrgID returnCredentialDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />,
32+
OrganizationName: <ReturnOrganizationName returnCredentialDetails={clientDetails} returnOrganizationName={organizationDetails} organization={organizationName?.name} />,
33+
ClientId: <ReturnClientId returnCredentialDetails={clientDetails} returnClientId={clientIdDetails} clientId={response?.workspaces[0]?.credentials[0]?.clientId} />,
34+
ClientSecret: <ReturnClientSecret returnCredentialDetails={clientDetails} returnClientSecret={clientSecretDetails} response={response} />,
35+
Scopes: <ReturnScopes returnCredentialDetails={clientDetails} returnScopes={scopesDetails} />
36+
};
2337

24-
<h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading} </h4>
38+
const splitedOrderBy = clientDetails?.orderBy?.split(',') || [];
39+
const orderedComponents = splitedOrderBy.length > 0
40+
? splitedOrderBy.map(key => componentsMap[key])
41+
: Object.values(componentsMap);
2542

26-
{apiKeyDetails && <ReturnAPIKey returnCredentialDetails={clientDetails} returnAPIKey={apiKeyDetails} apiKey={response?.workspaces[0]?.credentials[0]?.clientId} />}
27-
{allowedOrigins && <ReturnAllowedOrigins returnCredentialDetails={clientDetails} allowedOrigins={allowedOriginsDetails} returnAllowedOrigins={allowedOrigins} />}
28-
{clientIdDetails && <ReturnClientId returnCredentialDetails={clientDetails} returnClientId={clientIdDetails} clientId={response?.workspaces[0]?.credentials[0]?.clientId} />}
29-
{clientSecretDetails && <ReturnClientSecret returnCredentialDetails={clientDetails} returnClientSecret={clientSecretDetails} response={response} />}
30-
{organizationDetails && <ReturnOrganizationName returnCredentialDetails={clientDetails} returnOrganizationName={organizationDetails} organization={organizationName?.name} />}
31-
{scopesDetails && <ReturnScopes returnCredentialDetails={clientDetails} returnScopes={scopesDetails} />}
32-
{imsOrgID && <CardImsOrgID returnCredentialDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />}
43+
return (
44+
<div
45+
css={css`
46+
display: flex;
47+
flex-direction: column;
48+
gap: 32px;
49+
`}
50+
>
51+
<h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
52+
{orderedComponents}
3353
</div>
34-
)
35-
}
54+
);
55+
};
3656

3757
export { ReturnCredentialDetails };

‎src/pages/credential/GetCredentialApiKey.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@ const GetCredentialApiKey = () => {
5959

6060
<GetCredential.Card.DevConsoleLink heading="Developer Console Project" />
6161

62-
<GetCredential.Card.CredentialDetails heading="Credential details">
63-
<GetCredential.Card.CredentialDetails.AllowedOrigins heading="Allowed domains" />
64-
<GetCredential.Card.CredentialDetails.APIKey heading="API Key" />
62+
<GetCredential.Card.CredentialDetails heading="Credential details" orderBy='AllowedOrigins,APIKey,ImsOrgID,OrganizationName'>
6563
<GetCredential.Card.CredentialDetails.ImsOrgID heading="IMS Organization ID" />
64+
<GetCredential.Card.CredentialDetails.APIKey heading="API Key" />
65+
<GetCredential.Card.CredentialDetails.AllowedOrigins heading="Allowed domains" />
6666
<GetCredential.Card.CredentialDetails.OrganizationName heading="Organization" />
6767
</GetCredential.Card.CredentialDetails>
6868

@@ -80,10 +80,10 @@ const GetCredentialApiKey = () => {
8080
<GetCredential.Return.Side.NewCredential heading="Need another credential?" buttonLabel="Create new credential" />
8181
</GetCredential.Return.Side>
8282

83-
<GetCredential.Return.CredentialDetails heading="Credential details">
83+
<GetCredential.Return.CredentialDetails heading="Credential details" orderBy='ImsOrgID,AllowedOrigins,APIKey,OrganizationName' >
84+
<GetCredential.Return.CredentialDetails.ImsOrgID heading="IMS Organization ID" />
8485
<GetCredential.Return.CredentialDetails.AllowedOrigins heading="Allowed domains" />
8586
<GetCredential.Return.CredentialDetails.APIKey heading="API Key" />
86-
<GetCredential.Return.CredentialDetails.ImsOrgID heading="IMS Organization ID" />
8787
<GetCredential.Return.CredentialDetails.OrganizationName heading="Organization" />
8888
</GetCredential.Return.CredentialDetails>
8989

0 commit comments

Comments
 (0)