Skip to content

Commit

Permalink
chore(indexes): remove in progress state from create index modal; dec…
Browse files Browse the repository at this point in the history 
…ouple index creation and form submission
  • Loading branch information
@gribnoysup
gribnoysup committed Sep 25, 2024
1 parent 847f249 commit 47608d1
Show file tree
Hide file tree
Showing 6 changed files with 255 additions and 441 deletions.
73 changes: 4 additions & 69 deletions packages/compass-indexes/src/components/create-index-actions/create-index-actions.spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,12 @@ import sinon from 'sinon';
import {
render,
screen,
cleanup,
fireEvent,
userEvent,
within,
} from '@mongodb-js/testing-library-compass';

import CreateIndexActions from '../create-index-actions';

const noop = () => {};

describe('CreateIndexActions Component', function () {
let clearErrorSpy;
let onCreateIndexClickSpy;
Expand All @@ -29,16 +26,13 @@ describe('CreateIndexActions Component', function () {
clearErrorSpy = null;
onCreateIndexClickSpy = null;
closeCreateIndexModalSpy = null;

cleanup();
});

it('renders a cancel button', function () {
render(
<CreateIndexActions
error={null}
onErrorBannerCloseClick={clearErrorSpy}
inProgress={false}
onCreateIndexClick={onCreateIndexClickSpy}
onCancelCreateIndexClick={closeCreateIndexModalSpy}
/>
Expand All @@ -54,14 +48,13 @@ describe('CreateIndexActions Component', function () {
<CreateIndexActions
error={null}
onErrorBannerCloseClick={clearErrorSpy}
inProgress={false}
onCreateIndexClick={onCreateIndexClickSpy}
onCancelCreateIndexClick={closeCreateIndexModalSpy}
/>
);

const button = screen.getByTestId('create-index-actions-cancel-button');
fireEvent.click(button);
userEvent.click(button);
expect(closeCreateIndexModalSpy).to.have.been.calledOnce;
});
});
Expand All @@ -72,7 +65,6 @@ describe('CreateIndexActions Component', function () {
<CreateIndexActions
error={null}
onErrorBannerCloseClick={clearErrorSpy}
inProgress={false}
onCreateIndexClick={onCreateIndexClickSpy}
onCancelCreateIndexClick={closeCreateIndexModalSpy}
/>
Expand All @@ -81,7 +73,7 @@ describe('CreateIndexActions Component', function () {
const button = screen.getByTestId(
'create-index-actions-create-index-button'
);
fireEvent.click(button);
userEvent.click(button);
expect(onCreateIndexClickSpy).to.have.been.calledOnce;
});
});
Expand All @@ -91,7 +83,6 @@ describe('CreateIndexActions Component', function () {
<CreateIndexActions
error={null}
onErrorBannerCloseClick={clearErrorSpy}
inProgress={false}
onCreateIndexClick={onCreateIndexClickSpy}
onCancelCreateIndexClick={closeCreateIndexModalSpy}
/>
Expand All @@ -109,7 +100,6 @@ describe('CreateIndexActions Component', function () {
<CreateIndexActions
error={'Some error happened!'}
onErrorBannerCloseClick={clearErrorSpy}
inProgress={false}
onCreateIndexClick={onCreateIndexClickSpy}
onCancelCreateIndexClick={closeCreateIndexModalSpy}
/>
Expand All @@ -126,7 +116,6 @@ describe('CreateIndexActions Component', function () {
<CreateIndexActions
error={'Some error happened!'}
onErrorBannerCloseClick={clearErrorSpy}
inProgress={false}
onCreateIndexClick={onCreateIndexClickSpy}
onCancelCreateIndexClick={closeCreateIndexModalSpy}
/>
Expand All @@ -137,25 +126,9 @@ describe('CreateIndexActions Component', function () {
);
const closeIcon = within(errorBanner).getByLabelText('X Icon');

fireEvent.click(closeIcon);
userEvent.click(closeIcon);
expect(clearErrorSpy).to.have.been.calledOnce;
});

it('does not render in progress banner', function () {
render(
<CreateIndexActions
error={'Some error happened!'}
onErrorBannerCloseClick={clearErrorSpy}
inProgress={true}
onCreateIndexClick={onCreateIndexClickSpy}
/>
);

const inProgressBanner = screen.queryByTestId(
'create-index-actions-in-progress-banner-wrapper'
);
expect(inProgressBanner).to.not.exist;
});
});

context('without error', function () {
Expand All @@ -164,7 +137,6 @@ describe('CreateIndexActions Component', function () {
<CreateIndexActions
error={null}
onErrorBannerCloseClick={clearErrorSpy}
inProgress={false}
onCreateIndexClick={onCreateIndexClickSpy}
onCancelCreateIndexClick={closeCreateIndexModalSpy}
/>
Expand All @@ -175,42 +147,5 @@ describe('CreateIndexActions Component', function () {
);
expect(errorBanner).to.not.exist;
});

context('when in progress', function () {
beforeEach(function () {
render(
<CreateIndexActions
error={null}
onErrorBannerCloseClick={noop}
inProgress={true}
onCreateIndexClick={noop}
onCancelCreateIndexClick={noop}
/>
);
});

afterEach(cleanup);

it('renders in progress banner', function () {
const inProgressBanner = screen.getByTestId(
'create-index-actions-in-progress-banner-wrapper'
);
expect(inProgressBanner).to.contain.text('Index creation in progress');
});

it('hides the create index button', function () {
const onCreateIndexClickButton = screen.queryByTestId(
'create-index-actions-create-index-button'
);
expect(onCreateIndexClickButton).to.not.exist;
});

it('renames the cancel button to close', function () {
const cancelButton = screen.getByTestId(
'create-index-actions-cancel-button'
);
expect(cancelButton.textContent).to.be.equal('Close');
});
});
});
});
72 changes: 23 additions & 49 deletions packages/compass-indexes/src/components/create-index-actions/create-index-actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,72 +24,46 @@ const createIndexButtonStyles = css({
*/
function CreateIndexActions({
error,
inProgress,
onErrorBannerCloseClick,
onCreateIndexClick,
onCancelCreateIndexClick,
}: {
error: string | null;
inProgress: boolean;
onErrorBannerCloseClick: () => void;
onCreateIndexClick: () => void;
onCancelCreateIndexClick: () => void;
}) {
const renderError = () => {
if (!error) {
return;
}

return (
<div
data-testid="create-index-actions-error-banner-wrapper"
className={bannerStyles}
>
<Banner variant="danger" dismissible onClose={onErrorBannerCloseClick}>
{error}
</Banner>
</div>
);
};

const renderInProgress = () => {
if (error || !inProgress) {
return;
}

return (
<div
data-testid="create-index-actions-in-progress-banner-wrapper"
className={bannerStyles}
>
<Banner variant="info">
Index creation in progress. The dialog can be closed.
</Banner>
</div>
);
};

return (
<div className={containerStyles}>
{renderError()}
{renderInProgress()}
{error && (
<div
data-testid="create-index-actions-error-banner-wrapper"
className={bannerStyles}
>
<Banner
variant="danger"
dismissible
onClose={onErrorBannerCloseClick}
>
{error}
</Banner>
</div>
)}

<Button
data-testid="create-index-actions-cancel-button"
onClick={onCancelCreateIndexClick}
>
{inProgress ? 'Close' : 'Cancel'}
Cancel
</Button>
<Button
data-testid="create-index-actions-create-index-button"
onClick={onCreateIndexClick}
variant="primary"
className={createIndexButtonStyles}
>
Create Index
</Button>
{!inProgress && (
<Button
data-testid="create-index-actions-create-index-button"
onClick={onCreateIndexClick}
variant="primary"
className={createIndexButtonStyles}
>
Create Index
</Button>
)}
</div>
);
}
Expand Down
10 changes: 3 additions & 7 deletions packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
fieldTypeUpdated,
updateFieldName,
errorCleared,
createIndex,
createIndexFormSubmitted,
createIndexClosed,
} from '../../modules/create-index';
import { CreateIndexForm } from '../create-index-form/create-index-form';
Expand All @@ -28,7 +28,6 @@ type CreateIndexModalProps = React.ComponentProps<typeof CreateIndexForm> & {
isVisible: boolean;
namespace: string;
error: string | null;
inProgress: boolean;
onErrorBannerCloseClick: () => void;
onCreateIndexClick: () => void;
onCancelCreateIndexClick: () => void;
Expand All @@ -38,7 +37,6 @@ function CreateIndexModal({
isVisible,
namespace,
error,
inProgress,
onErrorBannerCloseClick,
onCreateIndexClick,
onCancelCreateIndexClick,
Expand Down Expand Up @@ -88,7 +86,6 @@ function CreateIndexModal({
<CreateIndexActions
error={error}
onErrorBannerCloseClick={onErrorBannerCloseClick}
inProgress={inProgress}
onCreateIndexClick={onCreateIndexClick}
onCancelCreateIndexClick={onCancelCreateIndexClick}
/>
Expand All @@ -98,10 +95,9 @@ function CreateIndexModal({
}

const mapState = ({ namespace, serverVersion, createIndex }: RootState) => {
const { fields, inProgress, error, isVisible } = createIndex;
const { fields, error, isVisible } = createIndex;
return {
fields,
inProgress,
error,
isVisible,
namespace,
Expand All @@ -111,7 +107,7 @@ const mapState = ({ namespace, serverVersion, createIndex }: RootState) => {

const mapDispatch = {
onErrorBannerCloseClick: errorCleared,
onCreateIndexClick: createIndex,
onCreateIndexClick: createIndexFormSubmitted,
onCancelCreateIndexClick: createIndexClosed,
onAddFieldClick: fieldAdded,
onRemoveFieldClick: fieldRemoved,
Expand Down
Loading

0 comments on commit 47608d1

Please sign in to comment.