Disabling fields in OCM readonly

Author: jgyselov

libs/ui-lib/lib/common/components/staticIP/IPConfigFields.tsx

@@ -1,19 +1,26 @@
 import React from 'react';
 import { FormGroup, Grid } from '@patternfly/react-core';
+import { TFunction } from 'react-i18next';
 
 import { getFieldId, InputField, PopoverIcon } from '../ui';
 import { MachineNetworkField } from './MachineNetworkField';
 import { ProtocolVersion } from './types';
 import { useTranslation } from '../../hooks';
-import { TFunction } from 'react-i18next';
+
+type IpConfigFieldsProps = {
+  fieldName: string;
+  protocolVersion: ProtocolVersion;
+  isDisabled?: boolean;
+};
 
 export const getProtocolVersionLabel = (protocolVersion: ProtocolVersion, t: TFunction) =>
   protocolVersion === ProtocolVersion.ipv4 ? t('ai:IPv4') : t('ai:IPv6');
 
-export const IpConfigFields: React.FC<{
-  fieldName: string;
-  protocolVersion: ProtocolVersion;
-}> = ({ protocolVersion, fieldName }) => {
+export const IpConfigFields = ({
+  protocolVersion,
+  fieldName,
+  isDisabled = false,
+}: IpConfigFieldsProps) => {
   const { t } = useTranslation();
 
   return (
@@ -25,11 +32,11 @@ export const IpConfigFields: React.FC<{
         <MachineNetworkField
           fieldName={`${fieldName}.machineNetwork`}
           protocolVersion={protocolVersion}
-          isDisabled={false} // todo
+          isDisabled={isDisabled}
         />
         <InputField
           isRequired
-          isDisabled={false} //todo
+          isDisabled={isDisabled}
           label={t('ai:Default gateway')}
           labelIcon={
             <PopoverIcon

libs/ui-lib/lib/common/components/staticIP/MachineNetworkField.tsx

@@ -23,7 +23,7 @@ import { getAddressObject } from './protocolVersion';
 export const MachineNetworkField = ({
   fieldName,
   protocolVersion,
-  isDisabled,
+  isDisabled = false,
 }: {
   fieldName: string;
   protocolVersion: ProtocolVersion;

libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.tsx

@@ -9,6 +9,7 @@ import {
   ButtonVariant,
 } from '@patternfly/react-core';
 import { useField, useFormikContext } from 'formik';
+import { useSelector } from 'react-redux';
 import {
   ConfirmationModal,
   getFieldId,
@@ -26,6 +27,7 @@ import { getShownProtocolVersions } from '../../../../../../common/components/st
 import { getEmptyIpConfig } from '../../data/emptyData';
 import { FormViewHost, FormViewNetworkWideValues } from '../../data/dataTypes';
 import { OcmCheckboxField, OcmInputField, OcmRadioField } from '../../../../ui/OcmFormFields';
+import { selectCurrentClusterPermissionsState } from '../../../../../store/slices/current-cluster/selectors';
 
 import '../staticIp.css';
 
@@ -66,6 +68,7 @@ export const ProtocolTypeSelect = () => {
     }
   };
   const isIpv4Selected = protocolType === 'ipv4';
+
   return (
     <>
       <FormGroup
@@ -135,8 +138,11 @@ export const ProtocolTypeSelect = () => {
     </>
   );
 };
+
 export const FormViewNetworkWideFields = ({ hosts }: { hosts: FormViewHost[] }) => {
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { values, setFieldValue } = useFormikContext<FormViewNetworkWideValues>();
+
   return (
     <>
       <TextContent>
@@ -191,6 +197,7 @@ export const FormViewNetworkWideFields = ({ hosts }: { hosts: FormViewHost[] })
           fieldName={`ipConfigs.${protocolVersion}`}
           protocolVersion={protocolVersion}
           key={protocolVersion}
+          isDisabled={isViewerMode}
         />
       ))}
     </>