Skip to content

Clean up experiment flag code #5

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

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Clean up experiment flag code #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
24 changes: 3 additions & 21 deletions packages/compass-indexes/src/components/create-index-actions/create-index-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { css, Banner, spacing, Button } from '@mongodb-js/compass-components';
import { connect } from 'react-redux';
import { areAllFieldsFilledIn } from '../../utils/create-index-modal-validation';
import type { Field, Tab } from '../../modules/create-index';
import type { Field } from '../../modules/create-index';
import type { RootState } from '../../modules';
import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';

Expand Down Expand Up @@ -33,32 +33,16 @@ function CreateIndexActions({
onCreateIndexClick,
onCancelCreateIndexClick,
fields,
currentTab,
indexSuggestions,
}: {
error: string | null;
onErrorBannerCloseClick: () => void;
onCreateIndexClick: () => void;
onCancelCreateIndexClick: () => void;
fields: Field[];
currentTab: Tab;
indexSuggestions: Record<string, number> | null;
}) {
const track = useTelemetry();

let isCreateIndexButtonDisabled = false;
// Disable create index button if the user is in Query Flow and has no suggestions
if (currentTab === 'QueryFlow') {
if (indexSuggestions === null) {
isCreateIndexButtonDisabled = true;
}
}
// Or if they are in the Index Flow but have not completed the fields
else {
if (!areAllFieldsFilledIn(fields)) {
isCreateIndexButtonDisabled = true;
}
}
const isCreateIndexButtonDisabled = !areAllFieldsFilledIn(fields);

return (
<div className={containerStyles}>
Expand Down Expand Up @@ -102,11 +86,9 @@ function CreateIndexActions({
}

const mapState = ({ createIndex }: RootState) => {
const { fields, currentTab, indexSuggestions } = createIndex;
const { fields } = createIndex;
return {
fields,
currentTab,
indexSuggestions,
};
};

Expand Down
34 changes: 3 additions & 31 deletions packages/compass-indexes/src/components/create-index-form/create-index-form.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { render, screen, fireEvent } from '@mongodb-js/testing-library-compass';
import { render, screen } from '@mongodb-js/testing-library-compass';
import { CreateIndexForm } from './create-index-form';
import type { Field } from '../../modules/create-index';
import { expect } from 'chai';
Expand All @@ -17,11 +17,7 @@ describe('CreateIndexForm', () => {
onTabClickSpy = sinon.spy();
});

const renderComponent = ({
showIndexesGuidanceVariant,
}: {
showIndexesGuidanceVariant?: boolean;
}) => {
const renderComponent = () => {
render(
<Provider store={store}>
<CreateIndexForm
Expand All @@ -33,41 +29,17 @@ describe('CreateIndexForm', () => {
] as Field[]
}
serverVersion="5.0.0"
currentTab="IndexFlow"
onSelectFieldNameClick={() => {}}
onSelectFieldTypeClick={() => {}}
onAddFieldClick={() => {}}
onRemoveFieldClick={() => {}}
onTabClick={onTabClickSpy}
showIndexesGuidanceVariant={showIndexesGuidanceVariant || false}
query={null}
/>
</Provider>
);
};

it('renders the create index form', () => {
renderComponent({});
renderComponent();
expect(screen.getByTestId('create-index-form')).to.exist;
});

describe('when showIndexesGuidanceVariant is false', () => {
it('renders the RadioBoxGroup', () => {
renderComponent({});
expect(screen.queryByTestId('create-index-form-flows')).not.to.exist;
});
});

describe('when showIndexesGuidanceVariant is true', () => {
it('renders the RadioBoxGroup', () => {
renderComponent({ showIndexesGuidanceVariant: true });
expect(screen.getByTestId('create-index-form-flows')).to.exist;
});
it('calls onTabClick when a RadioBox is selected', () => {
renderComponent({ showIndexesGuidanceVariant: true });
const radioBox = screen.getByLabelText('Start with a Query');
fireEvent.click(radioBox);
expect(onTabClickSpy).to.be.calledWith('QueryFlow');
});
});
});
118 changes: 17 additions & 101 deletions packages/compass-indexes/src/components/create-index-form/create-index-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@ import {
spacing,
Accordion,
Body,
RadioBoxGroup,
RadioBox,
} from '@mongodb-js/compass-components';
import type { Field, Tab } from '../../modules/create-index';
import type { Field } from '../../modules/create-index';
import { useAutocompleteFields } from '@mongodb-js/compass-field-store';
import { CreateIndexFields } from '../create-index-fields';
import { hasColumnstoreIndexesSupport } from '../../utils/columnstore-indexes';
Expand All @@ -18,10 +16,6 @@ import {
useConnectionSupports,
} from '@mongodb-js/compass-connections/provider';
import { usePreference } from 'compass-preferences-model/provider';
import IndexFlowSection from './index-flow-section';
import QueryFlowSection from './query-flow-section';
import toNS from 'mongodb-ns';
import type { Document } from 'mongodb';
import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';

const createIndexModalFieldsStyles = css({
Expand All @@ -36,35 +30,24 @@ const createIndexModalOptionStyles = css({
paddingLeft: spacing[100] + 2,
});

const createIndexModalFlowsStyles = css({
marginBottom: spacing[600],
});

export type CreateIndexFormProps = {
namespace: string;
fields: Field[];
serverVersion: string;
currentTab: Tab;
onSelectFieldNameClick: (idx: number, name: string) => void;
onSelectFieldTypeClick: (idx: number, fType: string) => void;
onAddFieldClick: () => void; // Plus icon.
onRemoveFieldClick: (idx: number) => void; // Minus icon.
onTabClick: (tab: Tab) => void;
showIndexesGuidanceVariant?: boolean;
query: Document | null;
};

function CreateIndexForm({
namespace,
fields,
serverVersion,
currentTab,
onSelectFieldNameClick,
onSelectFieldTypeClick,
onAddFieldClick,
onRemoveFieldClick,
onTabClick,
showIndexesGuidanceVariant,
}: CreateIndexFormProps) {
const { id: connectionId } = useConnectionInfo();
const rollingIndexesFeatureEnabled = !!usePreference('enableRollingIndexes');
Expand All @@ -88,100 +71,33 @@ function CreateIndexForm({
});
}, [schemaFields]);

const showIndexesGuidanceIndexFlow =
showIndexesGuidanceVariant && currentTab === 'IndexFlow';
const showIndexesGuidanceQueryFlow =
showIndexesGuidanceVariant && currentTab === 'QueryFlow';

const { database: dbName, collection: collectionName } = toNS(namespace);

return (
<>
<div
className={createIndexModalFieldsStyles}
data-testid="create-index-form"
>
{!showIndexesGuidanceVariant ? (
<Body weight="medium" className={indexFieldsHeaderStyles}>
Index fields
</Body>
) : (
<RadioBoxGroup
aria-labelledby="index-flows"
data-testid="create-index-form-flows"
id="create-index-form-flows"
onChange={(e) => {
const tabName =
e.target.value === 'IndexFlow'
? 'Start with an Index'
: 'Start with a Query';
track(`${tabName} Tab Clicked`, {
context: 'Create Index Modal',
});
onTabClick(e.target.value as Tab);
}}
value={currentTab}
className={createIndexModalFlowsStyles}
>
<RadioBox id="index-flow" value={'IndexFlow'}>
Start with an Index
</RadioBox>
<RadioBox id="query-flow" value={'QueryFlow'}>
Start with a Query
</RadioBox>
</RadioBoxGroup>
)}
<Body weight="medium" className={indexFieldsHeaderStyles}>
Index fields
</Body>

{fields.length > 0 ? (
// Variant UI
showIndexesGuidanceVariant && showIndexesGuidanceIndexFlow ? (
<IndexFlowSection
fields={fields}
dbName={dbName}
collectionName={collectionName}
createIndexFieldsComponent={
<CreateIndexFields
schemaFields={schemaFieldNames}
fields={fields}
serverVersion={serverVersion}
isRemovable={!(fields.length > 1)}
onSelectFieldNameClick={onSelectFieldNameClick}
onSelectFieldTypeClick={onSelectFieldTypeClick}
onAddFieldClick={onAddFieldClick}
onRemoveFieldClick={onRemoveFieldClick}
/>
}
/>
) : (
// Control UI
!showIndexesGuidanceQueryFlow && (
<CreateIndexFields
schemaFields={schemaFieldNames}
fields={fields}
serverVersion={serverVersion}
isRemovable={!(fields.length > 1)}
onSelectFieldNameClick={onSelectFieldNameClick}
onSelectFieldTypeClick={onSelectFieldTypeClick}
onAddFieldClick={onAddFieldClick}
onRemoveFieldClick={onRemoveFieldClick}
/>
)
)
) : null}
{fields.length > 0 && (
<CreateIndexFields
schemaFields={schemaFieldNames}
fields={fields}
serverVersion={serverVersion}
isRemovable={!(fields.length > 1)}
onSelectFieldNameClick={onSelectFieldNameClick}
onSelectFieldTypeClick={onSelectFieldTypeClick}
onAddFieldClick={onAddFieldClick}
onRemoveFieldClick={onRemoveFieldClick}
/>
)}
</div>

{showIndexesGuidanceQueryFlow && (
<QueryFlowSection
schemaFields={schemaFields}
serverVersion={serverVersion}
dbName={dbName}
collectionName={collectionName}
/>
)}

<Accordion
data-testid="create-index-modal-toggle-options"
text={showIndexesGuidanceVariant ? 'Index Options' : 'Options'}
text="Options"
setOpen={() => {
track('Options Clicked', {
context: 'Create Index Modal',
Expand Down
Loading