Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug : Update the credential card dynamically #1618

Merged
merged 3 commits into from
Sep 13, 2024
Merged

Bug : Update the credential card dynamically #1618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7553909
Bug : Update the credential card dynamically
BaskarMitrah Sep 12, 2024
607a02e
--Fixed smoke fail issues
BaskarMitrah Sep 13, 2024
b390ad6
--Removed console
BaskarMitrah Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions cypress/e2e/get-credentials.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,24 @@ function checkRequestAccessEdgeCase() {

function getIframeBody() {
return cy.get('iframe[data-cy="request-access-iframe"]')
.its('0.contentDocument.body').should('not.be.empty')
.then(cy.wrap);
.its('0.contentDocument.body').should('not.be.empty')
.then(cy.wrap);
}

function checkRequestAccess() {
cy.get('body').then(($body) => {
// if the request is not already sent, send the request
if ($body.find('[data-cy="request-access-button"]').length > 0) {
cy.get('[data-cy="request-access-button"]').click();
getIframeBody().find('button[data-testid="send-request-button"]').should('exist').click();

getIframeBody().find('h3[data-testid="title"]').invoke('text').then((text) => {
if (text.trim() !== 'Your request is on its way') {
getIframeBody().find('button[data-testid="send-request-button"]').should('exist').click();
}
});
getIframeBody().find('button[data-testid="close-button"]').should('exist').click();
}
});
cy.get('button[data-cy="request-info"]').should('be.visible').should('be.enabled').click();
cy.get('body', { timeout: 1000 }).click();
};

function checkReturnFlow(credentialType) {
Expand Down Expand Up @@ -84,7 +87,7 @@ function checkOAuthS2S() {
}

function checkCredential(credentialType) {
switch(credentialType) {
switch (credentialType) {
case API_KEY:
checkAPIKey();
break;
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAPIKey.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react'
import ShowCard from './ShowCard';

const CardAPIKey = ({ cardAPIKey, apiKey }) => {
const CardAPIKey = ({ val: { heading, apiKey } }) => {
return (
<ShowCard heading={cardAPIKey?.heading} value={apiKey} />
heading && <ShowCard heading={heading} value={apiKey} />
)
}

Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAllowedOrigins.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react'
import ShowCard from './ShowCard';

const CardAllowedOrigins = ({ cardAllowedOrigins, allowedOrigins }) => {
const CardAllowedOrigins = ({ val: { heading, allowedOrigins } }) => {
return (
<ShowCard heading={cardAllowedOrigins?.heading} value={allowedOrigins} />
heading && <ShowCard heading={heading} value={allowedOrigins} />
)
}

Expand Down
85 changes: 46 additions & 39 deletions packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,16 @@ import { CardScopes } from './CardScopes';
import { CardImsOrgID } from './CardImsOrgID';
import GetCredentialContext from '../GetCredentialContext';

const COMPONENT_MAP = {
"CardAPIKey": CardAPIKey,
"CardAllowedOrigins": CardAllowedOrigins,
"CardClientId": CardClientId,
"CardClientSecret": CardClientSecret,
"CardOrganizationName": CardOrganizationName,
"CardScopes": CardScopes,
"CardImsOrgID": CardImsOrgID
};

const CardClientDetails = ({
clientDetails,
clientIdDetails,
Expand All @@ -21,10 +31,42 @@ const CardClientDetails = ({
allowedOrigins,
response,
imsOrgID,
myCredentialFields
}) => {

const { selectedOrganization } = useContext(GetCredentialContext);

const cardCompDetails = {
"CardAPIKey": {
heading: apiKeyDetails?.heading,
apiKey: response?.['apiKey']
},
"CardAllowedOrigins": {
heading: allowedOrigins?.heading,
allowedOrigins: allowedOriginsDetails,
},
"CardClientId": {
heading: clientIdDetails?.heading,
clientId: response?.['apiKey']
},
"CardClientSecret": {
cardClientSecret: clientSecretDetails,
response
},
"CardOrganizationName": {
heading: organizationDetails?.heading,
organization: organizationName?.name
},
"CardScopes": {
heading: scopesDetails?.heading,
scope: scopesDetails?.scope
},
"CardImsOrgID": {
heading: imsOrgID?.heading,
imsOrgId: selectedOrganization?.code
}
};

return (
<div
css={css`
Expand All @@ -33,45 +75,10 @@ const CardClientDetails = ({
gap: 32px;
`}>
<h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
{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} />
)}
{myCredentialFields?.[CardClientDetails]?.children.map(({ type }, index) => {
const Component = COMPONENT_MAP[type?.name];
return Component ? <Component key={index} val={cardCompDetails[type?.name]} /> : null;
})}
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientId.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react'
import ShowCard from './ShowCard'

const CardClientId = ({ cardClientId, clientId }) => {
const CardClientId = ({ val: { heading, clientId } }) => {
return (
<ShowCard heading={cardClientId?.heading} value={clientId} />
heading && <ShowCard heading={heading} value={clientId} />
)
}

Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientSecret.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react'
import ShowCard from './ShowCard';

const CardClientSecret = ({ cardClientSecret, response }) => {
const CardClientSecret = ({ val : { cardClientSecret, response }}) => {
return (
<ShowCard heading={cardClientSecret?.heading} isClientSecret buttonLabel={cardClientSecret?.buttonLabel} response={response} />
cardClientSecret && <ShowCard heading={cardClientSecret?.heading} isClientSecret buttonLabel={cardClientSecret?.buttonLabel} response={response} />
)
}

Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import ShowCard from './ShowCard';

const CardImsOrgID = ({ cardImsOrgID, imsOrgId }) => {
return <ShowCard heading={cardImsOrgID?.heading} value={imsOrgId} />;
const CardImsOrgID = ({ val: { heading, imsOrgId } }) => {
return heading && <ShowCard heading={heading} value={imsOrgId} />
};

export { CardImsOrgID };
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Card/CardOrganizationName.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react'
import ShowCard from './ShowCard';

const CardOrganizationName = ({ cardOrganizationName, organization }) => {
const CardOrganizationName = ({ val: { heading, organization } }) => {
return (
<ShowCard heading={cardOrganizationName?.heading} value={organization} isOraganization />
heading && <ShowCard heading={heading} value={organization} isOraganization />
)
}

Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Card/CardScopes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react'
import ShowCard from './ShowCard';

const CardScopes = ({ cardScopes }) => {
const CardScopes = ({ val: { heading, scope } }) => {
return (
<ShowCard heading={cardScopes?.heading} value={cardScopes?.scope} />
heading && <ShowCard heading={heading} value={scope} />
)
}
export { CardScopes };
2 changes: 2 additions & 0 deletions packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,8 @@ export const CredentialDetailsCard = ({
allowedOrigins={allowedOrigins}
response={response}
imsOrgID={imsOrgID}
returnFields={returnFields}
myCredentialFields={myCredentialFields}
/>
)}

Expand Down
1 change: 1 addition & 0 deletions packages/gatsby-theme-aio/src/components/GetCredential/MyCredential.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const MyCredential = ({
credentialProps?.[MyCredential]?.children.forEach(({ type, props }) => {
myCredentialFields[type] = props;
if (props.children && type === CardClientDetails) {
myCredentialFields[type] = props;
props?.children?.forEach(({ type, props }) => {
myCredentialFields[type] = props;
});
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAPIKey.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import ShowCard from '../Card/ShowCard';

const ReturnAPIKey = ({ returnCredentialDetails , returnAPIKey, apiKey }) => {
const ReturnAPIKey = ({ val: { heading, apiKey } }) => {
return (
<ShowCard heading={returnAPIKey?.heading} value={apiKey} />
heading && <ShowCard heading={heading} value={apiKey} />
)
}

Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAllowedOrigins.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import ShowCard from '../Card/ShowCard';

const ReturnAllowedOrigins = ({ returnAllowedOrigins, allowedOrigins }) => {
const ReturnAllowedOrigins = ({ val: { allowedOrigins, heading } }) => {
return (
<ShowCard heading={returnAllowedOrigins?.heading} value={allowedOrigins} />
heading && <ShowCard heading={heading} value={allowedOrigins} />
)
}

Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientId.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react'
import ShowCard from '../Card/ShowCard';

const ReturnClientId = ({ returnClientId, clientId }) => {
const ReturnClientId = ({ val: { heading, clientId } }) => {
return (
<ShowCard heading={returnClientId?.heading} value={clientId} />
heading && <ShowCard heading={heading} value={clientId} />
)
}
export { ReturnClientId };
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientSecret.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import ShowCard from '../Card/ShowCard';

const ReturnClientSecret = ({ returnClientSecret, response }) => {
const ReturnClientSecret = ({ val: { returnClientSecret, response } }) => {
return (
<ShowCard heading={returnClientSecret?.heading} isClientSecret buttonLabel={returnClientSecret?.buttonLabel} response={response} />
returnClientSecret && <ShowCard heading={returnClientSecret?.heading} isClientSecret buttonLabel={returnClientSecret?.buttonLabel} response={response} />
)
}

Expand Down
71 changes: 61 additions & 10 deletions packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,77 @@ 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 COMPONENT_MAP = {
"ReturnAPIKey": ReturnAPIKey,
"ReturnAllowedOrigins": ReturnAllowedOrigins,
"ReturnClientId": ReturnClientId,
"ReturnClientSecret": ReturnClientSecret,
"ReturnOrganizationName": ReturnOrganizationName,
"ReturnScopes": ReturnScopes,
"CardImsOrgID": CardImsOrgID
};

const ReturnCredentialDetails = ({
clientDetails,
apiKeyDetails,
clientIdDetails,
clientSecretDetails,
organizationDetails,
scopesDetails,
allowedOriginsDetails,
organizationName,
allowedOrigins,
response,
imsOrgID,
returnFields
}) => {

const { selectedOrganization } = useContext(GetCredentialContext);

const returnCompDetails = {
"ReturnAPIKey": {
heading: apiKeyDetails?.heading,
apiKey: response?.workspaces[0]?.credentials[0]?.clientId,
},
"ReturnAllowedOrigins": {
heading: allowedOrigins?.heading,
allowedOrigins: allowedOriginsDetails,
},
"ReturnClientId": {
heading: clientIdDetails?.heading,
clientId: response?.workspaces[0]?.credentials[0]?.clientId,
},
"ReturnClientSecret": {
returnClientSecret: clientSecretDetails,
response
},
"ReturnOrganizationName": {
heading: organizationDetails?.heading,
organization: organizationName?.name
},
"ReturnScopes": {
heading: scopesDetails?.heading,
scope: scopesDetails?.scope
},
"CardImsOrgID": {
heading: imsOrgID?.heading,
imsOrgId: selectedOrganization?.code
}
};

return (
<div css={css`
display : flex;
flex-direction : column;
gap: 32px;
`}>
<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} />}
{returnFields?.[ReturnCredentialDetails]?.children.map(({ type }, index) => {
const Component = COMPONENT_MAP[type?.name];
return Component ? <Component key={index} val={returnCompDetails[type?.name]} /> : null;
})}
</div>
)
}
);
};

export { ReturnCredentialDetails };
4 changes: 2 additions & 2 deletions packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnOrganizationName.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import ShowCard from '../Card/ShowCard';

const ReturnOrganizationName = ({ returnOrganizationName, organization }) => {
const ReturnOrganizationName = ({ val: { heading, organization } }) => {
return (
<ShowCard heading={returnOrganizationName?.heading} value={organization} isOraganization />
heading && <ShowCard heading={heading} value={organization} isOraganization />
)
}

Expand Down
Loading
Loading