Feature Availability Zone (#614)

* WIP: Add selector and info display for availability zones

* further attempts at getting the availability zone to post

* Push for Spencer

* default the availability zone in the hosting environment card itself

* Remove commented out code that didn't work

* Update hosting env snapshot

* add support to pull version manifest without token. remove ability to fetch and engagement by customer / project in path.

* feature map availability zone

* remove console.log

Co-authored-by: Jacob See <jacob.d.see@gmail.com>

Author: mcanoy

src/app.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import '@patternfly/react-core/dist/styles/base.css';
 import { BrowserRouter as Router, useLocation } from 'react-router-dom';
 import qs from 'query-string';
@@ -107,6 +107,12 @@ export const App = ({ config }: { config: Config }) => {
 const FeatureProvider = ({ children }) => {
   const location = useLocation();
   const versionContext = useContext(VersionContext);
+  useEffect(() => {
+    if (!versionContext.versions) {
+      versionContext?.fetchVersions();
+    }
+  }, [versionContext]);
+
   const { appConfig } = useConfig();
   let version = versionContext.versions?.mainVersion?.value;
   if (appConfig?.allowVersionOverride) {

src/common/app_features.ts

@@ -8,7 +8,8 @@ export const APP_FEATURES = {
   engagementCardIcons: 'engagementCardIcons',
   dashboardDateSelector: 'dashboard-date-selector',
   engagementWriter: 'engagementWriter',
-  copyFrom: 'copyFrom'
+  copyFrom: 'copyFrom',
+  availabilityZone: 'availabilityZone',
 };
 
 export type AppFeature = keyof typeof APP_FEATURES;

src/common/human_readable_engagement_field.ts

@@ -13,6 +13,7 @@ export function getHumanReadableFieldName(field: string): string {
     location: `Location`,
     ocp_cloud_provider_name: 'Cloud Provider Name',
     ocp_cloud_provider_region: 'Cloud Provider Region',
+    ocp_cloud_provider_availability_zone: 'Cloud Provider Availability Zone',
     ocp_cluster_size: 'Cluster Size',
     ocp_persistent_storage_size: `Persistent Storage Size`,
     ocp_sub_domain: 'Subdomain',

src/common/version_feature_factory.tsx

@@ -5,7 +5,9 @@ export type FeatureVersionMap = {
   [key in AppFeature]?: string;
 };
 
-export const FEATURE_VERSION_MAP: FeatureVersionMap = {};
+export const FEATURE_VERSION_MAP: FeatureVersionMap = {
+  availabilityZone: 'v1.3.40',
+};
 
 const getSemverFromVersionString = (version: string = ''): string => {
   return semver.clean(version);

src/components/engagement_data_cards/hosting_environment_card/availability_zone_tooltip.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { InfoCircleIcon } from '@patternfly/react-icons';
+import { Tooltip, TooltipPosition } from '@patternfly/react-core';
+import { EngagementFormConfig } from '../../../schemas/engagement_config';
+import { useEngagement } from '../../../context/engagement_context/engagement_hook';
+
+export function AvailabilityZoneTooltip() {
+  const { engagementFormConfig } = useEngagement();
+
+  function createTooltipText(engagementFormConfig: EngagementFormConfig) {
+    let text = [<div key={'tooltipText'} />];
+    (engagementFormConfig?.cloud_options?.availability_zones?.options ?? []).map(
+      (option: any, index: number) => {
+        return text.push(<div key={index}>{descriptionText(option)}</div>);
+      }
+    );
+    return text;
+  }
+
+  function descriptionText(option?: any) {
+    return (
+      <>
+        <b style={{ color: '#73BCF7' }}> {option.label} </b>
+        <br /> {option.description}
+        <br />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Tooltip
+        content={createTooltipText(engagementFormConfig)}
+        entryDelay={0}
+        exitDelay={10}
+        maxWidth={'45rem'}
+        isContentLeftAligned={true}
+        position={TooltipPosition.top}
+      >
+        <InfoCircleIcon style={{ fontSize: 'small', marginLeft: '1rem' }} />
+      </Tooltip>
+    </>
+  );
+}

src/components/engagement_data_cards/hosting_environment_card/hosting_environment_card.tsx

@@ -81,7 +81,14 @@ export function HostingEnvironmentCard() {
   const onSave = () => {
     saveEngagement({
       ...(currentChanges as Engagement),
-      hosting_environments: hostingEnvironments,
+      hosting_environments: hostingEnvironments.map(he => ({
+        ...he,
+        ocp_cloud_provider_availability_zone:
+          he.ocp_cloud_provider_availability_zone ??
+          engagementFormConfig?.cloud_options?.availability_zones?.options?.find(
+            element => element.default
+          ).value,
+      })),
     });
   };
 

src/components/engagement_edit_modals/__tests__/__snapshots__/hosting_environment_edit_modal.spec.tsx.snap

@@ -148,6 +148,7 @@ Object {
                       >
                         <select
                           aria-invalid="false"
+                          aria-label="Hosting Type"
                           class="pf-c-form-control"
                           data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
                           data-ouia-component-type="PF4/FormSelect"
@@ -288,6 +289,7 @@ Object {
                         
                       </div>
                     </div>
+                    
                     <div
                       class="pf-c-form__group"
                     >

src/components/engagement_edit_modals/hosting_environment_edit_modal.tsx

@@ -16,6 +16,8 @@ import { useFeatures } from '../../context/feature_context/feature_hook';
 import { APP_FEATURES } from '../../common/app_features';
 import { useSubdomainUniqueness } from '../../hooks/subdomain_checker';
 import { hasRequiredFields } from '../../common/validate_hosting_environment';
+import { AvailabilityZoneTooltip } from '../engagement_data_cards/hosting_environment_card/availability_zone_tooltip';
+
 export interface OpenShiftClusterEditModalProps {
   hostingEnvironment: Partial<HostingEnvironment>;
   isOpen: boolean;
@@ -59,7 +61,14 @@ export function OpenShiftClusterEditModal({
     hostingEnvironment
   );
 
-  const onSave = () => {
+  const onSave = async () => {
+    if (hostingEnvironment.ocp_cloud_provider_availability_zone === undefined) {
+      await setHostingEnvironment({
+        ...hostingEnvironment,
+        ocp_cloud_provider_availability_zone: engagementFormConfig?.cloud_options?.availability_zones?.options?.find(element => element.default).value,
+      } as HostingEnvironment);
+      hostingEnvironment.ocp_cloud_provider_availability_zone = engagementFormConfig?.cloud_options?.availability_zones?.options?.find(element => element.default).value;
+    }
     propsOnSave(hostingEnvironment);
     onClose();
   };
@@ -127,6 +136,7 @@ export function OpenShiftClusterEditModal({
               hostingEnvironment={hostingEnvironment}
             />
             <SelectFormField
+              arial-label="Provider Region"
               label="Provider Region"
               isDisabled={
                 availableProviderRegionOptions?.length === 0 ||
@@ -144,7 +154,29 @@ export function OpenShiftClusterEditModal({
               onChange={value => onChange('ocp_cloud_provider_region', value)}
               value={hostingEnvironment?.ocp_cloud_provider_region}
             />
+            {hasFeature(APP_FEATURES.availabilityZone) ?
+            <SelectFormField
+              aria-label='Availability Zone'
+              label={<>Availability Zone
+              <AvailabilityZoneTooltip /></>}
+              isDisabled={
+                engagementFormConfig?.cloud_options?.availability_zones?.options?.length === 0 ||
+                !hasFeature(APP_FEATURES.writer)
+              }
+              testId="provider-availability-zone-select"
+              emptyValue={{
+                label: "Select an availability zone configuration"
+              }}
+              options={engagementFormConfig?.cloud_options?.availability_zones?.options?.map?.(
+                v => ({ label: v.label, disabled: v.disabled, value: v.value })
+              )}
+              onChange={value => onChange('ocp_cloud_provider_availability_zone', value)}
+              value={hostingEnvironment?.ocp_cloud_provider_availability_zone ?? engagementFormConfig?.cloud_options?.availability_zones?.options?.find(element => element.default).value}
+            />
+
+            : ''}
             <SelectFormField
+              aria-label='OpenShift version'
               value={hostingEnvironment?.ocp_version || ''}
               testId="oc_version_select"
               emptyValue={{ label: 'Select a version' }}
@@ -170,6 +202,7 @@ export function OpenShiftClusterEditModal({
             <SelectFormField
               value={hostingEnvironment?.ocp_persistent_storage_size}
               testId="persistent-storage-select"
+              aria-label='Persistent Storage Needs'
               label="Persistent Storage Needs"
               options={engagementFormConfig?.openshift_options?.persistent_storage?.options?.map?.(
                 v => ({ label: v.label, disabled: v.disabled, value: v.value })
@@ -189,6 +222,7 @@ export function OpenShiftClusterEditModal({
               value={hostingEnvironment?.ocp_cluster_size || ''}
               emptyValue={{ label: 'Select cluster size' }}
               label="Cluster Size"
+              aria-label="Cluster Size"
               isDisabled={!hasFeature(APP_FEATURES.writer)}
               onChange={value => onChange('ocp_cluster_size', value)}
             />

src/components/engagement_form_fields/__tests__/__snapshots__/engagement_form_fields.spec.tsx.snap

@@ -163,6 +163,7 @@ Object {
         >
           <select
             aria-invalid="false"
+            aria-label="Hosting Type"
             class="pf-c-form-control"
             data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
             data-ouia-component-type="PF4/FormSelect"
@@ -264,6 +265,7 @@ Object {
       >
         <select
           aria-invalid="false"
+          aria-label="Hosting Type"
           class="pf-c-form-control"
           data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
           data-ouia-component-type="PF4/FormSelect"

src/components/engagement_form_fields/cloud_provider.tsx

@@ -23,7 +23,7 @@ export function CloudProviderFormField({
   return (
     <>
       <FormGroup fieldId="Hosting Platform" label="Hosting Type">
-        <FormSelect isRequired isDisabled={true}>
+        <FormSelect isRequired isDisabled={true} aria-label="Hosting Type">
           <FormSelectOption label={'OpenShift Container Platform'} aria-label="Hosting Platform"/>
         </FormSelect>
       </FormGroup>