From 6c30e358c57b779f5851bd0eff7d7b6cb1c4f59a Mon Sep 17 00:00:00 2001
From: Spencer Stolworthy <sdstolworthy@gmail.com>
Date: Tue, 17 Nov 2020 08:45:57 -0700
Subject: [PATCH] Multiple hosting ui improvements (#364)

* 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 <spencer@localhost.localdomain>
---
 factory.pub                                   |   2 +
 .../__snapshots__/data_cards.spec.tsx.snap    |  90 ++-
 .../openshift_cluster_card.tsx                |  60 +-
 ...openshift_cluster_edit_modal.spec.tsx.snap | 540 +++++++++++++++++-
 .../openshift_cluster_edit_modal.spec.tsx     |  36 +-
 .../openshift_cluster_edit_modal.tsx          |   4 +-
 .../cloud_provider_region.tsx                 |   3 +-
 .../engagement_form_fields/cluster_size.tsx   |   2 +-
 .../engagement_form_fields/oc_version.tsx     |   4 +-
 .../persistent_storage.tsx                    |   4 +-
 .../engagement_form_fields/subdomain.tsx      |   2 +-
 src/components/ready_check/ready_check.tsx    |  32 ++
 .../required_fields_warning.tsx               |  53 +-
 13 files changed, 727 insertions(+), 105 deletions(-)
 create mode 100644 factory.pub
 create mode 100644 src/components/ready_check/ready_check.tsx

diff --git a/factory.pub b/factory.pub
new file mode 100644
index 000000000..4c6989d04
--- /dev/null
+++ b/factory.pub
@@ -0,0 +1,2 @@
+untrusted comment: GrapheneOS factory images public key
+RWQZW9NItOuQYJ86EooQBxScfclrWiieJtAO9GpnfEjKbCO/3FriLGX3
diff --git a/src/components/engagement_data_cards/__tests__/__snapshots__/data_cards.spec.tsx.snap b/src/components/engagement_data_cards/__tests__/__snapshots__/data_cards.spec.tsx.snap
index 38607151f..add869453 100644
--- a/src/components/engagement_data_cards/__tests__/__snapshots__/data_cards.spec.tsx.snap
+++ b/src/components/engagement_data_cards/__tests__/__snapshots__/data_cards.spec.tsx.snap
@@ -582,8 +582,13 @@ 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"
                 >
@@ -591,7 +596,7 @@ Object {
                 </th>
                 <th
                   class=""
-                  data-key="1"
+                  data-key="2"
                   data-label="Hosting Type"
                   scope="col"
                 >
@@ -599,7 +604,7 @@ Object {
                 </th>
                 <th
                   class=""
-                  data-key="2"
+                  data-key="3"
                   data-label="Version"
                   scope="col"
                 >
@@ -607,7 +612,7 @@ Object {
                 </th>
                 <th
                   class=""
-                  data-key="3"
+                  data-key="4"
                   data-label="Cloud Provider"
                   scope="col"
                 >
@@ -615,7 +620,7 @@ Object {
                 </th>
                 <th
                   class=""
-                  data-key="4"
+                  data-key="5"
                   data-label="Actions"
                   scope="col"
                 >
@@ -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>
@@ -716,8 +741,13 @@ 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"
               >
@@ -725,7 +755,7 @@ Object {
               </th>
               <th
                 class=""
-                data-key="1"
+                data-key="2"
                 data-label="Hosting Type"
                 scope="col"
               >
@@ -733,7 +763,7 @@ Object {
               </th>
               <th
                 class=""
-                data-key="2"
+                data-key="3"
                 data-label="Version"
                 scope="col"
               >
@@ -741,7 +771,7 @@ Object {
               </th>
               <th
                 class=""
-                data-key="3"
+                data-key="4"
                 data-label="Cloud Provider"
                 scope="col"
               >
@@ -749,7 +779,7 @@ Object {
               </th>
               <th
                 class=""
-                data-key="4"
+                data-key="5"
                 data-label="Actions"
                 scope="col"
               >
@@ -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>
@@ -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"
@@ -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"
diff --git a/src/components/engagement_data_cards/openshift_cluster_card/openshift_cluster_card.tsx b/src/components/engagement_data_cards/openshift_cluster_card/openshift_cluster_card.tsx
index 102e55c76..b96915032 100644
--- a/src/components/engagement_data_cards/openshift_cluster_card/openshift_cluster_card.tsx
+++ b/src/components/engagement_data_cards/openshift_cluster_card/openshift_cluster_card.tsx
@@ -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,
@@ -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;
@@ -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);
   };
@@ -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' },
@@ -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(
@@ -162,7 +185,6 @@ export function OpenShiftClusterSummaryCard({
     <>
       <OpenShiftClusterEditModal
         isEngagementLaunched={!!currentEngagementChanges?.launch}
-        engagementFormConfig={engagementFormConfig}
         onSave={onSave}
         onClose={onClose}
         hostingEnvironment={currentHostingEnvironment}
diff --git a/src/components/engagement_edit_modals/__tests__/__snapshots__/openshift_cluster_edit_modal.spec.tsx.snap b/src/components/engagement_edit_modals/__tests__/__snapshots__/openshift_cluster_edit_modal.spec.tsx.snap
index 132ed1c2c..dc50d1969 100644
--- a/src/components/engagement_edit_modals/__tests__/__snapshots__/openshift_cluster_edit_modal.spec.tsx.snap
+++ b/src/components/engagement_edit_modals/__tests__/__snapshots__/openshift_cluster_edit_modal.spec.tsx.snap
@@ -3,14 +3,544 @@
 exports[`Point of Contact edit modal matches snapshot 1`] = `
 Object {
   "asFragment": [Function],
-  "baseElement": <body>
+  "baseElement": <body
+    class="pf-c-backdrop__open"
+  >
+    <div
+      aria-hidden="true"
+    />
     <div>
-      <div />
+      <div
+        class="pf-c-backdrop"
+      >
+        <div
+          class="pf-l-bullseye"
+        >
+          <div
+            aria-describedby="pf-modal-part-2"
+            aria-labelledby="pf-modal-part-1"
+            aria-modal="true"
+            class="pf-c-modal-box pf-m-lg"
+            data-ouia-component-id="0"
+            data-ouia-component-type="PF4/ModalContent"
+            data-ouia-safe="true"
+            id="pf-modal-part-0"
+            role="dialog"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Close"
+              class="pf-c-button pf-m-plain"
+              data-ouia-component-id="1"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 352 512"
+                width="1em"
+              >
+                <path
+                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  transform=""
+                />
+              </svg>
+            </button>
+            <header
+              class="pf-c-modal-box__header"
+            >
+              <h1
+                class="pf-c-modal-box__title pf-c-modal-box__title"
+                id="pf-modal-part-1"
+              >
+                Hosting Environment
+              </h1>
+            </header>
+            <div
+              class="pf-c-modal-box__body"
+              id="pf-modal-part-2"
+            >
+              <section
+                class="pf-c-page__main-section"
+              >
+                <form
+                  class="pf-c-form pf-m-horizontal"
+                  novalidate=""
+                >
+                  <div
+                    class="pf-c-form__group"
+                  >
+                    <div
+                      class="pf-c-form__group-label"
+                    >
+                      <label
+                        class="pf-c-form__label"
+                        for="subdomain"
+                      >
+                        <span
+                          class="pf-c-form__label-text"
+                        >
+                          Environment Name
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="pf-c-form__label-required"
+                        >
+                           
+                          *
+                        </span>
+                      </label>
+                       
+                    </div>
+                    <div
+                      class="pf-c-form__group-control"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="pf-c-form-control"
+                        data-cy="desired_subdomain_input"
+                        data-testid="subdomain-input"
+                        id="ocp_sub_domain"
+                        name="ocp_sub_domain"
+                        required=""
+                        type="text"
+                        value="name"
+                      />
+                      
+                    </div>
+                  </div>
+                  <div
+                    class="pf-c-form__group"
+                  >
+                    <div
+                      class="pf-c-form__group-label"
+                    >
+                      <label
+                        class="pf-c-form__label"
+                        for="Hosting Platform"
+                      >
+                        <span
+                          class="pf-c-form__label-text"
+                        >
+                          Hosting Type
+                        </span>
+                      </label>
+                       
+                    </div>
+                    <div
+                      class="pf-c-form__group-control"
+                    >
+                      <select
+                        aria-invalid="false"
+                        class="pf-c-form-control"
+                        data-ouia-component-id="2"
+                        data-ouia-component-type="PF4/FormSelect"
+                        data-ouia-safe="true"
+                        disabled=""
+                        required=""
+                      >
+                        <option
+                          class=""
+                          value=""
+                        >
+                          OpenShift Container Platform
+                        </option>
+                      </select>
+                      
+                    </div>
+                  </div>
+                  <div
+                    class="pf-c-form__group"
+                  >
+                    <div
+                      class="pf-c-form__group-label"
+                    >
+                      <label
+                        class="pf-c-form__label"
+                        for="cloud-provider"
+                      >
+                        <span
+                          class="pf-c-form__label-text"
+                        >
+                          Cloud Provider
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="pf-c-form__label-required"
+                        >
+                           
+                          *
+                        </span>
+                      </label>
+                       
+                    </div>
+                    <div
+                      class="pf-c-form__group-control"
+                    >
+                      <select
+                        aria-invalid="false"
+                        aria-label="Cloud Provider"
+                        class="pf-c-form-control"
+                        data-ouia-component-id="3"
+                        data-ouia-component-type="PF4/FormSelect"
+                        data-ouia-safe="true"
+                        data-testid="cloud-provider-select"
+                        disabled=""
+                        id="cloud_provider_dropdown"
+                        required=""
+                      >
+                        <option
+                          class=""
+                          value=""
+                        >
+                          Select a provider
+                        </option>
+                        <option
+                          class=""
+                          data-cy="AWS"
+                          value="AWS"
+                        >
+                          AWS
+                        </option>
+                      </select>
+                      
+                    </div>
+                  </div>
+                  <div
+                    class="pf-c-form__group"
+                  >
+                    <div
+                      class="pf-c-form__group-label"
+                    >
+                      <label
+                        class="pf-c-form__label"
+                        for="cloud-provider-region"
+                      >
+                        <span
+                          class="pf-c-form__label-text"
+                        >
+                          Provider Region
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="pf-c-form__label-required"
+                        >
+                           
+                          *
+                        </span>
+                      </label>
+                       
+                    </div>
+                    <div
+                      class="pf-c-form__group-control"
+                    >
+                      <select
+                        aria-invalid="false"
+                        aria-label="Cloud provider region"
+                        class="pf-c-form-control"
+                        data-ouia-component-id="4"
+                        data-ouia-component-type="PF4/FormSelect"
+                        data-ouia-safe="true"
+                        data-testid="provider-region-select"
+                        disabled=""
+                        id="cloud_provider_region_dropdown"
+                      >
+                        <option
+                          class=""
+                          value=""
+                        >
+                          Select a region
+                        </option>
+                        <option
+                          class=""
+                          data-cy="N. Virginia"
+                          disabled=""
+                          value="N. Virginia"
+                        >
+                          N. Virginia
+                        </option>
+                      </select>
+                      
+                    </div>
+                  </div>
+                  <div
+                    class="pf-c-form__group"
+                  >
+                    <div
+                      class="pf-c-form__group-label"
+                    >
+                      <label
+                        class="pf-c-form__label"
+                        for="openshift-provider"
+                      >
+                        <span
+                          class="pf-c-form__label-text"
+                        >
+                          OpenShift Version
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="pf-c-form__label-required"
+                        >
+                           
+                          *
+                        </span>
+                      </label>
+                       
+                    </div>
+                    <div
+                      class="pf-c-form__group-control"
+                    >
+                      <select
+                        aria-invalid="false"
+                        aria-label="OpenShift Version"
+                        class="pf-c-form-control"
+                        data-ouia-component-id="5"
+                        data-ouia-component-type="PF4/FormSelect"
+                        data-ouia-safe="true"
+                        data-testid="oc-version-select"
+                        disabled=""
+                        id="oc_version_dropdown"
+                      >
+                        <option
+                          class=""
+                          value=""
+                        >
+                          Select OpenShift version
+                        </option>
+                      </select>
+                      
+                    </div>
+                  </div>
+                  <div
+                    class="pf-c-form__group"
+                  >
+                    <div
+                      class="pf-c-form__group-label"
+                    >
+                      <label
+                        class="pf-c-form__label"
+                        for="subdomain"
+                      >
+                        <span
+                          class="pf-c-form__label-text"
+                        >
+                          Desired Subdomain
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="pf-c-form__label-required"
+                        >
+                           
+                          *
+                        </span>
+                      </label>
+                       
+                    </div>
+                    <div
+                      class="pf-c-form__group-control"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="pf-c-form-control"
+                        data-cy="desired_subdomain_input"
+                        data-testid="subdomain-input"
+                        disabled=""
+                        id="ocp_sub_domain"
+                        name="ocp_sub_domain"
+                        required=""
+                        type="text"
+                        value="ordoabchao"
+                      />
+                      <div>
+                        Applications will live at: 
+                        <strong>
+                          ordoabchao.na-1.rht-labs.com
+                        </strong>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="pf-c-form__group"
+                  >
+                    <div
+                      class="pf-c-form__group-label"
+                    >
+                      <label
+                        class="pf-c-form__label"
+                        for="persistent-storage-needs"
+                      >
+                        <span
+                          class="pf-c-form__label-text"
+                        >
+                          Persistent Storage Needs
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="pf-c-form__label-required"
+                        >
+                           
+                          *
+                        </span>
+                      </label>
+                       
+                    </div>
+                    <div
+                      class="pf-c-form__group-control"
+                    >
+                      <select
+                        aria-invalid="false"
+                        aria-label="Persistent Storage Needs"
+                        class="pf-c-form-control"
+                        data-ouia-component-id="6"
+                        data-ouia-component-type="PF4/FormSelect"
+                        data-ouia-safe="true"
+                        data-testid="persistent-storage-select"
+                        disabled=""
+                        id="persistent_storage_dropdown"
+                      >
+                        <option
+                          class=""
+                          value=""
+                        >
+                          Select storage size
+                        </option>
+                      </select>
+                      
+                    </div>
+                  </div>
+                  <div
+                    class="pf-c-form__group"
+                  >
+                    <div
+                      class="pf-c-form__group-label"
+                    >
+                      <label
+                        class="pf-c-form__label"
+                        for="cluster-size"
+                      >
+                        <span
+                          class="pf-c-form__label-text"
+                        >
+                          Cluster Size
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="pf-c-form__label-required"
+                        >
+                           
+                          *
+                        </span>
+                      </label>
+                       
+                    </div>
+                    <div
+                      class="pf-c-form__group-control"
+                    >
+                      <select
+                        aria-invalid="false"
+                        aria-label="Cluster Size"
+                        class="pf-c-form-control"
+                        data-ouia-component-id="7"
+                        data-ouia-component-type="PF4/FormSelect"
+                        data-ouia-safe="true"
+                        data-testid="cluster-size-select"
+                        disabled=""
+                        id="cluster_size_dropdown"
+                        required=""
+                      >
+                        <option
+                          class=""
+                          value=""
+                        >
+                          Select cluster size
+                        </option>
+                      </select>
+                      
+                    </div>
+                  </div>
+                  <div
+                    class="pf-c-form__group"
+                  >
+                    <div
+                      class="pf-c-form__group-label"
+                    >
+                      <label
+                        class="pf-c-form__label"
+                        for="additional_details"
+                      >
+                        <span
+                          class="pf-c-form__label-text"
+                        >
+                          Additional Information
+                        </span>
+                      </label>
+                       
+                    </div>
+                    <div
+                      class="pf-c-form__group-control"
+                    >
+                      <textarea
+                        aria-invalid="false"
+                        aria-label="Additional provisioning information"
+                        class="pf-c-form-control pf-m-resize-vertical"
+                        data-testid="additional-details-text-area"
+                        disabled=""
+                        id="additional_details"
+                        name="additional_details"
+                        placeholder="Provide additional details"
+                      >
+                        details
+                      </textarea>
+                      
+                    </div>
+                  </div>
+                </form>
+              </section>
+              <section
+                class="pf-c-page__main-section"
+              >
+                <div
+                  style="margin-top: 1rem;"
+                >
+                  <div
+                    class="pf-l-flex pf-m-justify-content-flex-end"
+                  >
+                    <div
+                      class=""
+                    >
+                      <div>
+                        <button
+                          aria-disabled="false"
+                          class="pf-c-button pf-m-primary"
+                          data-cy="hosting_env_save"
+                          data-ouia-component-id="8"
+                          data-ouia-component-type="PF4/Button"
+                          data-ouia-safe="true"
+                          data-testid="oc-edit-save"
+                          type="button"
+                        >
+                          Save
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </body>,
-  "container": <div>
-    <div />
-  </div>,
+  "container": <div
+    aria-hidden="true"
+  />,
   "debug": [Function],
   "findAllByAltText": [Function],
   "findAllByDisplayValue": [Function],
diff --git a/src/components/engagement_edit_modals/__tests__/openshift_cluster_edit_modal.spec.tsx b/src/components/engagement_edit_modals/__tests__/openshift_cluster_edit_modal.spec.tsx
index 58a63dcc1..9173d1e1d 100644
--- a/src/components/engagement_edit_modals/__tests__/openshift_cluster_edit_modal.spec.tsx
+++ b/src/components/engagement_edit_modals/__tests__/openshift_cluster_edit_modal.spec.tsx
@@ -2,19 +2,22 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { OpenShiftClusterEditModal } from '../openshift_cluster_edit_modal';
 import { Engagement } from '../../../schemas/engagement';
-import { EngagementFormConfig } from '../../../schemas/engagement_config';
+import { HostingEnvironment } from '../../../schemas/hosting_environment';
+import { TestStateWrapper } from '../../../common/test_state_wrapper';
 
 describe('Point of Contact edit modal', () => {
   test('matches snapshot', () => {
     expect(
       render(
-        <OpenShiftClusterEditModal
-          onSave={() => {}}
-          engagementFormConfig={{}}
-          isOpen={true}
-          engagement={Engagement.fromFake(true)}
-          onChange={() => {}}
-        />
+        <TestStateWrapper>
+          <OpenShiftClusterEditModal
+            hostingEnvironment={HostingEnvironment.fromFake(true)}
+            isEngagementLaunched={false}
+            onClose={() => {}}
+            onSave={() => {}}
+            isOpen={true}
+          />
+        </TestStateWrapper>
       )
     ).toMatchSnapshot();
   });
@@ -22,14 +25,15 @@ describe('Point of Contact edit modal', () => {
   test('When clicking the save button, the onSave method is called', async () => {
     const onSave = jest.fn();
     const { getByTestId } = render(
-      <OpenShiftClusterEditModal
-        onSave={onSave}
-        hostingEnvironment={Engagement.fromFake(true).hosting_environments[0]}
-        engagementFormConfig={({} as unknown) as EngagementFormConfig}
-        isOpen={true}
-        isEngagementLaunched={false}
-        onClose={() => {}}
-      />
+      <TestStateWrapper>
+        <OpenShiftClusterEditModal
+          onSave={onSave}
+          hostingEnvironment={Engagement.fromFake(true).hosting_environments[0]}
+          isOpen={true}
+          isEngagementLaunched={false}
+          onClose={() => {}}
+        />
+      </TestStateWrapper>
     );
     await fireEvent.click(getByTestId('oc-edit-save'));
     expect(onSave).toHaveBeenCalled();
diff --git a/src/components/engagement_edit_modals/openshift_cluster_edit_modal.tsx b/src/components/engagement_edit_modals/openshift_cluster_edit_modal.tsx
index a108945db..a83548378 100644
--- a/src/components/engagement_edit_modals/openshift_cluster_edit_modal.tsx
+++ b/src/components/engagement_edit_modals/openshift_cluster_edit_modal.tsx
@@ -20,8 +20,8 @@ import { PersistentStorageFormField } from '../engagement_form_fields/persistent
 import { ClusterSizeFormField } from '../engagement_form_fields/cluster_size';
 import { AdditionalDetailsFormField } from '../engagement_form_fields/additional_details';
 import { HostingEnvironment } from '../../schemas/hosting_environment';
+import { useEngagementConfig } from '../../context/engagement_context/engagement_config_hook';
 export interface OpenShiftClusterEditModalProps {
-  engagementFormConfig: EngagementFormConfig;
   hostingEnvironment: HostingEnvironment;
   isOpen: boolean;
   onSave: (hostingEnvironment: HostingEnvironment) => void;
@@ -32,7 +32,6 @@ export interface OpenShiftClusterEditModalProps {
 export function OpenShiftClusterEditModal({
   onClose = () => {},
   hostingEnvironment: propsHostingEnvironment,
-  engagementFormConfig,
   isOpen,
   onSave: propsOnSave,
   isEngagementLaunched,
@@ -40,6 +39,7 @@ export function OpenShiftClusterEditModal({
   const [hostingEnvironment, setHostingEnvironment] = useState<
     HostingEnvironment
   >();
+  const { engagementFormConfig } = useEngagementConfig();
 
   useEffect(() => {
     setHostingEnvironment(propsHostingEnvironment);
diff --git a/src/components/engagement_form_fields/cloud_provider_region.tsx b/src/components/engagement_form_fields/cloud_provider_region.tsx
index 0c6ba566a..6887f30e1 100644
--- a/src/components/engagement_form_fields/cloud_provider_region.tsx
+++ b/src/components/engagement_form_fields/cloud_provider_region.tsx
@@ -37,8 +37,7 @@ export function CloudProviderRegionFormField({
         id={'cloud_provider_region_dropdown'}
         isDisabled={
           availableProviderRegionOptions?.length === 0 ||
-          !hasFeature(APP_FEATURES.writer) ||
-          isEngagementLaunched
+          !hasFeature(APP_FEATURES.writer)
         }
         readOnly={availableProviderRegionOptions?.length === 0}
         value={hostingEnvironment?.ocp_cloud_provider_region || ''}
diff --git a/src/components/engagement_form_fields/cluster_size.tsx b/src/components/engagement_form_fields/cluster_size.tsx
index 3fed7b72a..00eb8fbdf 100644
--- a/src/components/engagement_form_fields/cluster_size.tsx
+++ b/src/components/engagement_form_fields/cluster_size.tsx
@@ -34,7 +34,7 @@ export function ClusterSizeFormField({
         id="cluster_size_dropdown"
         aria-label="Cluster Size"
         value={hostingEnvironment?.ocp_cluster_size || ''}
-        isDisabled={!hasFeature(APP_FEATURES.writer) || isEngagementLaunched}
+        isDisabled={!hasFeature(APP_FEATURES.writer)}
         onChange={onChange}
       >
         {[
diff --git a/src/components/engagement_form_fields/oc_version.tsx b/src/components/engagement_form_fields/oc_version.tsx
index 27950cc5a..32134fb7c 100644
--- a/src/components/engagement_form_fields/oc_version.tsx
+++ b/src/components/engagement_form_fields/oc_version.tsx
@@ -39,9 +39,7 @@ export function OpenShiftVersionFormField({
         value={hostingEnvironment?.ocp_version || ''}
         isDisabled={
           engagementFormConfig?.openshift_options?.versions?.options?.length ===
-            1 ||
-          !hasFeature(APP_FEATURES.writer) ||
-          isEngagementLaunched
+            1 || !hasFeature(APP_FEATURES.writer)
         }
         onChange={onChange}
       >
diff --git a/src/components/engagement_form_fields/persistent_storage.tsx b/src/components/engagement_form_fields/persistent_storage.tsx
index d1ae608a3..95be3d525 100644
--- a/src/components/engagement_form_fields/persistent_storage.tsx
+++ b/src/components/engagement_form_fields/persistent_storage.tsx
@@ -41,9 +41,7 @@ export function PersistentStorageFormField({
         id={'persistent_storage_dropdown'}
         isDisabled={
           engagementFormConfig?.openshift_options?.persistent_storage?.options
-            ?.length === 1 ||
-          !hasFeature(APP_FEATURES.writer) ||
-          isEngagementLaunched
+            ?.length === 1 || !hasFeature(APP_FEATURES.writer)
         }
         onChange={onChange}
         value={hostingEnvironment?.ocp_persistent_storage_size || ''}
diff --git a/src/components/engagement_form_fields/subdomain.tsx b/src/components/engagement_form_fields/subdomain.tsx
index 9c115f8c3..8b1a8b076 100644
--- a/src/components/engagement_form_fields/subdomain.tsx
+++ b/src/components/engagement_form_fields/subdomain.tsx
@@ -63,7 +63,7 @@ export function SubdomainFormField({
       <TextInput
         isRequired
         data-testid="subdomain-input"
-        isDisabled={!hasFeature(APP_FEATURES.writer) || isEngagementLaunched}
+        isDisabled={!hasFeature(APP_FEATURES.writer)}
         type="text"
         id="ocp_sub_domain"
         name="ocp_sub_domain"
diff --git a/src/components/ready_check/ready_check.tsx b/src/components/ready_check/ready_check.tsx
new file mode 100644
index 000000000..ad7e7b132
--- /dev/null
+++ b/src/components/ready_check/ready_check.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Tooltip } from '@patternfly/react-core';
+import { CheckCircleIcon } from '@patternfly/react-icons';
+import { ReactChild } from 'react';
+
+export interface ReadyCheckProps {
+  isReady?: boolean;
+  readyTooltip?: ReactChild;
+  notReadyTooltip?: ReactChild;
+  readyColor?: string;
+  notReadyColor?: string;
+}
+
+export function ReadyCheck(props: ReadyCheckProps) {
+  const {
+    isReady = false,
+    readyTooltip = '',
+    notReadyTooltip = '',
+    readyColor = 'green',
+    notReadyColor = 'lightgrey',
+  } = props;
+
+  return (
+    <Tooltip
+      content={isReady ? readyTooltip : notReadyTooltip}
+      entryDelay={10}
+      exitDelay={10}
+    >
+      <CheckCircleIcon color={isReady ? readyColor : notReadyColor} />
+    </Tooltip>
+  );
+}
diff --git a/src/components/required_fields_warning/required_fields_warning.tsx b/src/components/required_fields_warning/required_fields_warning.tsx
index 4f013bc79..8f4d78a0e 100644
--- a/src/components/required_fields_warning/required_fields_warning.tsx
+++ b/src/components/required_fields_warning/required_fields_warning.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { CheckCircleIcon } from '@patternfly/react-icons';
-import { Tooltip } from '@patternfly/react-core';
 import { getHumanReadableFieldName } from '../../common/human_readable_engagement_field';
+import { ReadyCheck } from '../ready_check/ready_check';
 interface RequiredFieldsWarningProps {
   requiredFields: string[];
   missingRequiredFields: string[];
@@ -13,37 +12,25 @@ export function RequiredFieldsWarning({
   const neededFields = requiredFields
     .filter(field => missingRequiredFields.includes(field))
     .map(field => getHumanReadableFieldName(field));
-  if (!neededFields?.length) {
-    return (
-      <Tooltip
-        content="All required fields are completed"
-        entryDelay={10}
-        exitDelay={10}
-      >
-        <CheckCircleIcon color="green" />
-      </Tooltip>
-    );
-  }
+  const isReady = neededFields?.length === 0;
+  const notReadyTooltip = (
+    <div>
+      <div>Missing required fields:</div>
+      <div>
+        <ul>
+          {neededFields.map(field => (
+            <li>{field}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+  const readyTooltip = 'All required fields are completed';
   return (
-    <span>
-      <Tooltip
-        content={
-          <div>
-            <div>Missing required fields:</div>
-            <div>
-              <ul>
-                {neededFields.map(field => (
-                  <li>{field}</li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        }
-        entryDelay={10}
-        exitDelay={10}
-      >
-        <CheckCircleIcon color="lightgrey" />
-      </Tooltip>
-    </span>
+    <ReadyCheck
+      isReady={isReady}
+      notReadyTooltip={notReadyTooltip}
+      readyTooltip={readyTooltip}
+    />
   );
 }