* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { ButtonSecondary, DateRangePicker } from 'design-system';
import * as React from 'react';
-import { Button } from '../../../components/controls/buttons';
-import DateRangeInput from '../../../components/controls/DateRangeInput';
import { translate } from '../../../helpers/l10n';
import { Query } from '../utils';
render() {
return (
- <div className="display-flex-end">
- <DateRangeInput
+ <div className="sw-flex">
+ <DateRangePicker
+ ariaNextMonthLabel={translate('next_')}
+ ariaPreviousMonthLabel={translate('previous_')}
+ clearButtonLabel={translate('clear')}
+ fromLabel={translate('start_date')}
onChange={this.handleChange}
+ separatorText={translate('to_')}
+ toLabel={translate('end_date')}
value={{ from: this.props.from, to: this.props.to }}
/>
- <Button
- className="spacer-left"
+ <ButtonSecondary
+ className="sw-ml-2"
disabled={this.props.from === undefined && this.props.to === undefined}
onClick={this.handleResetClick}
>
{translate('project_activity.reset_dates')}
- </Button>
+ </ButtonSecondary>
</div>
);
}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { InputSelect, LabelValueSelectOption } from 'design-system';
import * as React from 'react';
-import Select from '../../../components/controls/Select';
import { translate } from '../../../helpers/l10n';
import { ComponentQualifier, isPortfolioLike } from '../../../types/component';
import {
}
export default function ProjectActivityPageFilters(props: ProjectActivityPageFiltersProps) {
- const { project, category, from, to, updateQuery } = props;
+ const { category, project, from, to, updateQuery } = props;
const isApp = project.qualifier === ComponentQualifier.Application;
const eventTypes = isApp
? Object.values(ApplicationAnalysisEventCategory)
: Object.values(ProjectAnalysisEventCategory);
- const options = eventTypes.map((category) => ({
+ const options: LabelValueSelectOption<string>[] = eventTypes.map((category) => ({
label: translate('event.category', category),
value: category,
}));
);
return (
- <div className="page-header display-flex-start">
+ <div className="sw-flex sw-mb-5 sw-items-center">
{!isPortfolioLike(project.qualifier) && (
- <div className="display-flex-column big-spacer-right">
- <label className="text-bold little-spacer-bottom" htmlFor="filter-events">
- {translate('project_activity.filter_events')}
- </label>
- <Select
- // For some reason, not setting this aria-label makes some tests fail. They cannot seem to link
- // the label above with this input.
- aria-label={translate('project_activity.filter_events')}
- className={isApp ? 'input-large' : 'input-medium'}
- id="filter-events"
- isClearable
- isSearchable={false}
- onChange={handleCategoryChange}
- options={options}
- value={options.filter((o) => o.value === category)}
- />
- </div>
+ <InputSelect
+ aria-label={translate('project_activity.filter_events')}
+ className="sw-mr-8 sw-body-sm"
+ onChange={(data: LabelValueSelectOption<string>) => handleCategoryChange(data)}
+ options={options}
+ placeholder={translate('project_activity.filter_events')}
+ size="small"
+ value={options.find((o) => o.value === category)}
+ />
)}
<ProjectActivityDateInput from={from} onChange={props.updateQuery} to={to} />
</div>
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { keyBy, times } from 'lodash';
import React from 'react';
} from '../../../../helpers/mocks/project-activity';
import { get } from '../../../../helpers/storage';
import { mockMetric } from '../../../../helpers/testMocks';
-import {
- dateInputEvent,
- renderAppWithComponentContext,
-} from '../../../../helpers/testReactTestingUtils';
-import { byLabelText, byRole, byText } from '../../../../helpers/testSelector';
+import { renderAppWithComponentContext } from '../../../../helpers/testReactTestingUtils';
+import { byLabelText, byRole, byTestId, byText } from '../../../../helpers/testSelector';
import { ComponentQualifier } from '../../../../types/component';
import { MetricKey, MetricType } from '../../../../types/metrics';
import {
metricCheckbox: (name: MetricKey) => byRole('checkbox', { name }),
// Filtering.
- categorySelect: byRole('combobox', { name: 'project_activity.filter_events' }),
+ categorySelect: byLabelText('project_activity.filter_events'),
resetDatesBtn: byRole('button', { name: 'project_activity.reset_dates' }),
- fromDateInput: byRole('textbox', { name: 'start_date' }),
- toDateInput: byRole('textbox', { name: 'end_date' }),
+ fromDateInput: byLabelText('start_date'),
+ toDateInput: byLabelText('end_date'),
// Analysis interactions.
activityItem: byLabelText(/project_activity.show_analysis_X_on_graph/),
loading: byLabelText('loading'),
baseline: byText('project_activity.new_code_period_start'),
bugsPopupCell: byRole('cell', { name: MetricKey.bugs }),
+ monthSelector: byTestId('month-select'),
+ yearSelector: byTestId('year-select'),
};
return {
async filterByCategory(
category: ProjectAnalysisEventCategory | ApplicationAnalysisEventCategory
) {
- await selectEvent.select(ui.categorySelect.get(), [`event.category.${category}`]);
+ await user.click(ui.categorySelect.get());
+ const optionForType = await screen.findByText(`event.category.${category}`);
+ await user.click(optionForType);
},
async setDateRange(from?: string, to?: string) {
- const dateInput = dateInputEvent(user);
if (from) {
- await dateInput.pickDate(ui.fromDateInput.get(), parseDate(from));
+ await this.selectDate(from, ui.fromDateInput.get());
}
if (to) {
- await dateInput.pickDate(ui.toDateInput.get(), parseDate(to));
+ await this.selectDate(to, ui.toDateInput.get());
}
},
+ async selectDate(date: string, datePickerSelector: HTMLElement) {
+ const monthMap = [
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ 'Apr',
+ 'May',
+ 'Jun',
+ 'Jul',
+ 'Aug',
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec',
+ ];
+ const parsedDate = parseDate(date);
+ await user.click(datePickerSelector);
+ const monthSelector = within(ui.monthSelector.get()).getByRole('combobox');
+
+ await user.click(monthSelector);
+ const selectedMonthElements = within(ui.monthSelector.get()).getAllByText(
+ monthMap[parseDate(parsedDate).getMonth()]
+ );
+ await user.click(selectedMonthElements[selectedMonthElements.length - 1]);
+
+ const yearSelector = within(ui.yearSelector.get()).getByRole('combobox');
+
+ await user.click(yearSelector);
+ const selectedYearElements = within(ui.yearSelector.get()).getAllByText(
+ parseDate(parsedDate).getFullYear()
+ );
+ await user.click(selectedYearElements[selectedYearElements.length - 1]);
+
+ await user.click(
+ screen.getByText(parseDate(parsedDate).getDate().toString(), { selector: 'button' })
+ );
+ },
+
async resetDateFilters() {
await user.click(ui.resetDatesBtn.get());
},
projects / sonarqube.git / commitdiff