Skip to content

Commit

Permalink
Multiple hosting ui improvements (#364)
Browse files Browse the repository at this point in the history 
* add date to config json to avoid caching

* fixed syntax error on qs

* added ReadyCheck component, refactored the required fields warning to use ReadyCheck

* ready check functioning as expected. can add HE after launch

* removed delete

* updated tests

Co-authored-by: Spencer Dean Stolworthy <[email protected]>
  • Loading branch information
@sdstolworthy
sdstolworthy and Spencer Dean Stolworthy authored Nov 17, 2020
1 parent 70e1716 commit 6c30e35
Show file tree
Hide file tree
Showing 13 changed files with 727 additions and 105 deletions.
2 changes: 2 additions & 0 deletions factory.pub
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
untrusted comment: GrapheneOS factory images public key
RWQZW9NItOuQYJ86EooQBxScfclrWiieJtAO9GpnfEjKbCO/3FriLGX3
90 changes: 70 additions & 20 deletions src/components/engagement_data_cards/__tests__/__snapshots__/data_cards.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -582,40 +582,45 @@ Object {
>
<tr>
<th
class=""
class="pf-m-width-10"
data-key="0"
data-label=""
/>
<th
class=""
data-key="1"
data-label="Environment Name"
scope="col"
>
Environment Name
</th>
<th
class=""
data-key="1"
data-key="2"
data-label="Hosting Type"
scope="col"
>
Hosting Type
</th>
<th
class=""
data-key="2"
data-key="3"
data-label="Version"
scope="col"
>
Version
</th>
<th
class=""
data-key="3"
data-key="4"
data-label="Cloud Provider"
scope="col"
>
Cloud Provider
</th>
<th
class=""
data-key="4"
data-key="5"
data-label="Actions"
scope="col"
>
Expand All @@ -635,34 +640,54 @@ Object {
<td
class=""
data-key="0"
>
<svg
aria-describedby="pf-tooltip-2"
aria-hidden="true"
fill="green"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
transform=""
/>
</svg>
</td>
<td
class=""
data-key="1"
data-label="Environment Name"
>
name
</td>
<td
class=""
data-key="1"
data-key="2"
data-label="Hosting Type"
>
Openshift Container Platform
</td>
<td
class=""
data-key="2"
data-key="3"
data-label="Version"
>
4.4
</td>
<td
class=""
data-key="3"
data-key="4"
data-label="Cloud Provider"
>
AWS
</td>
<td
class=""
data-key="4"
data-key="5"
data-label="Actions"
/>
</tr>
Expand Down Expand Up @@ -716,40 +741,45 @@ Object {
>
<tr>
<th
class=""
class="pf-m-width-10"
data-key="0"
data-label=""
/>
<th
class=""
data-key="1"
data-label="Environment Name"
scope="col"
>
Environment Name
</th>
<th
class=""
data-key="1"
data-key="2"
data-label="Hosting Type"
scope="col"
>
Hosting Type
</th>
<th
class=""
data-key="2"
data-key="3"
data-label="Version"
scope="col"
>
Version
</th>
<th
class=""
data-key="3"
data-key="4"
data-label="Cloud Provider"
scope="col"
>
Cloud Provider
</th>
<th
class=""
data-key="4"
data-key="5"
data-label="Actions"
scope="col"
>
Expand All @@ -769,34 +799,54 @@ Object {
<td
class=""
data-key="0"
>
<svg
aria-describedby="pf-tooltip-2"
aria-hidden="true"
fill="green"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
transform=""
/>
</svg>
</td>
<td
class=""
data-key="1"
data-label="Environment Name"
>
name
</td>
<td
class=""
data-key="1"
data-key="2"
data-label="Hosting Type"
>
Openshift Container Platform
</td>
<td
class=""
data-key="2"
data-key="3"
data-label="Version"
>
4.4
</td>
<td
class=""
data-key="3"
data-key="4"
data-label="Cloud Provider"
>
AWS
</td>
<td
class=""
data-key="4"
data-key="5"
data-label="Actions"
/>
</tr>
Expand Down Expand Up @@ -885,7 +935,7 @@ Object {
Points of Contact
  
<svg
aria-describedby="pf-tooltip-2"
aria-describedby="pf-tooltip-4"
aria-hidden="true"
fill="green"
height="1em"
Expand Down Expand Up @@ -1001,7 +1051,7 @@ Object {
Points of Contact
  
<svg
aria-describedby="pf-tooltip-2"
aria-describedby="pf-tooltip-4"
aria-hidden="true"
fill="green"
height="1em"
Expand Down
60 changes: 41 additions & 19 deletions src/components/engagement_data_cards/openshift_cluster_card/openshift_cluster_card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { EditButton } from '../../data_card_edit_button/data_card_edit_button';
import { DatabaseIcon, PlusIcon } from '@patternfly/react-icons';
import { HostingEnvironment } from '../../../schemas/hosting_environment';
import {
cellWidth,
Table,
TableBody,
TableHeader,
Expand All @@ -29,8 +30,17 @@ import { uuid } from 'uuidv4';
import { useEngagements } from '../../../context/engagement_context/engagement_hook';
import { useEngagementConfig } from '../../../context/engagement_context/engagement_config_hook';
import { FormManager } from '../../../context/form_manager/form_manager';
import { ReadyCheck } from '../../ready_check/ready_check';

const OPENSHIFT_MODAL_KEY = 'openshift_modal';
const requiredHostingEnvironmentFields: Array<keyof HostingEnvironment> = [
'ocp_cloud_provider_name',
'ocp_cloud_provider_region',
'ocp_persistent_storage_size',
'ocp_sub_domain',
'ocp_version',
'environment_name',
];

export interface OpenShiftClusterSummaryCardProps {
currentEngagementChanges: Engagement;
Expand Down Expand Up @@ -83,21 +93,21 @@ export function OpenShiftClusterSummaryCard({
setCurrentHostingEnvironment(hostingEnvironment);
requestOpen(OPENSHIFT_MODAL_KEY);
};
const onDelete = (hostingEnvironment: HostingEnvironment) => {
const hostingEnvironments = [
...currentEngagementChanges.hosting_environments,
];
hostingEnvironments.splice(
hostingEnvironments.findIndex(p => p.id === hostingEnvironment.id),
1
);
onChange(hostingEnvironments);
propsOnSave(hostingEnvironments);
saveEngagement({
...currentEngagementChanges,
hosting_environments: hostingEnvironments,
});
};
// const onDelete = (hostingEnvironment: HostingEnvironment) => {
// const hostingEnvironments = [
// ...currentEngagementChanges.hosting_environments,
// ];
// hostingEnvironments.splice(
// hostingEnvironments.findIndex(p => p.id === hostingEnvironment.id),
// 1
// );
// onChange(hostingEnvironments);
// propsOnSave(hostingEnvironments);
// saveEngagement({
// ...currentEngagementChanges,
// hosting_environments: hostingEnvironments,
// });
// };
const addProvider = () => {
openHostingEnvironmentModal({ id: uuid() } as HostingEnvironment);
};
Expand All @@ -108,11 +118,12 @@ export function OpenShiftClusterSummaryCard({
>
Edit
</DropdownItem>,
<DropdownItem onClick={() => onDelete(hostingEnvironment)} key="delete">
Delete
</DropdownItem>,
// <DropdownItem onClick={() => onDelete(hostingEnvironment)} key="delete">
// Delete
// </DropdownItem>,
];
const columns = [
{ title: '', transforms: [cellWidth(10)] },
{ title: 'Environment Name' },
{ title: 'Hosting Type' },
{ title: 'Version' },
Expand All @@ -121,6 +132,18 @@ export function OpenShiftClusterSummaryCard({
];
const rows = currentEngagementChanges?.hosting_environments?.map?.(
(hostingEnvironment, idx) => [
{
title: (
<ReadyCheck
isReady={requiredHostingEnvironmentFields.every(
f =>
hostingEnvironment[f] !== undefined &&
hostingEnvironment[f] !== null &&
hostingEnvironment[f] !== ''
)}
/>
),
},
hostingEnvironment.environment_name,
'Openshift Container Platform',
getHumanReadableLabel(
Expand Down Expand Up @@ -162,7 +185,6 @@ export function OpenShiftClusterSummaryCard({
<>
<OpenShiftClusterEditModal
isEngagementLaunched={!!currentEngagementChanges?.launch}
engagementFormConfig={engagementFormConfig}
onSave={onSave}
onClose={onClose}
hostingEnvironment={currentHostingEnvironment}
Expand Down
Loading

0 comments on commit 6c30e35

Please sign in to comment.