fix: disable options in legend or yaxis section if visible is false #…

…2467

packages/dashboard/src/customization/propertiesSections/lineAndScatterStyleSettings/legendSection.tsx

@@ -32,7 +32,11 @@ export const LegendSection: FC<LegendSectionOptions> = ({
     >
       <Box padding='s'>
         <SpaceBetween size='m'>
-          <AlignmentDropdown position={position} onTypeChange={handleType} />
+          <AlignmentDropdown
+            position={position}
+            onTypeChange={handleType}
+            disabled={!visible}
+          />
         </SpaceBetween>
       </Box>
     </StyleExpandableSection>

packages/dashboard/src/customization/propertiesSections/lineAndScatterStyleSettings/section.spec.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { LegendSection } from './legendSection';
+import { YAxisSection } from './yAxis';
+
+describe('YAxisSection', () => {
+  test('should disable y axis options when visible is false', () => {
+    const options = {
+      visible: false,
+      min: null,
+      max: null,
+      yLabel: null,
+      setVisible: () => {},
+      updateMin: () => {},
+      updateMax: () => {},
+      updateYLabel: () => {},
+    };
+    const { getByPlaceholderText, getAllByPlaceholderText } = render(
+      <YAxisSection {...options} />
+    );
+    expect(getByPlaceholderText('Input Y-axis label')).toBeDisabled();
+    expect(getAllByPlaceholderText('Auto')[0]).toBeDisabled();
+    expect(getAllByPlaceholderText('Auto')[1]).toBeDisabled();
+  });
+
+  test('should not disable y axis options when visible is true', () => {
+    const options = {
+      visible: true,
+      min: null,
+      max: null,
+      yLabel: null,
+      setVisible: () => {},
+      updateMin: () => {},
+      updateMax: () => {},
+      updateYLabel: () => {},
+    };
+    const { getByPlaceholderText, getAllByPlaceholderText } = render(
+      <YAxisSection {...options} />
+    );
+    expect(getByPlaceholderText('Input Y-axis label')).not.toBeDisabled();
+    expect(getAllByPlaceholderText('Auto')[0]).not.toBeDisabled();
+    expect(getAllByPlaceholderText('Auto')[1]).not.toBeDisabled();
+  });
+});
+
+describe('LegendSection', () => {
+  test('should disable legend options when visible is false', () => {
+    const options = {
+      visible: false,
+      position: 'left',
+      setVisible: () => {},
+      setAlignment: () => {},
+    };
+    const { getByLabelText } = render(<LegendSection {...options} />);
+    expect(getByLabelText('Alignment')).toBeDisabled();
+  });
+
+  test('should not disable legend options when visible is true', () => {
+    const options = {
+      visible: true,
+      position: 'left',
+      setVisible: () => {},
+      setAlignment: () => {},
+    };
+    const { getByLabelText } = render(<LegendSection {...options} />);
+    expect(getByLabelText('Alignment')).not.toBeDisabled();
+  });
+});

packages/dashboard/src/customization/propertiesSections/lineAndScatterStyleSettings/yAxis.tsx

@@ -50,6 +50,7 @@ export const YAxisSection: FC<YAxisSectionOptions> = ({
               value={`${yLabel ?? ''}`}
               type='text'
               onChange={({ detail }) => updateYLabel(detail.value)}
+              disabled={!visible}
             />
           </FormField>
         </Box>
@@ -65,6 +66,7 @@ export const YAxisSection: FC<YAxisSectionOptions> = ({
               value={`${min ?? ''}`}
               type='number'
               onChange={({ detail }) => onSetRange(updateMin, detail.value)}
+              disabled={!visible}
             />
 
             <label htmlFor='y-axis-max'>Max</label>
@@ -74,6 +76,7 @@ export const YAxisSection: FC<YAxisSectionOptions> = ({
               value={`${max ?? ''}`}
               type='number'
               onChange={({ detail }) => onSetRange(updateMax, detail.value)}
+              disabled={!visible}
             />
           </FormField>
         </Box>