Skip to content

Commit

Permalink
Merge pull request wso2#1495 from brionmario/application-template-imp…
Browse files Browse the repository at this point in the history 
…rovements

Move Certificate to Protocol Form + Fix wizard help panel UIs
  • Loading branch information
@brionmario
brionmario authored Jan 12, 2021
2 parents 9277110 + 818bf12 commit b23e246
Show file tree
Hide file tree
Showing 23 changed files with 1,533 additions and 435 deletions.
2 changes: 1 addition & 1 deletion apps/console/src/features/applications/components/edit-application.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,6 @@ export const EditApplication: FunctionComponent<EditApplicationPropsInterface> =
<GeneralApplicationSettings
accessUrl={ application.accessUrl }
appId={ application.id }
certificate={ application.advancedConfigurations?.certificate }
description={ application.description }
discoverability={ application.advancedConfigurations?.discoverableByEndUsers }
imageUrl={ application.imageUrl }
Expand All @@ -410,6 +409,7 @@ export const EditApplication: FunctionComponent<EditApplicationPropsInterface> =
<ResourceTab.Pane controlledSegmentation>
<AccessConfiguration
allowedOriginList={ allowedOrigins }
certificate={ application.advancedConfigurations?.certificate }
onAllowedOriginsUpdate={ () => setIsAllowedOriginsUpdated(!isAllowedOriginsUpdated) }
onApplicationSecretRegenerate={ handleApplicationSecretRegenerate }
appId={ application.id }
Expand Down
257 changes: 6 additions & 251 deletions apps/console/src/features/applications/components/forms/general-details-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,15 @@
* under the License.
*/

import { AlertLevels, DisplayCertificate, TestableComponentInterface } from "@wso2is/core/models";
import { addAlert } from "@wso2is/core/store";
import { CertificateManagementUtils } from "@wso2is/core/utils";
import { TestableComponentInterface } from "@wso2is/core/models";
import { Field, FormValue, Forms, Validation } from "@wso2is/forms";
import { Certificate as CertificateDisplay, GenericIcon, Heading, Hint, LinkButton } from "@wso2is/react-components";
import { Hint } from "@wso2is/react-components";
import { FormValidation } from "@wso2is/validation";
import _ from "lodash";
import React, { FunctionComponent, ReactElement, useEffect, useState } from "react";
import React, { FunctionComponent, ReactElement, useState } from "react";
import { Trans, useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { Button, Grid, Icon, Modal } from "semantic-ui-react";
import { AppConstants, AppState, UIConfigInterface, getCertificateIllustrations } from "../../../core";
import { CertificateInterface, CertificateTypeInterface } from "../../models";
import { useSelector } from "react-redux";
import { Button, Grid, Icon } from "semantic-ui-react";
import { AppConstants, AppState, UIConfigInterface} from "../../../core";

/**
* Proptypes for the applications general details form component.
Expand Down Expand Up @@ -70,10 +66,6 @@ interface GeneralDetailsFormPopsInterface extends TestableComponentInterface {
* Make the form read only.
*/
readOnly?: boolean;
/**
* Current certificate configurations.
*/
certificate: CertificateInterface;
}

/**
Expand All @@ -97,7 +89,6 @@ export const GeneralDetailsForm: FunctionComponent<GeneralDetailsFormPopsInterfa
accessUrl,
onSubmit,
readOnly,
certificate,
[ "data-testid" ]: testId
} = props;

Expand All @@ -106,24 +97,6 @@ export const GeneralDetailsForm: FunctionComponent<GeneralDetailsFormPopsInterfa
const UIConfig: UIConfigInterface = useSelector((state: AppState) => state?.config?.ui);

const [ isDiscoverable, setDiscoverability ] = useState<boolean>(discoverability);
const [ isPEMSelected, setPEMSelected ] = useState<boolean>(false);
const [ certificateModal, setCertificateModal ] = useState(false);
const [ PEMValue, setPEMValue ] = useState<string>(undefined);
const [ certificateDisplay, setCertificateDisplay ] = useState<DisplayCertificate>(null);

const dispatch = useDispatch();

/**
* Set initial PEM values.
*/
useEffect(() => {
if (CertificateTypeInterface.PEM === certificate?.type) {
setPEMSelected(true);
if (certificate?.value) {
setPEMValue(certificate.value);
}
}
}, [ certificate ]);

/**
* Prepare form values for submitting.
Expand All @@ -135,10 +108,6 @@ export const GeneralDetailsForm: FunctionComponent<GeneralDetailsFormPopsInterfa
return {
accessUrl: values.get("accessUrl").toString(),
advancedConfigurations: {
certificate: {
type: values.get("type"),
value: isPEMSelected ? values.get("certificateValue") : values.get("jwksValue")
},
discoverableByEndUsers: !!values.get("discoverableByEndUsers").includes("discoverable")
},
description: values.get("description").toString(),
Expand All @@ -148,88 +117,6 @@ export const GeneralDetailsForm: FunctionComponent<GeneralDetailsFormPopsInterfa
};
};

/**
* Shows the certificate details in modal.
*/
const renderCertificateModal = (): ReactElement => {
return (
<Modal
className="certificate-display"
dimmer="blurring"
size="tiny"
open={ certificateModal }
onClose={ () => {
setCertificateModal(false);
} }
data-testid={ `${ testId }-view-certificate-modal` }
>
<Modal.Header>
<div className="certificate-ribbon">
<GenericIcon
inline
transparent
size="auto"
icon={ getCertificateIllustrations().ribbon }
/>
<div className="certificate-alias">
View Certificate - {
certificateDisplay?.alias
? certificateDisplay?.alias
: certificateDisplay?.issuerDN && (
CertificateManagementUtils.searchIssuerDNAlias(certificateDisplay?.issuerDN)
)
}
</div><br/>
<div className="certificate-serial">Serial Number: { certificateDisplay?.serialNumber }</div>
</div>
</Modal.Header>
<Modal.Content className="certificate-content">
<CertificateDisplay
certificate={ certificateDisplay }
labels={ {
issuerDN: t("console:manage.features.certificates.keystore.summary.issuerDN"),
subjectDN: t("console:manage.features.certificates.keystore.summary.subjectDN"),
validFrom: t("console:manage.features.certificates.keystore.summary.validFrom"),
validTill: t("console:manage.features.certificates.keystore.summary.validTill"),
version: t("console:manage.features.certificates.keystore.summary.version")
} }
/>
</Modal.Content>
</Modal>
);
};

/**
* Construct the details from the pem value.
*/
const viewCertificate = () => {
if (isPEMSelected && PEMValue) {
const displayCertificate: DisplayCertificate = CertificateManagementUtils.displayCertificate(
null, PEMValue);

if (displayCertificate) {
setCertificateDisplay(displayCertificate);
setCertificateModal(true);
} else {
dispatch(addAlert({
description: "Provided pem is malformed",
level: AlertLevels.ERROR,
message: "Decode Error"
}));
}
}
};

/**
* Handle view certificate.
*
* @param event Button click event.
*/
const handleCertificateView = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
viewCertificate();
};

/**
* Handles form value change.
*
Expand Down Expand Up @@ -406,138 +293,6 @@ export const GeneralDetailsForm: FunctionComponent<GeneralDetailsFormPopsInterfa
</Hint>
</Grid.Column>
</Grid.Row>
<Grid.Row columns={ 1 }>
<Grid.Column mobile={ 16 } tablet={ 16 } computer={ 8 }>
<Heading as="h4">
{ t("console:develop.features.applications.forms.advancedConfig.sections.certificate" +
".heading") }
</Heading>
<Field
label={
t("console:develop.features.applications.forms.advancedConfig.sections.certificate" +
".fields.type.label")
}
name="type"
default={ CertificateTypeInterface.JWKS }
listen={
(values) => {
setPEMSelected(values.get("type") === "PEM");
}
}
type="radio"
value={ certificate?.type }
children={ [
{
label: t("console:develop.features.applications.forms.advancedConfig.sections" +
".certificate.fields.type.children.jwks.label"),
value: CertificateTypeInterface.JWKS
},
{
label: t("console:develop.features.applications.forms.advancedConfig.sections" +
".certificate.fields.type.children.pem.label"),
value: CertificateTypeInterface.PEM
}
] }
readOnly={ readOnly }
data-testid={ `${ testId }-certificate-type-radio-group` }
/>
</Grid.Column>
</Grid.Row>
<Grid.Row columns={ 1 }>
<Grid.Column mobile={ 16 } tablet={ 16 } computer={ 8 }>
{
isPEMSelected
?
(
<>
<Field
name="certificateValue"
label={
t("console:develop.features.applications.forms.advancedConfig" +
".sections.certificate.fields.pemValue.label")
}
required={ false }
requiredErrorMessage={
t("console:develop.features.applications.forms.advancedConfig" +
".sections.certificate.fields.pemValue.validations.empty")
}
placeholder={
t("console:develop.features.applications.forms.advancedConfig" +
".sections.certificate.fields.pemValue.placeholder")
}
type="textarea"
value={
(CertificateTypeInterface.PEM === certificate?.type)
&& certificate?.value
}
listen={
(values) => {
setPEMValue(
values.get("certificateValue") as string
);
}
}
readOnly={ readOnly }
data-testid={ `${ testId }-certificate-textarea` }
/>
< Hint>
{ t("console:develop.features.applications.forms.advancedConfig.sections" +
".certificate.fields.pemValue.hint") }
</Hint>
<LinkButton
className="certificate-info-link-button"
onClick={ handleCertificateView }
disabled={ _.isEmpty(PEMValue) }
data-testid={ `${ testId }-certificate-info-button` }
>
{ t("console:develop.features.applications.forms.advancedConfig.sections" +
".certificate.fields.pemValue.actions.view") }
</LinkButton>
</>
)
: (
<>
<Field
name="jwksValue"
label={
t("console:develop.features.applications.forms.advancedConfig" +
".sections.certificate.fields.jwksValue.label")
}
required={ false }
requiredErrorMessage={
t("console:develop.features.applications.forms.advancedConfig" +
".sections.certificate.fields.jwksValue.validations.empty")
}
placeholder={
t("console:develop.features.applications.forms.advancedConfig" +
".sections.certificate.fields.jwksValue.placeholder") }
type="text"
validation={ (value: string, validation: Validation) => {
if (!FormValidation.url(value)) {
validation.isValid = false;
validation.errorMessages.push(
t(
"console:develop.features.applications.forms" +
".advancedConfig.sections.certificate.fields.jwksValue" +
".validations.invalid"
)
);
}
} }
value={
(CertificateTypeInterface.JWKS === certificate?.type)
&& certificate?.value
}
readOnly={ readOnly }
data-testid={ `${ testId }-jwks-input` }
/>
</>
)
}

</Grid.Column>
</Grid.Row>
{ certificateModal && renderCertificateModal() }
{
!readOnly && (
<Grid.Row columns={ 1 }>
Expand Down
Loading

0 comments on commit b23e246

Please sign in to comment.