@openshift-assisted/ui-lib 2.9.0-cim → 2.9.5-cim

package/lib/common/components/storage/DisksTable.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { TextContent, Text, TextVariants, Popover } from '@patternfly/react-core';
+import {
+  TextContent,
+  Text,
+  TextVariants,
+  Popover,
+  Alert,
+  AlertVariant,
+} from '@patternfly/react-core';
 import {
   Table,
   TableHeader,
@@ -10,7 +17,8 @@ import {
   IRow,
 } from '@patternfly/react-table';
 import { ExtraParamsType } from '@patternfly/react-table/dist/js/components/Table/base';
-import { Disk, fileSize, Host, WithTestID } from '../../index';
+import type { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
+import type { WithTestID } from '../../types/index';
 import DiskRole, { OnDiskRoleType } from '../hosts/DiskRole';
 import DiskLimitations from '../hosts/DiskLimitations';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
@@ -19,6 +27,10 @@ import FormatDiskCheckbox, {
   DiskFormattingType,
   isInDiskSkipFormattingList,
 } from '../hosts/FormatDiskCheckbox';
+import { fileSize } from '../../utils';
+import { PopoverIcon } from '../ui';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { TFunction } from 'i18next';
 
 interface DisksTableProps extends WithTestID {
   canEditDisks?: (host: Host) => boolean;
@@ -29,7 +41,7 @@ interface DisksTableProps extends WithTestID {
   updateDiskSkipFormatting?: DiskFormattingType;
 }
 
-const diskColumns = (showFormat: boolean) => [
+const diskColumns = (t: TFunction, showFormat: boolean) => [
   { title: 'Name' },
   { title: 'Role' },
   { title: 'Limitations' },
@@ -38,7 +50,13 @@ const diskColumns = (showFormat: boolean) => [
   { title: 'Size' },
   { title: 'Serial' },
   { title: 'Model' },
-  { title: 'WWN' },
+  {
+    title: (
+      <>
+        WWN <PopoverIcon bodyContent={t('ai:World Wide Name (WWN) is a unique disk identifier.')} />
+      </>
+    ),
+  },
 ];
 
 const diskRowKey = ({ rowData }: ExtraParamsType) => rowData?.key as string;
@@ -53,6 +71,80 @@ const SkipFormattingDisk = () => (
   </TextContent>
 );
 
+const getDiskLimitation = (
+  diskName: Disk['name'],
+  hostName: Host['requestedHostname'],
+  holder: Disk,
+) => {
+  if (holder.driveType) {
+    switch (holder.driveType) {
+      case 'LVM':
+        return `LVM logical volumes were found on the installation disk ${
+          diskName as string
+        } selected for host ${hostName as string} and will be deleted during installation.`;
+      case 'RAID':
+        return `The installation disk ${diskName as string} selected for host ${
+          hostName as string
+        }, is part of a software RAID that will be deleted during the installation.`;
+      case 'Multipath':
+        return `The installation disk ${diskName as string} selected for host ${
+          hostName as string
+        } is managed by multipath. We strongly recommend using the multipath device ${
+          holder.name as string
+        } to improve reliability.`;
+    }
+  }
+};
+
+const DiskName = ({
+  disk,
+  disks,
+  host,
+  installationDiskId,
+}: {
+  disk: Disk;
+  disks: Disk[];
+  host: Host;
+  installationDiskId?: string;
+}) => {
+  const isIndented = disk.holders?.split(',').length === 1;
+  let diskLimitations = null;
+
+  if (disk.id === installationDiskId) {
+    const parentDisk = disks.find((d) => disk.holders?.split(',').includes(d.name as string));
+    if (parentDisk) {
+      diskLimitations = getDiskLimitation(disk.name, host.requestedHostname, parentDisk);
+    }
+  }
+
+  return (
+    <>
+      {isIndented && <span style={{ width: '1rem', display: 'inline-block' }} />}
+      {isInDiskSkipFormattingList(host, disk.id) && (
+        <Popover bodyContent={<SkipFormattingDisk />} minWidth="20rem" maxWidth="30rem">
+          <ExclamationTriangleIcon color={warningColor.value} size="sm" />
+        </Popover>
+      )}
+      {'   '}
+      {disk.bootable ? `${disk.name || ''} (bootable)` : disk.name}
+      {diskLimitations && (
+        <>
+          {'    '}
+          <Popover
+            headerContent="Warning"
+            bodyContent={<Alert variant={AlertVariant.warning} isInline title={diskLimitations} />}
+            minWidth="20rem"
+            maxWidth="30rem"
+            data-testid="disk-limitations-popover"
+          >
+            <ExclamationTriangleIcon color={warningColor.value} size="sm" />
+          </Popover>
+        </>
+      )}
+    </>
+  );
+};
+
 const DisksTable = ({
   canEditDisks,
   host,
@@ -62,24 +154,29 @@ const DisksTable = ({
   onDiskRole,
   updateDiskSkipFormatting,
 }: DisksTableProps) => {
+  const { t } = useTranslation();
   const isEditable = !!canEditDisks?.(host);
-  const diskColumnTitles = diskColumns(isEditable);
+  const diskColumnTitles = diskColumns(t, isEditable);
 
-  const rows: IRow[] = [...disks]
-    .sort((diskA, diskB) => diskA.name?.localeCompare(diskB.name || '') || 0)
+  const rows: IRow[] = disks
+    .filter((disk) => disk.driveType !== 'LVM')
+    .sort((a, b) => (a.name && a.name.localeCompare(b.name as string)) || 0)
+    .sort((a, b) => {
+      const aVal = (a.holders || a.name) as string;
+      const bVal = (b.holders || b.name) as string;
+
+      return aVal?.localeCompare(bVal) || 0;
+    })
     .map((disk, index) => ({
       cells: [
         {
           title: (
-            <>
-              {isInDiskSkipFormattingList(host, disk.id) && (
-                <Popover bodyContent={<SkipFormattingDisk />} minWidth="20rem" maxWidth="30rem">
-                  <ExclamationTriangleIcon color={warningColor.value} size="sm" />
-                </Popover>
-              )}
-              {'   '}
-              {disk.bootable ? `${disk.name || ''} (bootable)` : disk.name}
-            </>
+            <DiskName
+              disk={disk}
+              disks={disks}
+              host={host}
+              installationDiskId={installationDiskId}
+            />
           ),
           props: { 'data-testid': 'disk-name' },
         },
@@ -133,4 +230,4 @@ const DisksTable = ({
   );
 };
 
-export default DisksTable;
+export { DisksTable, getDiskLimitation };

package/lib/common/components/storage/StorageDetail.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
-import { getInventory, Host } from '../../index';
+import { getInventory } from '../../index';
 import { OnDiskRoleType } from '../hosts/DiskRole';
 import { DiskFormattingType } from '../hosts/FormatDiskCheckbox';
-import DisksTable from './DisksTable';
+import { DisksTable } from './DisksTable';
 import SectionTitle from '../ui/SectionTitle';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 type StorageDetailProps = {
   host: Host;

package/lib/common/components/storage/StorageTable.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { Host, WithTestID } from '../../index';
+import { WithTestID } from '../../index';
 import { usePagination } from '../hosts/usePagination';
 import AITable, { AITableProps } from '../hosts/AITable';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 const getHostId = (host: Host) => host.id;
 

package/lib/common/components/storage/StorageUtils.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { sortable } from '@patternfly/react-table';
 import { TFunction } from 'i18next';
-import { getHostRole, getInventory, Host, RoleCell } from '../../index';
+import { getHostRole, getInventory, RoleCell } from '../../index';
 import { TableRow } from '../hosts/AITable';
 import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 const SkipFormattingDisks = () => (
   <TextContent>

package/lib/common/components/ui/Alerts.tsx

@@ -1,22 +1,16 @@
 import React from 'react';
-import { AlertGroup, AlertActionCloseButton, Alert } from '@patternfly/react-core';
+import { AlertGroup, Alert } from '@patternfly/react-core';
 import { useAlerts } from '../AlertsContextProvider';
-import { AlertProps } from '../../reducers/alertsSlice';
 
-const Alerts: React.FC<{ className?: string }> = ({ className }) => {
-  const { alerts, removeAlert } = useAlerts();
-  const onClose = (alert: AlertProps) => removeAlert(alert.key);
+const Alerts = ({ className }: { className?: string }) => {
+  const { alerts } = useAlerts();
 
   if (alerts.length) {
     return (
       <AlertGroup className={className}>
         {alerts.map((alert) => (
           // eslint-disable-next-line react/jsx-key
-          <Alert
-            actionClose={<AlertActionCloseButton onClose={() => onClose(alert)} />}
-            isInline
-            {...alert}
-          >
+          <Alert isInline {...alert}>
             {alert.message}
           </Alert>
         ))}

package/lib/common/components/ui/ClusterEventsToolbar.tsx

@@ -20,12 +20,18 @@ import {
   TextInputTypes,
 } from '@patternfly/react-core';
 import { SearchIcon, FilterIcon } from '@patternfly/react-icons';
-import { ClusterEventsFiltersType } from '../../types';
-import { Cluster, Event, Host, Inventory, stringToJSON } from '../../api';
+import type { ClusterEventsFiltersType } from '../../types';
+import type {
+  Cluster,
+  Event,
+  Host,
+  Inventory,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { EVENT_SEVERITIES } from '../../config';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { isSelectEventChecked } from './utils';
 import { TFunction } from 'i18next';
+import { stringToJSON } from '../../utils';
 
 export type SeverityCountsType = { [severity in Event['severity']]: number };
 
@@ -184,18 +190,22 @@ const ClusterEventsToolbar = ({
   };
 
   const getSelections = (): string[] => {
-    let selections = filters.clusterLevel
-      ? [...(filters.hostIds || []), CLUSTER_LEVEL]
-      : filters.hostIds;
-    selections = filters.deletedHosts ? [...(selections || []), DELETED_HOSTS] : selections;
-
-    return selections || [];
+    const selections = [...(filters.hostIds || [])];
+    if (filters.clusterLevel) {
+      selections.push(CLUSTER_LEVEL);
+    }
+    if (filters.deletedHosts) {
+      selections.push(DELETED_HOSTS);
+    }
+    return selections;
   };
 
   const sortedHosts = allHosts.sort((a, b) =>
     a.hostname && b.hostname && a.hostname < b.hostname ? -1 : 1,
   );
 
+  const hostChips = mapHostsChips(t, filters, sortedHosts);
+
   return (
     <Toolbar
       id="clusters-events-toolbar"
@@ -210,7 +220,7 @@ const ClusterEventsToolbar = ({
         {entityKind === 'cluster' && (
           <ToolbarFilter
             categoryName="Hosts"
-            chips={mapHostsChips(t, filters, sortedHosts)}
+            chips={hostChips}
             deleteChip={(_, chip) =>
               onHostSelect(typeof chip === 'string' ? chip : chip.key, false)
             }
@@ -219,16 +229,15 @@ const ClusterEventsToolbar = ({
             <Select
               variant="checkbox"
               aria-label="hosts"
+              toggleId="cluster-events-hosts-dropdown-button"
               onToggle={onHostToggle}
               onSelect={(e, value) => onHostSelect(value as string, isSelectEventChecked(e))}
               selections={getSelections()}
-              customBadgeText={mapHostsChips(t, filters, sortedHosts).length}
+              customBadgeText={hostChips.length}
               isOpen={isHostExpanded}
               placeholderText={<Placeholder text="Hosts" />}
-              isDisabled={allHosts.length === 0}
               maxHeight={280}
               zIndex={600}
-              menuAppendTo={document.body}
             >
               {[
                 <SelectOption
@@ -246,7 +255,7 @@ const ClusterEventsToolbar = ({
                   {t('ai:Deleted hosts')}
                 </SelectOption>,
                 ...sortedHosts.map((host) => (
-                  <SelectOption key={host.id} value={host.id}>
+                  <SelectOption inputId={`checkbox-${host.id}`} key={host.id} value={host.id}>
                     {host.hostname}
                   </SelectOption>
                 )),
@@ -271,6 +280,7 @@ const ClusterEventsToolbar = ({
           <Select
             variant="checkbox"
             aria-label="Severity"
+            toggleId="cluster-events-severity-dropdown-button"
             onToggle={onSeverityToggle}
             onSelect={(event, value) =>
               onSeveritySelect(value as string, isSelectEventChecked(event))

package/lib/common/components/ui/EventsList.tsx

@@ -8,7 +8,7 @@ import {
   SearchIcon,
 } from '@patternfly/react-icons';
 import { ExtraParamsType } from '@patternfly/react-table/dist/js/components/Table/base';
-import { Event, EventList } from '../../api';
+import { Event, EventList } from '@openshift-assisted/types/assisted-installer-service';
 import { EmptyState } from './uiState';
 import { getHumanizedDateTime } from './utils';
 import { fitContent, noPadding } from './table';
@@ -46,10 +46,9 @@ const getLabelIcon = (severity: Event['severity']) => {
 export type EventsListProps = {
   events: EventList;
   resetFilters: () => void;
-  className?: string;
 };
 
-const EventsList = ({ events, className, resetFilters }: EventsListProps) => {
+const EventsList = ({ events, resetFilters }: EventsListProps) => {
   const { t } = useTranslation();
   if (events.length === 0) {
     return (
@@ -97,20 +96,18 @@ const EventsList = ({ events, className, resetFilters }: EventsListProps) => {
   }));
 
   return (
-    <div className={className}>
-      <Table
-        rows={rows}
-        cells={[
-          { title: t('ai:Time'), cellTransforms: [fitContent, noPadding] },
-          { title: t('ai:Message'), cellTransforms: [breakWord] },
-        ]}
-        variant={TableVariant.compact}
-        aria-label={t('ai:Events table')}
-        borders={false}
-      >
-        <TableBody rowKey={getEventRowKey} />
-      </Table>
-    </div>
+    <Table
+      rows={rows}
+      cells={[
+        { title: t('ai:Time'), cellTransforms: [fitContent, noPadding] },
+        { title: t('ai:Message'), cellTransforms: [breakWord] },
+      ]}
+      variant={TableVariant.compact}
+      aria-label={t('ai:Events table')}
+      borders={false}
+    >
+      <TableBody rowKey={getEventRowKey} />
+    </Table>
   );
 };
 

package/lib/common/components/ui/EventsModal.css

@@ -4,5 +4,6 @@
 }
 
 .events-modal__event-list {
+  height: 34vh;
   overflow: auto;
 }

package/lib/common/components/ui/ExternalLink.tsx

@@ -1,15 +1,24 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, MouseEvent } from 'react';
 import { Text } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
 interface ExternalLinkProps {
   href?: string;
-  onClick?: VoidFunction;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
   children?: ReactNode;
 }
-const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children, onClick }) => (
-  <Text component="a" href={href} onClick={onClick} target="_blank" rel="noopener noreferrer">
-    {children ? children : href} <ExternalLinkAltIcon color="rgb(0, 123, 186)" />
-  </Text>
-);
+const ExternalLink: React.FC<ExternalLinkProps> = ({ href, onClick, children }) => {
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.stopPropagation(); // Stop event propagation here
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  return (
+    <Text component="a" href={href} onClick={handleClick} target="_blank" rel="noopener noreferrer">
+      {children ? children : href} <ExternalLinkAltIcon color="rgb(0, 123, 186)" />
+    </Text>
+  );
+};
 export default ExternalLink;

package/lib/common/components/ui/OpenShiftVersionDropdown.tsx

@@ -110,7 +110,12 @@ export const OpenShiftVersionDropdown = ({
   );
 
   return (
-    <FormGroup fieldId={fieldId} label={t('ai:OpenShift version')} isRequired>
+    <FormGroup
+      id={`form-control__${fieldId}`}
+      fieldId={fieldId}
+      label={t('ai:OpenShift version')}
+      isRequired
+    >
       <Dropdown
         {...field}
         name={name}

package/lib/common/components/ui/StaticTextField.tsx

@@ -25,6 +25,7 @@ export const StaticField: React.FC<StaticFieldProps> = ({
 
   return (
     <FormGroup
+      id={`form-control__${fieldId}`}
       fieldId={fieldId}
       label={label}
       helperText={

package/lib/common/components/ui/ViewClusterEventsButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ButtonVariant } from '@patternfly/react-core';
 import { EventsModalButton } from './eventsModal';
 import { MonitoringIcon } from '@patternfly/react-icons';
-import { Cluster } from '../../api';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { EventListFetchProps } from '../../types';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 

package/lib/common/components/ui/WizardFooter.tsx

@@ -12,7 +12,7 @@ import {
   TextVariants,
 } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { Cluster } from '../../api';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { EventListFetchProps } from '../../types/events';
 import ViewClusterEventsButton from './ViewClusterEventsButton';
 

package/lib/common/components/ui/eventsModal.tsx

@@ -11,7 +11,7 @@ import {
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { global_warning_color_100 as globalWarningColor100 } from '@patternfly/react-tokens';
 import { ToolbarButton } from './Toolbar';
-import { Cluster, Event } from '../../api';
+import { Cluster, Event } from '@openshift-assisted/types/assisted-installer-service';
 import { EventListFetchProps, EventsEntityKind } from '../../types';
 import { EventListFetch } from '../fetching/EventListFetch';
 import ExternalLink from './ExternalLink';
@@ -22,16 +22,12 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { useStateSafely } from '../../hooks';
 
-type EventsModalButtonProps = React.ComponentProps<typeof Button> & {
-  ButtonComponent?: typeof Button | typeof ToolbarButton;
-  onFetchEvents: EventListFetchProps['onFetchEvents'];
-  onClick?: () => void;
-  hostId?: Event['hostId'];
-  cluster: Cluster;
-  entityKind: EventsEntityKind;
-  title: string;
-  fallbackEventsURL?: string;
-};
+type EventsModalButtonProps = React.ComponentProps<typeof Button> &
+  Omit<EventsModalProps, 'onClose' | 'isOpen' | 'hostId'> & {
+    ButtonComponent?: typeof Button | typeof ToolbarButton;
+    onClick?: () => void;
+    hostId?: Event['hostId'];
+  };
 
 export const EventsModalButton = ({
   ButtonComponent = ToolbarButton,
@@ -43,6 +39,7 @@ export const EventsModalButton = ({
   children,
   title,
   fallbackEventsURL,
+  disablePagination,
   ...props
 }: EventsModalButtonProps) => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -62,6 +59,7 @@ export const EventsModalButton = ({
         entityKind={entityKind}
         onFetchEvents={onFetchEvents}
         fallbackEventsURL={fallbackEventsURL}
+        disablePagination={disablePagination}
       />
     </>
   );
@@ -76,17 +74,15 @@ type EventsModalProps = {
   isOpen: boolean;
   title: string;
   fallbackEventsURL?: string;
+  disablePagination?: boolean;
 };
 
 export const EventsModal = ({
-  onFetchEvents,
-  hostId,
-  cluster,
-  entityKind,
   onClose,
   isOpen,
   title,
   fallbackEventsURL,
+  ...rest
 }: EventsModalProps) => {
   const { t } = useTranslation();
   const [isLoading, setLoading] = useStateSafely(true);
@@ -109,6 +105,7 @@ export const EventsModal = ({
       onClose={onClose}
       variant={ModalVariant.large}
       className="events-modal"
+      id={'events-modal'}
     >
       <ModalBoxBody className="events-modal__body">
         {fallbackEventsURL ? (
@@ -126,14 +123,7 @@ export const EventsModal = ({
             iconColor={globalWarningColor100.value}
           />
         ) : (
-          <EventListFetch
-            hostId={hostId}
-            cluster={cluster}
-            entityKind={entityKind}
-            onFetchEvents={onFetchEvents}
-            className="events-modal__event-list"
-            setLoading={setLoading}
-          />
+          <EventListFetch className="events-modal__event-list" setLoading={setLoading} {...rest} />
         )}
       </ModalBoxBody>
     </Modal>

package/lib/common/components/ui/formik/CheckboxField.tsx

@@ -20,7 +20,7 @@ const CheckboxField: React.FC<CheckboxFieldProps> = ({
   const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
 
   return (
-    <Stack>
+    <Stack id={`form-control__${fieldId}`}>
       <StackItem>
         <FormGroup
           fieldId={fieldId}

package/lib/common/components/ui/formik/CodeField.tsx

@@ -6,7 +6,6 @@ import { getFieldId } from './utils';
 import HelperText from './HelperText';
 import { CodeEditor } from '@patternfly/react-code-editor';
 import useFieldErrorMsg from '../../../hooks/useFieldErrorMsg';
-import { monaco } from 'react-monaco-editor';
 
 const CodeField = ({
   label,
@@ -20,37 +19,13 @@ const CodeField = ({
   description,
   isDisabled,
   downloadFileName,
+  dataTestid,
+  isReadOnly,
 }: CodeFieldProps) => {
   const [field, , { setValue, setTouched }] = useField({ name, validate });
   const fieldId = getFieldId(name, 'input', idPostfix);
-  const [monacoSubscription, setMonacoSubscription] = React.useState<monaco.IDisposable>();
-  const [monacoEditor, setMonacoEditor] = React.useState<monaco.editor.IStandaloneCodeEditor>();
   const errorMessage = useFieldErrorMsg({ name, validate });
 
-  React.useEffect(() => {
-    //Work around for Patternfly CodeEditor not calling onChange after upload or drag/drop files
-    //The temporary solution is to handle the changes by registering to the change events of the internal editor in CodeEditor
-    //Once issue https://github.com/patternfly/patternfly-react/issues/7341 will be resolved this code can be replaced with a simple onChange
-    if (!monacoEditor) {
-      return;
-    }
-    if (monacoSubscription) {
-      monacoSubscription.dispose();
-    }
-    setMonacoSubscription(
-      monacoEditor.onDidChangeModelContent(() => {
-        setTouched(true);
-        setValue(monacoEditor.getModel()?.getValue(), true);
-      }),
-    );
-    return () => {
-      if (monacoSubscription) {
-        monacoSubscription.dispose();
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [monacoEditor]);
-
   const isValid = !errorMessage;
   const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
 
@@ -65,6 +40,7 @@ const CodeField = ({
           validated={isValid ? 'default' : 'error'}
           isRequired={isRequired}
           labelIcon={labelIcon}
+          data-testid={dataTestid ? dataTestid : `${fieldId}-testid`}
         >
           {description && (
             <HelperText fieldId={fieldId}>
@@ -74,13 +50,17 @@ const CodeField = ({
           <CodeEditor
             code={field.value as string}
             isUploadEnabled={!isDisabled}
-            isDownloadEnabled
+            isDownloadEnabled={isValid}
             isCopyEnabled
             isLanguageLabelVisible
             height="400px"
             language={language}
-            onEditorDidMount={(editor) => setMonacoEditor(editor)}
             downloadFileName={downloadFileName}
+            onCodeChange={(value) => {
+              setTouched(true);
+              setValue(value, true);
+            }}
+            isReadOnly={isReadOnly}
           />
         </FormGroup>
       </StackItem>