fix(dashboard): remove tailing digits on widget dragging.

awslabs · Feb 22, 2023 · b89c5f7 · b89c5f7
1 parent 15d6740
commit b89c5f7
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 14 deletions.
diff --git a/.gitignore b/.gitignore
@@ -48,3 +48,4 @@ creds.json
 packages/components/styles.css
 **/NOTICE
 **/LICENSE
+/packages/dashboard/storybook-static/
diff --git a/packages/dashboard/src/components/sidePanel/sections/baseSettingSection/index.spec.tsx b/packages/dashboard/src/components/sidePanel/sections/baseSettingSection/index.spec.tsx
@@ -7,9 +7,16 @@ import { DefaultDashboardMessages } from '~/messages';
 import React from 'react';
 import { BaseSettings } from './index';
 import { render } from '@testing-library/react';
+import createWrapper from '@cloudscape-design/components/test-utils/dom';
+import userEvent from '@testing-library/user-event';
+import { expect } from '@jest/globals';
 
 const widget: Widget = {
   ...MOCK_KPI_WIDGET,
+  x: 1.5,
+  y: 2,
+  width: 10.1,
+  height: 10.9,
 };
 
 const state: Partial<DashboardState> = {
@@ -32,9 +39,28 @@ it('renders', () => {
 });
 
 it('renders all input fields', () => {
-  const elem = render(<TestBaseSettingSection />).baseElement;
-  expect(elem.querySelector('[data-test-id="base-setting-x-input"]')).toBeTruthy();
-  expect(elem.querySelector('[data-test-id="base-setting-y-input"]')).toBeTruthy();
-  expect(elem.querySelector('[data-test-id="base-setting-height-input"]')).toBeTruthy();
-  expect(elem.querySelector('[data-test-id="base-setting-width-input"]')).toBeTruthy();
+  const wrapper = createWrapper(render(<TestBaseSettingSection />).baseElement);
+  expect(wrapper.findInput('[data-test-id="base-setting-x-input"]')).toBeTruthy();
+  expect(wrapper.findInput('[data-test-id="base-setting-y-input"]')).toBeTruthy();
+  expect(wrapper.findInput('[data-test-id="base-setting-width-input"]')).toBeTruthy();
+  expect(wrapper.findInput('[data-test-id="base-setting-height-input"]')).toBeTruthy();
+});
+
+it('rounds x,y,height,width input', () => {
+  const wrapper = createWrapper(render(<TestBaseSettingSection />).baseElement);
+  expect(wrapper.findInput('[data-test-id="base-setting-x-input"]')?.findNativeInput().getElement().value).toBe('2');
+  expect(wrapper.findInput('[data-test-id="base-setting-y-input"]')?.findNativeInput().getElement().value).toBe('2');
+  expect(wrapper.findInput('[data-test-id="base-setting-width-input"]')?.findNativeInput().getElement().value).toBe(
+    '10'
+  );
+  expect(wrapper.findInput('[data-test-id="base-setting-height-input"]')?.findNativeInput().getElement().value).toBe(
+    '11'
+  );
+});
+
+it('rounds input on user input', async () => {
+  const wrapper = createWrapper(render(<TestBaseSettingSection />).baseElement);
+  const xInput = wrapper.findInput('[data-test-id="base-setting-x-input"]')!.findNativeInput().getElement();
+  await userEvent.type(xInput!, '2.4'); // current x is 2, this type appends 2 after it.
+  expect(xInput?.value).toBe('22'); // decimal digits on typing will be ignored not rounded.
 });
diff --git a/packages/dashboard/src/components/sidePanel/sections/baseSettingSection/index.tsx b/packages/dashboard/src/components/sidePanel/sections/baseSettingSection/index.tsx
@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 import { DashboardMessages } from '~/messages';
 import { useInput } from '../../utils';
-import { NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
 import { BaseChangeDetail } from '@cloudscape-design/components/input/interfaces';
 import { ExpandableSection, Grid, Input } from '@cloudscape-design/components';
+import { trimWidgetPosition } from '~/util/trimWidgetPosition';
+import { Widget } from '~/types';
 
 export const BaseSettings: FC<{ messageOverrides: DashboardMessages }> = ({
   messageOverrides: {
@@ -12,29 +13,41 @@ export const BaseSettings: FC<{ messageOverrides: DashboardMessages }> = ({
 }) => {
   const [x, updateX] = useInput('x');
   const [y, updateY] = useInput('y');
-  const onXChange: NonCancelableEventHandler<BaseChangeDetail> = ({ detail: { value } }) => updateX(parseInt(value));
-  const onYChange: NonCancelableEventHandler<BaseChangeDetail> = ({ detail: { value } }) => updateY(parseInt(value));
+  const onXChange: (event: { detail: BaseChangeDetail }) => void = ({ detail: { value } }) => updateX(parseInt(value));
+  const onYChange: (event: { detail: BaseChangeDetail }) => void = ({ detail: { value } }) => updateY(parseInt(value));
 
   const [width, updateWidth] = useInput('width');
   const [height, updateHeight] = useInput('height');
-  const onWidthChange: NonCancelableEventHandler<BaseChangeDetail> = ({ detail: { value } }) =>
+  const onWidthChange: (event: { detail: BaseChangeDetail }) => void = ({ detail: { value } }) =>
     updateWidth(parseInt(value));
-  const onHeightChange: NonCancelableEventHandler<BaseChangeDetail> = ({ detail: { value } }) =>
+  const onHeightChange: (event: { detail: BaseChangeDetail }) => void = ({ detail: { value } }) =>
     updateHeight(parseInt(value));
   const gridDefinition = [{ colspan: 2 }, { colspan: 4 }, { colspan: 2 }, { colspan: 4 }];
+
+  const formattedValue = trimWidgetPosition({ x, y, width, height } as Widget);
   return (
     <ExpandableSection headerText={baseSettings.title} defaultExpanded>
       <Grid gridDefinition={gridDefinition}>
         <div className='section-item-label'>{baseSettings.x}</div>
-        <Input value={`${x}`} type='number' onChange={onXChange} data-test-id='base-setting-x-input' />
+        <Input value={`${formattedValue.x}`} type='number' onChange={onXChange} data-test-id='base-setting-x-input' />
         <div className='section-item-label'>{baseSettings.y}</div>
-        <Input value={`${y}`} type='number' onChange={onYChange} data-test-id='base-setting-y-input' />
+        <Input value={`${formattedValue.y}`} type='number' onChange={onYChange} data-test-id='base-setting-y-input' />
       </Grid>
       <Grid gridDefinition={gridDefinition}>
         <div className='section-item-label'>{baseSettings.width}</div>
-        <Input value={`${width}`} type='number' onChange={onWidthChange} data-test-id='base-setting-width-input' />
+        <Input
+          value={`${formattedValue.width}`}
+          type='number'
+          onChange={onWidthChange}
+          data-test-id='base-setting-width-input'
+        />
         <div className='section-item-label'>{baseSettings.height}</div>
-        <Input value={`${height}`} type='number' onChange={onHeightChange} data-test-id='base-setting-height-input' />
+        <Input
+          value={`${formattedValue.height}`}
+          type='number'
+          onChange={onHeightChange}
+          data-test-id='base-setting-height-input'
+        />
       </Grid>
     </ExpandableSection>
   );