Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ui-storagebrowser] adds disable button to InputModal component #3924

Merged
merged 4 commits into from
Jan 7, 2025
Merged

[ui-storagebrowser] adds disable button to InputModal component #3924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
04d9cb4
[ui-storagebrowser] adds disable button to InputModal component
ramprasadagarwal Dec 19, 2024
e472a7d
Merge branch 'master' into feat/input-modal
ramprasadagarwal Jan 6, 2025
d644dd9
Merge branch 'master' into feat/input-modal
ramprasadagarwal Jan 7, 2025
b785037
Merge branch 'master' into feat/input-modal
ramprasadagarwal Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 55 additions & 61 deletions desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,116 +22,92 @@ import '@testing-library/jest-dom';
import InputModal from './InputModal';

describe('InputModal', () => {
test('renders custom modal title', () => {
const mockOnClose = jest.fn();
const mockOnSubmit = jest.fn();

it('should render custom modal title', () => {
const inputModal = render(
<InputModal
title={'Custom title'}
inputLabel={'Enter File name here'}
submitText={'Create'}
showModal={true}
onSubmit={jest.fn()}
onClose={jest.fn()}
onSubmit={mockOnSubmit}
onClose={mockOnClose}
initialValue={''}
inputType={'text'}
/>
);
expect(inputModal.getByText('Custom title')).toBeVisible();
});

test('renders custom input label', () => {
it('should render custom input label', () => {
const inputModal = render(
<InputModal
title={'Create New File'}
inputLabel={'Custom input label'}
submitText={'Create'}
showModal={true}
onSubmit={jest.fn()}
onClose={jest.fn()}
onSubmit={mockOnSubmit}
onClose={mockOnClose}
initialValue={''}
inputType={'text'}
/>
);
expect(inputModal.getByText('Custom input label')).toBeVisible();
});

test('calls onSubmit when create button is clicked', async () => {
const onCloseMock = jest.fn();
const onSubmitMock = jest.fn();
const user = userEvent.setup();
render(
<InputModal
title={'Create New File'}
inputLabel={'Enter File name here'}
submitText={'Create'}
showModal={true}
onSubmit={onSubmitMock}
onClose={onCloseMock}
initialValue={''}
inputType={'text'}
/>
);
const submitButton = screen.getByRole('button', { name: 'Create' });

expect(onSubmitMock).not.toHaveBeenCalled();
await user.click(submitButton);
expect(onSubmitMock).toHaveBeenCalled();
});

test('calls onClose after submission when submit button is clicked', async () => {
const onCloseMock = jest.fn();
const onSubmitMock = jest.fn();
it('should call onSubmit when create button is clicked', async () => {
const user = userEvent.setup();
render(
<InputModal
title={'Create New File'}
inputLabel={'Enter File name here'}
submitText={'Create'}
showModal={true}
onSubmit={onSubmitMock}
onClose={onCloseMock}
onSubmit={mockOnSubmit}
onClose={mockOnClose}
initialValue={''}
inputType={'text'}
/>
);
const submitButton = screen.getByRole('button', { name: 'Create' });

expect(mockOnSubmit).not.toHaveBeenCalled();
await user.click(submitButton);
expect(onSubmitMock).toHaveBeenCalled();
expect(onCloseMock).toHaveBeenCalled();
expect(mockOnSubmit).toHaveBeenCalled();
});

test('calls onClose when close button is clicked', async () => {
const onCloseMock = jest.fn();
const onSubmitMock = jest.fn();
it('should call onClose when close button is clicked', async () => {
const user = userEvent.setup();
render(
<InputModal
title={'Create New File'}
inputLabel={'Enter File name here'}
submitText={'Create'}
showModal={true}
onSubmit={onSubmitMock}
onClose={onCloseMock}
onSubmit={mockOnSubmit}
onClose={mockOnClose}
initialValue={''}
inputType={'text'}
/>
);
const closeButton = screen.getByRole('button', { name: 'Cancel' });

expect(onCloseMock).not.toHaveBeenCalled();
expect(mockOnClose).not.toHaveBeenCalled();
await user.click(closeButton);
expect(onCloseMock).toHaveBeenCalled();
expect(mockOnClose).toHaveBeenCalled();
});

test('renders modal with input visible', () => {
it('should render modal with input visible', () => {
render(
<InputModal
title={'Create New File'}
inputLabel={'Custom input label'}
submitText={'Create'}
showModal={true}
onSubmit={jest.fn()}
onClose={jest.fn()}
onSubmit={mockOnSubmit}
onClose={mockOnClose}
initialValue={''}
inputType={'text'}
/>
Expand All @@ -141,15 +117,15 @@ describe('InputModal', () => {
expect(input).toBeVisible();
});

test('renders modal with number input when input type is number', () => {
it('should render modal with number input when input type is number', () => {
render(
<InputModal
title={'Set replication'}
inputLabel={'Custom input label'}
submitText={'Submit'}
showModal={true}
onSubmit={jest.fn()}
onClose={jest.fn()}
onSubmit={mockOnSubmit}
onClose={mockOnClose}
initialValue={2}
inputType={'number'}
/>
Expand All @@ -159,64 +135,64 @@ describe('InputModal', () => {
expect(input).toBeVisible();
});

test('renders modal with empty input value when intial value is empty', () => {
it('should render modal with empty input value when intial value is empty', () => {
render(
<InputModal
title={'Create New File'}
inputLabel={'Custom input label'}
submitText={'Create'}
showModal={true}
onSubmit={jest.fn()}
onClose={jest.fn()}
onSubmit={mockOnSubmit}
onClose={mockOnClose}
initialValue={''}
inputType={'text'}
/>
);
expect(screen.getByRole('textbox')).toHaveValue('');
});

test('renders modal with intial value in input while input type is text', () => {
it('should render modal with intial value in input while input type is text', () => {
render(
<InputModal
title={'Create New File'}
inputLabel={'Custom input label'}
submitText={'Create'}
showModal={true}
onSubmit={jest.fn()}
onClose={jest.fn()}
onSubmit={mockOnSubmit}
onClose={mockOnClose}
initialValue={'hello'}
inputType={'text'}
/>
);
expect(screen.getByRole('textbox')).toHaveValue('hello');
});

test('renders modal with intial value in input while input type is number', () => {
it('should render modal with intial value in input while input type is number', () => {
render(
<InputModal
title={'Create New File'}
inputLabel={'Custom input label'}
submitText={'Create'}
showModal={true}
onSubmit={jest.fn()}
onClose={jest.fn()}
onSubmit={mockOnSubmit}
onClose={mockOnClose}
initialValue={2}
inputType={'number'}
/>
);
expect(screen.getByRole('spinbutton')).toHaveValue(2);
});

test('accepts tab focus on input elements placed in the drawer', async () => {
it('should accept tab focus on input elements placed in the drawer', async () => {
const user = userEvent.setup();
render(
<InputModal
title={'Create New File'}
inputLabel={'Custom input label'}
submitText={'Create'}
showModal={true}
onSubmit={jest.fn()}
onClose={jest.fn()}
onSubmit={mockOnSubmit}
onClose={mockOnClose}
initialValue={''}
inputType={'text'}
/>
Expand All @@ -239,4 +215,22 @@ describe('InputModal', () => {
await user.tab();
expect(cancelButton).toHaveFocus();
});

it('should disable the submit button when buttonDisabled is true', () => {
render(
<InputModal
title={'Create New File'}
inputLabel={'Custom input label'}
submitText={'Create'}
showModal={true}
onSubmit={mockOnSubmit}
onClose={mockOnClose}
initialValue={''}
inputType={'text'}
buttonDisabled={true}
/>
);
const submitButton = screen.getByRole('button', { name: 'Create' });
expect(submitButton).toBeDisabled();
});
});
15 changes: 11 additions & 4 deletions desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ interface InputModalProps {
submitText?: string;
showModal: boolean;
title: string;
buttonDisabled?: boolean;
}

const InputModal = ({
Expand All @@ -41,12 +42,17 @@ const InputModal = ({
onSubmit,
showModal,
title,
buttonDisabled,
...i18n
}: InputModalProps): JSX.Element => {
const [value, setValue] = useState<string | number>(initialValue);
const { t } = i18nReact.useTranslation();
const { cancelText = t('Cancel'), submitText = t('Submit') } = i18n;

const handleSubmit = () => {
onSubmit(value);
};

useEffect(() => {
setValue(initialValue);
}, [initialValue]);
Expand All @@ -57,18 +63,19 @@ const InputModal = ({
className="hue-input-modal cuix antd"
okText={submitText}
onCancel={onClose}
onOk={() => {
onSubmit(value);
onClose();
}}
onOk={handleSubmit}
open={showModal}
title={title}
secondaryButtonProps={{ disabled: buttonDisabled }}
okButtonProps={{ disabled: buttonDisabled }}
cancelButtonProps={{ disabled: buttonDisabled }}
>
<div className="hue-input-modal__input-label">{inputLabel}</div>
<Input
className="hue-input-modal__input"
value={value}
type={inputType}
onPressEnter={handleSubmit}
onChange={e => {
setValue(e.target.value);
}}
Expand Down
10 changes: 9 additions & 1 deletion ...apps/storageBrowser/StorageDirectoryPage/CreateAndUploadAction/CreateAndUploadAction.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@use 'mixins';

$action-dropdown-width: 214px;
Expand All @@ -23,5 +24,12 @@ $action-dropdown-width: 214px;
}

.hue-file-upload-modal {
height: 200px;
.ant-modal-body {
cursor: pointer;
height: 150px;
}

.ant-modal-footer {
display: none;
}
}
4 changes: 3 additions & 1 deletion .../storageBrowser/StorageDirectoryPage/CreateAndUploadAction/CreateAndUploadAction.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,15 @@ describe('CreateAndUploadAction', () => {
const currentPath = '/some/path';
const onSuccessfulAction = jest.fn();
const setLoadingFiles = jest.fn();
const mockFilesUpload = jest.fn();

beforeEach(() => {
render(
<CreateAndUploadAction
currentPath={currentPath}
onSuccessfulAction={onSuccessfulAction}
setLoadingFiles={setLoadingFiles}
onFilesUpload={mockFilesUpload}
/>
);
});
Expand Down Expand Up @@ -74,7 +76,7 @@ describe('CreateAndUploadAction', () => {
fireEvent.click(newUploadButton);

// Check if the upload modal is opened
expect(screen.getByText('Upload A File')).toBeInTheDocument();
expect(screen.getByText('Upload a File')).toBeInTheDocument();
});

it('should call the correct API for creating a folder', async () => {
Expand Down
Loading
Loading