Skip to content

Commit

Permalink
[PLAT-14606]: Disable options to ensure shrinking the RF is not permi…
Browse files Browse the repository at this point in the history
…tted edit universe scenario

Summary:
As part of Yury's change D35865, we have enabled editing RF in Primary Cluster in both K8 and VMs
However we should not allow shrinking the RF in EDIT mode, hence values of RF that are less than the current selected value will be disabled

Test Plan:
Please refer to the video
{F264264}

Reviewers: jmak, yshchetinin

Reviewed By: jmak

Subscribers: yugaware

Differential Revision: https://phorge.dev.yugabyte.com/D36483
rajmaddy89 committed Jul 15, 2024
1 parent 65232ff commit 4b39933
Showing 3 changed files with 34 additions and 9 deletions.
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ export interface YBButtonGroupProps<T> {
btnGroupClassName?: any;
handleSelect: (selectedNum: T) => void;
displayLabelFn?: (elem: T) => JSX.Element;
shouldDisableButtonFn?: (elem: T) => boolean;
}

const useStyles = makeStyles((theme) => ({
@@ -50,7 +51,8 @@ export const YBButtonGroup = <T,>(props: YBButtonGroupProps<T>) => {
btnClassName,
btnGroupClassName,
handleSelect,
displayLabelFn
displayLabelFn,
shouldDisableButtonFn
} = props;
const classes = useStyles();

@@ -64,14 +66,17 @@ export const YBButtonGroup = <T,>(props: YBButtonGroupProps<T>) => {
classes.btnGroup,
color === 'secondary' && classes.overrideMuiButtonGroup
)}
disabled={disabled}
>
{values.map((value, i) => {
return (
<YBButton
key={i}
className={btnClassName ?? classes.button}
data-testid={`${dataTestId}-option${value}`}
disabled={!isEqual(value, selectedNum) && !!disabled}
disabled={
(shouldDisableButtonFn && shouldDisableButtonFn(value))
}
variant={isEqual(value, selectedNum) ? 'primary' : 'secondary'}
onClick={(e: any) => {
if (!!disabled) e.preventDefault();
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import { ChangeEvent, ReactElement } from 'react';
import { useState, useEffect, ChangeEvent, ReactElement, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { useFormContext, useController } from 'react-hook-form';
import { Box, makeStyles } from '@material-ui/core';
import { toast } from 'react-toastify';
import { YBButtonGroup, YBLabel, YBInputField } from '../../../../../../components';
import { UniverseFormContext } from '../../../UniverseFormContainer';
import { UniverseFormData } from '../../../utils/dto';
import { getPrimaryCluster } from '../../../../../../../utils/universeUtilsTyped';
import { REPLICATION_FACTOR_FIELD, TOAST_AUTO_DISMISS_INTERVAL } from '../../../utils/constants';
import { useFormFieldStyles } from '../../../universeMainStyle';

interface ReplicationFactorProps {
disabled?: boolean;
disabled: boolean;
isPrimary: boolean;
isViewMode: boolean;
isEditMode: boolean;
}

const useStyles = makeStyles((theme) => ({
@@ -29,9 +31,17 @@ const ASYNC_RF_MAX = 15;
export const ReplicationFactor = ({
disabled,
isPrimary,
isViewMode
isEditMode
}: ReplicationFactorProps): ReactElement => {
const { universeConfigureTemplate } = useContext(
UniverseFormContext
)[0];
const clusters = universeConfigureTemplate?.clusters;
const primaryCluster = getPrimaryCluster(clusters);
const replicationFactor = primaryCluster?.userIntent?.replicationFactor;

const { control, setValue } = useFormContext<UniverseFormData>();
const [initialRF, setInitialRF] = useState<number>(ASYNC_RF_MIN);
const { t } = useTranslation();
const classes = useStyles();
const fieldClasses = useFormFieldStyles();
@@ -42,6 +52,10 @@ export const ReplicationFactor = ({
name: REPLICATION_FACTOR_FIELD
});

useEffect(() => {
setInitialRF(replicationFactor!);
}, []);

const handleSelect = (val: number) => {
setValue(REPLICATION_FACTOR_FIELD, val);
};
@@ -80,8 +94,9 @@ export const ReplicationFactor = ({
color={'default'}
values={PRIMARY_RF}
selectedNum={value}
disabled={disabled || isViewMode}
disabled={disabled}
handleSelect={handleSelect}
shouldDisableButtonFn={(buttonValue: number) => isEditMode && buttonValue < initialRF}
/>
) : (
<Box>
@@ -94,7 +109,7 @@ export const ReplicationFactor = ({
min: ASYNC_RF_MIN,
max: ASYNC_RF_MAX
}}
disabled={isViewMode}
disabled={disabled}
className={classes.overrideMuiInput}
onChange={handleChange}
/>
Original file line number Diff line number Diff line change
@@ -63,6 +63,7 @@ export const CloudConfiguration = ({ runtimeConfigs }: UniverseFormConfiguration
const { clusterType, mode, universeConfigureTemplate, isViewMode } = useContext(
UniverseFormContext
)[0];

const isPrimary = clusterType === ClusterType.PRIMARY;
const isEditMode = mode === ClusterModes.EDIT; //Form is in edit mode
const isEditPrimary = isEditMode && isPrimary; //Editing Primary Cluster
@@ -110,7 +111,11 @@ export const CloudConfiguration = ({ runtimeConfigs }: UniverseFormConfiguration
<TotalNodesField disabled={isViewMode} />
</Box>
<Box mt={2}>
<ReplicationFactor disabled={isViewMode} isPrimary={isPrimary} isViewMode={isViewMode} />
<ReplicationFactor
disabled={isViewMode}
isPrimary={isPrimary}
isEditMode={isEditMode}
/>
</Box>
{isPrimary && isGeoPartitionEnabled && (
<Box mt={2} display="flex" flexDirection="column">

0 comments on commit 4b39933

Please sign in to comment.