fix: a bunch of visual defects

src/Components/CreateTemplateWorkflow/CreateWorkflowContent/CreateWorkflowContent.tsx

@@ -155,9 +155,6 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                     placeholder="Select a team"
                     invalid={teamError && teamTouched}
                     invalidText="Team is required"
-                    shouldFilterItem={({ item, inputValue }: { item: ComboBoxItem; inputValue: string }) =>
-                      item && item.name.toLowerCase().includes(inputValue.toLowerCase())
-                    }
                   />
 
                   <TextInput
@@ -166,7 +163,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                     value={values.name}
                     onBlur={handleBlur}
                     onChange={handleChange}
-                    invalid={errors.name && touched.name}
+                    invalid={Boolean(errors.name && touched.name)}
                     invalidText={errors.name}
                   />
                 </div>
@@ -177,7 +174,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                   value={values.name}
                   onBlur={handleBlur}
                   onChange={handleChange}
-                  invalid={errors.name && touched.name}
+                  invalid={Boolean(errors.name && touched.name)}
                   invalidText={errors.name}
                 />
               )}
@@ -187,15 +184,15 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                 value={values.summary}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.summary && touched.summary}
+                invalid={Boolean(errors.summary && touched.summary)}
                 invalidText={errors.summary}
               />
               <TextArea
                 id="description"
                 labelText="Description"
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.description && touched.description}
+                invalid={Boolean(errors.description && touched.description)}
                 invalidText={errors.description}
                 style={{ resize: "none", width: "100%" }}
                 value={values.description}

src/Components/CreateWorkflow/CreateWorkflowContent/CreateWorkflowContent.tsx

@@ -103,9 +103,6 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                     placeholder="Select a team"
                     invalid={scope === WorkflowScope.Team && !Boolean(selectedTeam)}
                     invalidText="Team is required"
-                    shouldFilterItem={({ item, inputValue }: { item: ComboBoxItem; inputValue: string }) =>
-                      item && item.name.toLowerCase().includes(inputValue.toLowerCase())
-                    }
                   />
 
                   <TextInput
@@ -114,7 +111,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                     value={values.name}
                     onBlur={handleBlur}
                     onChange={handleChange}
-                    invalid={errors.name && touched.name}
+                    invalid={Boolean(errors.name && touched.name)}
                     invalidText={errors.name}
                   />
                 </div>
@@ -125,7 +122,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                   value={values.name}
                   onBlur={handleBlur}
                   onChange={handleChange}
-                  invalid={errors.name && touched.name}
+                  invalid={Boolean(errors.name && touched.name)}
                   invalidText={errors.name}
                 />
               )}
@@ -135,15 +132,15 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                 value={values.summary}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.summary && touched.summary}
+                invalid={Boolean(errors.summary && touched.summary)}
                 invalidText={errors.summary}
               />
               <TextArea
                 id="description"
                 labelText="Description"
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.description && touched.description}
+                invalid={Boolean(errors.description && touched.description)}
                 invalidText={errors.description}
                 style={{ resize: "none", width: "100%" }}
                 value={values.description}

src/Components/CreateWorkflow/ImportWorkflowContent/ImportWorkflowContent.tsx

@@ -232,7 +232,7 @@ const ImportWorkflowContent: React.FC<ImportWorkflowContentProps> = ({
                         itemToString={(item: FlowTeam) => (item ? item.name : "")}
                         titleText="Team"
                         placeholder="Select a team"
-                        invalid={errors.selectedTeam}
+                        invalid={Boolean(errors.selectedTeam)}
                         invalidText={errors.selectedTeam}
                       />
                     )}
@@ -243,7 +243,7 @@ const ImportWorkflowContent: React.FC<ImportWorkflowContentProps> = ({
                       value={values.name}
                       onBlur={handleBlur}
                       onChange={handleChange}
-                      invalid={errors.name && touched.name}
+                      invalid={Boolean(errors.name && touched.name)}
                       invalidText={errors.name}
                     />
                     <TextInput
@@ -252,7 +252,7 @@ const ImportWorkflowContent: React.FC<ImportWorkflowContentProps> = ({
                       value={values.summary}
                       onBlur={handleBlur}
                       onChange={handleChange}
-                      invalid={errors.summary && touched.summary}
+                      invalid={Boolean(errors.summary && touched.summary)}
                       invalidText={errors.summary}
                     />
                   </div>

src/Components/EditTaskTemplateModal/EditTaskTemplateForm/EditTaskTemplateForm.tsx

@@ -83,7 +83,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
             <ModalBody aria-label="inputs">
               <TextInput
                 id="name"
-                invalid={errors.name && touched.name}
+                invalid={Boolean(errors.name && touched.name)}
                 invalidText={errors.name}
                 labelText="Name"
                 helperText="Must be unique"
@@ -94,7 +94,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
               />
               <TextInput
                 id="category"
-                invalid={errors.category && touched.category}
+                invalid={Boolean(errors.category && touched.category)}
                 invalidText={errors.category}
                 labelText="Category"
                 helperText="Categories have strict matching, type as you want to see it"
@@ -112,7 +112,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
                 <p className={styles.descriptionLength}>{values.description.length}/200</p>
                 <TextArea
                   id="description"
-                  invalid={errors.description && touched.description}
+                  invalid={Boolean(errors.description && touched.description)}
                   invalidText={errors.description}
                   labelText="Description"
                   onBlur={handleBlur}
@@ -128,7 +128,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
                 value={values.image}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.image && touched.image}
+                invalid={Boolean(errors.image && touched.image)}
                 invalidText={errors.image}
               />
               <TextArea
@@ -139,7 +139,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
                 value={values.command}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.command && touched.command}
+                invalid={Boolean(errors.command && touched.command)}
                 invalidText={errors.command}
               />
               <TextArea
@@ -151,12 +151,12 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
                 value={values.arguments}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.arguments && touched.arguments}
+                invalid={Boolean(errors.arguments && touched.arguments)}
                 invalidText={errors.arguments}
               />
               <TextArea
                 id="script"
-                invalid={errors.script && touched.script}
+                invalid={Boolean(errors.script && touched.script)}
                 invalidText={errors.script}
                 labelText="Script (optional)"
                 onBlur={handleBlur}
@@ -165,7 +165,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
               />
               <TextInput
                 id="workingDir"
-                invalid={errors.workingDir && touched.workingDir}
+                invalid={Boolean(errors.workingDir && touched.workingDir)}
                 invalidText={errors.workingDir}
                 labelText="Working Directory (optional)"
                 onBlur={handleBlur}

src/Components/LabelModal/LabelModal.tsx

@@ -125,7 +125,7 @@ const AddLabelModalContent: React.FC<AddLabelModalContentProps> = ({
                   labelText="Label Key"
                   value={values.key}
                   onChange={handleChange}
-                  invalid={errors.key && touched.key}
+                  invalid={Boolean(errors.key && touched.key)}
                   invalidText={errors.key}
                   onBlur={handleBlur}
                 />
@@ -134,7 +134,7 @@ const AddLabelModalContent: React.FC<AddLabelModalContentProps> = ({
                   labelText="Label Value"
                   value={values.value}
                   onChange={handleChange}
-                  invalid={errors.value && touched.value}
+                  invalid={Boolean(errors.value && touched.value)}
                   onBlur={handleBlur}
                   invalidText={errors.value}
                 />

src/Components/PreviewConfig/__snapshots__/PreviewConfig.spec.tsx.snap

@@ -14,7 +14,7 @@ exports[`PreviewConfig --- Snapshot > Capturing Snapshot of Task Templates 1`] =
   <div>
     <button
       class="cds--btn cds--btn--md cds--btn--ghost"
-      style="width: 6.25rem;"
+      style="width: 7rem;"
       tabindex="0"
       type="button"
     >

src/Components/ScheduleManagerForm/ScheduleManagerForm.tsx

@@ -192,7 +192,7 @@ export default function CreateEditForm(props: CreateEditFormProps) {
                 helperText="Workflow for this Schedule to execute"
                 id="workflow"
                 initialSelectedItem={formikProps.values.workflow}
-                items={props.workflowOptions}
+                items={props?.workflowOptions ?? []}
                 itemToString={(workflow: WorkflowSummary) => {
                   if (workflow?.scope === "team") {
                     const team = workflow ? teams.find((team: FlowTeam) => team.id === workflow.flowTeamId) : undefined;
@@ -244,13 +244,13 @@ export default function CreateEditForm(props: CreateEditFormProps) {
               valueLabelText="Label value"
               valuePlaceholder="important"
               value={formikProps.values.labels}
-              onChange={(labels: string) => formikProps.setFieldValue("labels", labels)}
+              onChange={(labels) => formikProps.setFieldValue("labels", labels)}
             />
             <p>
               <b>Schedule</b>
             </p>
             <section>
-              <p>What type of Schedule do you want to create?</p>
+              <p style={{ marginBottom: "0.375rem" }}>What type of Schedule do you want to create?</p>
               <RadioButtonGroup
                 id="type"
                 labelPosition="right"
@@ -422,7 +422,7 @@ class CronJobConfig extends React.Component<Props, State> {
                 helperText="What time zone do you want to use"
                 id="timezone"
                 initialSelectedItem={values.timezone}
-                items={this.props.timezoneOptions}
+                items={this.props?.timezoneOptions ?? []}
                 onChange={({ selectedItem }: { selectedItem: { label: string; value: string } }) => {
                   const item = selectedItem ?? { label: "", value: "" };
                   this.props.formikProps.setFieldValue("timezone", item);
@@ -436,7 +436,7 @@ class CronJobConfig extends React.Component<Props, State> {
           <div className={styles.container}>
             <TextInput
               id="time"
-              invalid={errors.time && touched.time}
+              invalid={Boolean(errors.time && touched.time)}
               invalidText={errors.time}
               labelText={"Time"}
               name="time"

src/Components/SchedulePanelDetail/SchedulePanelDetail.module.scss

@@ -33,6 +33,7 @@ div.listItem {
   }
   dd {
     font-size: 0.875rem;
+    margin-top: 0.25rem;
   }
 }
 

src/Components/SchedulePanelList/SchedulePanelList.module.scss

@@ -43,6 +43,7 @@ div.listItem {
   }
   dd {
     font-size: 0.875rem;
+    margin-top: 0.25rem;
   }
 }
 

src/Components/TemplateConfigModal/TemplateConfigModalContent/TemplateConfigModalContent.tsx

@@ -269,16 +269,8 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
         })}
       >
         {(formikProps) => {
-          const {
-            values,
-            touched,
-            errors,
-            handleBlur,
-            handleChange,
-            handleSubmit,
-            setFieldValue,
-            isValid,
-          } = formikProps;
+          const { values, touched, errors, handleBlur, handleChange, handleSubmit, setFieldValue, isValid } =
+            formikProps;
 
           return (
             <ModalForm onSubmit={handleSubmit}>
@@ -297,7 +289,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 <TextInput
                   helperText="Reference value for field in task template config"
                   id={InputProperty.Key}
-                  invalid={errors.key && touched.key}
+                  invalid={Boolean(errors.key && touched.key)}
                   invalidText={errors.key}
                   labelText="Key"
                   disabled={isEdit}
@@ -308,7 +300,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 />
                 <TextInput
                   id={InputProperty.Label}
-                  invalid={errors.label && touched.label}
+                  invalid={Boolean(errors.label && touched.label)}
                   invalidText={errors.label}
                   labelText="Label"
                   placeholder="e.g. Email"
@@ -318,7 +310,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 />
                 <TextInput
                   id={InputProperty.HelperText}
-                  invalid={errors.helperText && touched.helperText}
+                  invalid={Boolean(errors.helperText && touched.helperText)}
                   invalidText={errors.helperText}
                   labelText="Helper Text (optional)"
                   helperText="Assist user in completing the field"
@@ -328,7 +320,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 />
                 <TextInput
                   id={InputProperty.Description}
-                  invalid={errors.description && touched.description}
+                  invalid={Boolean(errors.description && touched.description)}
                   invalidText={errors.description}
                   labelText="Description (optional)"
                   helperText="Provide additional information about field to show in a tooltip"
@@ -339,7 +331,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 {InputType.Boolean !== values.type && (
                   <TextInput
                     id={InputProperty.Placeholder}
-                    invalid={errors.placeholder && touched.placeholder}
+                    invalid={Boolean(errors.placeholder && touched.placeholder)}
                     invalidText={errors.placeholder}
                     labelText="Placeholder (optional)"
                     helperText="Give the user a hint for the field value"

src/Components/TemplateParametersModal/TemplateConfigModalContent/TemplateConfigModalContent.tsx

@@ -75,7 +75,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
               <ModalBody aria-label="inputs" className={styles.container}>
                 <TextInput
                   id="name"
-                  invalid={errors.name && touched.name}
+                  invalid={Boolean(errors.name && touched.name)}
                   invalidText={errors.name}
                   labelText="Name"
                   // disabled={isEdit}
@@ -85,7 +85,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 />
                 <TextInput
                   id="description"
-                  invalid={errors.description && touched.description}
+                  invalid={Boolean(errors.description && touched.description)}
                   invalidText={errors.description}
                   labelText="Description "
                   onBlur={handleBlur}

src/Constants/index.ts

@@ -256,7 +256,7 @@ export const yamlInstructions = `  # Getting started with a Task
   Defining Tasks using this YAML editor is recommended for non-business users who have experience writing yaml definitions and have a desire for further customization in defining a task.
   ## Creating a Task in YAML
   The YAML specification has three important sections to be aware of: metadata, params, and steps. 
-  Its important to note that the full Tekton task specification is not yet fully supported. We cannot run multi step tasks, nor do we allow resources to be specified. For more information, see [Known Issues and Limitations](https://www.useboomerang.io/docs/boomerang-flow/introduction/known-issues-limitations)
+  Its important to note that the full Tekton task specification is not yet fully supported. We cannot run multi step tasks, nor do we allow resources to be specified. For more information, see [Known Issues and Limitations](https://www.useboomerang.io/docs/boomerang-flow/introduction/known-issues-limitations).
   ### Metadata
   This is the area where we store a series of annotations related to the end user experience and are automatically populated when defining a task view the UI. See below section on understanding the Boomerang Flow specific metadata.
   ### Params
@@ -276,7 +276,7 @@ export const yamlInstructions = `  # Getting started with a Task
       - folderId
       - email
   \`\`\`
-  For more information on steps refer to [Boomerang Flow Tasks](https://www.useboomerang.io/docs/boomerang-flow/3.1.0/getting-to-know/tasks)
+  For more information on steps refer to [Boomerang Flow Tasks](https://www.useboomerang.io/docs/boomerang-flow/3.1.0/getting-to-know/tasks).
   ## Understanding the available metadata
   The metadata used by Boomerang Flow is over and above the standard Kubernetes or Tekton metadata and is a way for the information needed for the user experience to be stored.
   ### Icon
@@ -285,7 +285,7 @@ export const yamlInstructions = `  # Getting started with a Task
   boomerang.io/icon: Add
   \`\`\`
   ### Params
-  The following definition will match the \`key\` element with the \`name\` element in the params specification of the task. Additional parameter types are supported for the experience including texteditor, boolean, and options. For more detailed information on the available parameters please see [Boomerang Flow Tasks](https://www.useboomerang.io/docs/boomerang-flow/3.1.0/getting-to-know/tasks)
+  The following definition will match the \`key\` element with the \`name\` element in the params specification of the task. Additional parameter types are supported for the experience including texteditor, boolean, and options. For more detailed information on the available parameters please see [Boomerang Flow Tasks](https://www.useboomerang.io/docs/boomerang-flow/3.1.0/getting-to-know/tasks).
   \`\`\`
       boomerang.io/params:
       - required: true