</ul>
<DateRangeInput
- className="big-spacer-left"
onChange={props.handleDateSelection}
minDate={subDays(now(), HOUSEKEEPING_POLICY_VALUES[housekeepingPolicy])}
maxDate={now()}
margin-left: 16px;
}
-.bt-search-form-label {
- margin-bottom: 4px;
-}
-
.bt-search-form-field {
padding: 4px 0;
}
import { translate } from '../../../helpers/l10n';
import { CURRENTS } from '../constants';
-interface Props {
+interface CurrentsFilterProps {
value?: string;
+ id: string;
onChange: (value: string) => void;
}
-export default class CurrentsFilter extends React.PureComponent<Props> {
- handleChange = (value: boolean) => {
- const newValue = value ? CURRENTS.ONLY_CURRENTS : CURRENTS.ALL;
- this.props.onChange(newValue);
- };
+export default function CurrentsFilter(props: CurrentsFilterProps) {
+ const { id, value, onChange } = props;
+ const checked = value === CURRENTS.ONLY_CURRENTS;
- render() {
- const checked = this.props.value === CURRENTS.ONLY_CURRENTS;
- return (
- <div className="bt-search-form-field">
- <Checkbox checked={checked} onCheck={this.handleChange}>
- <span className="little-spacer-left">{translate('yes')}</span>
- </Checkbox>
- </div>
- );
- }
+ const handleChange = React.useCallback(
+ (value: boolean) => {
+ const newValue = value ? CURRENTS.ONLY_CURRENTS : CURRENTS.ALL;
+ onChange(newValue);
+ },
+ [onChange]
+ );
+
+ return (
+ <div className="bt-search-form-field">
+ <Checkbox id={id} checked={checked} onCheck={handleChange}>
+ <span className="little-spacer-left">{translate('yes')}</span>
+ </Checkbox>
+ </div>
+ );
}
<section className="big-spacer-top big-spacer-bottom">
<ul className="bt-search-form">
<li>
- <h6 id="background-task-status-filter-label" className="bt-search-form-label">
- {translate('status')}
- </h6>
- <StatusFilter onChange={this.handleStatusChange} value={status} />
+ <div className="display-flex-column">
+ <label
+ id="background-task-status-filter-label"
+ className="text-bold little-spacer-bottom"
+ htmlFor="status-filter">
+ {translate('status')}
+ </label>
+ <StatusFilter id="status-filter" onChange={this.handleStatusChange} value={status} />
+ </div>
</li>
{types.length > 1 && (
<li>
- <h6 id="background-task-type-filter-label" className="bt-search-form-label">
- {translate('type')}
- </h6>
- <TypesFilter onChange={this.handleTypeChange} types={types} value={taskType} />
+ <div className="display-flex-column">
+ <label
+ id="background-task-type-filter-label"
+ className="text-bold little-spacer-bottom"
+ htmlFor="types-filter">
+ {translate('type')}
+ </label>
+ <TypesFilter
+ id="types-filter"
+ onChange={this.handleTypeChange}
+ types={types}
+ value={taskType}
+ />
+ </div>
</li>
)}
{!component && (
<li>
- <h6 className="bt-search-form-label">
- {translate('background_tasks.currents_filter.ONLY_CURRENTS')}
- </h6>
- <CurrentsFilter onChange={this.handleCurrentsChange} value={currents} />
+ <div className="display-flex-column">
+ <label className="text-bold little-spacer-bottom" htmlFor="currents-filter">
+ {translate('background_tasks.currents_filter.ONLY_CURRENTS')}
+ </label>
+ <CurrentsFilter
+ id="currents-filter"
+ onChange={this.handleCurrentsChange}
+ value={currents}
+ />
+ </div>
</li>
)}
<li>
- <h6 className="bt-search-form-label">{translate('date')}</h6>
<DateFilter
maxExecutedAt={maxExecutedAt}
minSubmittedAt={minSubmittedAt}
import { TaskStatuses } from '../../../types/tasks';
import { STATUSES } from '../constants';
-interface Props {
+interface StatusFilterProps {
value?: string;
+ id: string;
onChange: (value?: string) => void;
}
-export default class StatusFilter extends React.PureComponent<Props> {
- handleChange = ({ value }: BasicSelectOption) => {
- this.props.onChange(value);
- };
+export default function StatusFilter(props: StatusFilterProps) {
+ const { id, value, onChange } = props;
- render() {
- const options: BasicSelectOption[] = [
- { value: STATUSES.ALL, label: translate('background_task.status.ALL') },
- {
- value: STATUSES.ALL_EXCEPT_PENDING,
- label: translate('background_task.status.ALL_EXCEPT_PENDING')
- },
- { value: TaskStatuses.Pending, label: translate('background_task.status.PENDING') },
- { value: TaskStatuses.InProgress, label: translate('background_task.status.IN_PROGRESS') },
- { value: TaskStatuses.Success, label: translate('background_task.status.SUCCESS') },
- { value: TaskStatuses.Failed, label: translate('background_task.status.FAILED') },
- { value: TaskStatuses.Canceled, label: translate('background_task.status.CANCELED') }
- ];
+ const options: BasicSelectOption[] = [
+ { value: STATUSES.ALL, label: translate('background_task.status.ALL') },
+ {
+ value: STATUSES.ALL_EXCEPT_PENDING,
+ label: translate('background_task.status.ALL_EXCEPT_PENDING')
+ },
+ { value: TaskStatuses.Pending, label: translate('background_task.status.PENDING') },
+ { value: TaskStatuses.InProgress, label: translate('background_task.status.IN_PROGRESS') },
+ { value: TaskStatuses.Success, label: translate('background_task.status.SUCCESS') },
+ { value: TaskStatuses.Failed, label: translate('background_task.status.FAILED') },
+ { value: TaskStatuses.Canceled, label: translate('background_task.status.CANCELED') }
+ ];
- return (
- <Select
- aria-labelledby="background-task-status-filter-label"
- className="input-medium"
- onChange={this.handleChange}
- options={options}
- value={options.find(o => o.value === this.props.value)}
- isSearchable={false}
- />
- );
- }
+ const handleChange = React.useCallback(
+ ({ value }: BasicSelectOption) => {
+ onChange(value);
+ },
+ [onChange]
+ );
+
+ return (
+ <Select
+ aria-labelledby="background-task-status-filter-label"
+ className="input-medium"
+ id={id}
+ onChange={handleChange}
+ options={options}
+ value={options.find(o => o.value === value)}
+ isSearchable={false}
+ />
+ );
}
interface Props {
value: string;
+ id: string;
onChange: Function;
types: string[];
}
};
render() {
- const { value, types } = this.props;
+ const { value, types, id } = this.props;
const options = types.map(t => {
return {
value: t,
<Select
aria-labelledby="background-task-type-filter-label"
className="input-large"
+ id={id}
isClearable={false}
onChange={this.handleChange}
options={allOptions}
import './projectActivity.css';
import ProjectActivityAnalysesList from './ProjectActivityAnalysesList';
import ProjectActivityGraphs from './ProjectActivityGraphs';
-import ProjectActivityPageHeader from './ProjectActivityPageHeader';
+import ProjectActivityPageFilters from './ProjectActivityPageFilters';
interface Props {
addCustomEvent: (analysis: string, name: string, category?: string) => Promise<void>;
<A11ySkipTarget anchor="activity_main" />
- <ProjectActivityPageHeader
+ <ProjectActivityPageFilters
category={query.category}
from={query.from}
project={props.project}
render() {
return (
- <div>
+ <div className="display-flex-end">
<DateRangeInput
onChange={this.handleChange}
value={{ from: this.props.from, to: this.props.to }}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import * as React from 'react';
+import Select from '../../../components/controls/Select';
+import { translate } from '../../../helpers/l10n';
+import { ComponentQualifier } from '../../../types/component';
+import { Component } from '../../../types/types';
+import { APPLICATION_EVENT_TYPES, EVENT_TYPES, Query } from '../utils';
+import ProjectActivityDateInput from './ProjectActivityDateInput';
+
+interface ProjectActivityPageFiltersProps {
+ category?: string;
+ from?: Date;
+ project: Pick<Component, 'qualifier'>;
+ to?: Date;
+ updateQuery: (changes: Partial<Query>) => void;
+}
+
+export default function ProjectActivityPageFilters(props: ProjectActivityPageFiltersProps) {
+ const { project, category, from, to, updateQuery } = props;
+
+ const isApp = project.qualifier === ComponentQualifier.Application;
+ const eventTypes = isApp ? APPLICATION_EVENT_TYPES : EVENT_TYPES;
+ const options = eventTypes.map(category => ({
+ label: translate('event.category', category),
+ value: category
+ }));
+
+ const handleCategoryChange = React.useCallback(
+ (option: { value: string } | null) => {
+ updateQuery({ category: option ? option.value : '' });
+ },
+ [updateQuery]
+ );
+
+ return (
+ <div className="page-header display-flex-start">
+ {!([ComponentQualifier.Portfolio, ComponentQualifier.SubPortfolio] as string[]).includes(
+ 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
+ className={isApp ? 'input-large' : 'input-medium'}
+ id="filter-events"
+ isClearable={true}
+ isSearchable={false}
+ onChange={handleCategoryChange}
+ options={options}
+ value={options.filter(o => o.value === category)}
+ />
+ </div>
+ )}
+ <ProjectActivityDateInput from={from} onChange={props.updateQuery} to={to} />
+ </div>
+ );
+}
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
- */
-import classNames from 'classnames';
-import * as React from 'react';
-import Select from '../../../components/controls/Select';
-import { translate } from '../../../helpers/l10n';
-import { Component } from '../../../types/types';
-import { APPLICATION_EVENT_TYPES, EVENT_TYPES, Query } from '../utils';
-import ProjectActivityDateInput from './ProjectActivityDateInput';
-
-interface Props {
- category?: string;
- from?: Date;
- project: Pick<Component, 'qualifier'>;
- to?: Date;
- updateQuery: (changes: Partial<Query>) => void;
-}
-
-export default class ProjectActivityPageHeader extends React.PureComponent<Props> {
- handleCategoryChange = (option: { value: string } | null) =>
- this.props.updateQuery({ category: option ? option.value : '' });
-
- render() {
- const isApp = this.props.project.qualifier === 'APP';
- const eventTypes = isApp ? APPLICATION_EVENT_TYPES : EVENT_TYPES;
- const options = eventTypes.map(category => ({
- label: translate('event.category', category),
- value: category
- }));
-
- return (
- <header className="page-header">
- {!['VW', 'SVW'].includes(this.props.project.qualifier) && (
- <Select
- className={classNames('pull-left big-spacer-right', {
- 'input-medium': !isApp,
- 'input-large': isApp
- })}
- placeholder={translate('project_activity.filter_events') + '...'}
- isClearable={true}
- isSearchable={false}
- onChange={this.handleCategoryChange}
- options={options}
- value={options.filter(o => o.value === this.props.category)}
- />
- )}
- <ProjectActivityDateInput
- from={this.props.from}
- onChange={this.props.updateQuery}
- to={this.props.to}
- />
- </header>
- );
- }
-}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { parseDate } from '../../../../helpers/dates';
+import ProjectActivityPageFilters from '../ProjectActivityPageFilters';
+
+it('should render correctly the list of series', () => {
+ expect(
+ shallow(
+ <ProjectActivityPageFilters
+ category=""
+ from={parseDate('2016-10-27T12:21:15+0200')}
+ project={{ qualifier: 'TRK' }}
+ updateQuery={() => {}}
+ />
+ )
+ ).toMatchSnapshot();
+});
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
- */
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import { parseDate } from '../../../../helpers/dates';
-import ProjectActivityPageHeader from '../ProjectActivityPageHeader';
-
-it('should render correctly the list of series', () => {
- expect(
- shallow(
- <ProjectActivityPageHeader
- category=""
- from={parseDate('2016-10-27T12:21:15+0200')}
- project={{ qualifier: 'TRK' }}
- updateQuery={() => {}}
- />
- )
- ).toMatchSnapshot();
-});
<A11ySkipTarget
anchor="activity_main"
/>
- <ProjectActivityPageHeader
+ <ProjectActivityPageFilters
category=""
project={
Object {
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render correctly the date inputs 1`] = `
-<div>
+<div
+ className="display-flex-end"
+>
<DateRangeInput
onChange={[Function]}
value={
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly the list of series 1`] = `
+<div
+ className="page-header display-flex-start"
+>
+ <div
+ className="display-flex-column big-spacer-right"
+ >
+ <label
+ className="text-bold little-spacer-bottom"
+ htmlFor="filter-events"
+ >
+ project_activity.filter_events
+ </label>
+ <Select
+ className="input-medium"
+ id="filter-events"
+ isClearable={true}
+ isSearchable={false}
+ onChange={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "event.category.VERSION",
+ "value": "VERSION",
+ },
+ Object {
+ "label": "event.category.QUALITY_GATE",
+ "value": "QUALITY_GATE",
+ },
+ Object {
+ "label": "event.category.QUALITY_PROFILE",
+ "value": "QUALITY_PROFILE",
+ },
+ Object {
+ "label": "event.category.OTHER",
+ "value": "OTHER",
+ },
+ ]
+ }
+ value={Array []}
+ />
+ </div>
+ <ProjectActivityDateInput
+ from={2016-10-27T10:21:15.000Z}
+ onChange={[Function]}
+ />
+</div>
+`;
+++ /dev/null
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly the list of series 1`] = `
-<header
- className="page-header"
->
- <Select
- className="pull-left big-spacer-right input-medium"
- isClearable={true}
- isSearchable={false}
- onChange={[Function]}
- options={
- Array [
- Object {
- "label": "event.category.VERSION",
- "value": "VERSION",
- },
- Object {
- "label": "event.category.QUALITY_GATE",
- "value": "QUALITY_GATE",
- },
- Object {
- "label": "event.category.QUALITY_PROFILE",
- "value": "QUALITY_PROFILE",
- },
- Object {
- "label": "event.category.OTHER",
- "value": "OTHER",
- },
- ]
- }
- placeholder="project_activity.filter_events..."
- value={Array []}
- />
- <ProjectActivityDateInput
- from={2016-10-27T10:21:15.000Z}
- onChange={[Function]}
- />
-</header>
-`;
import DateRangeInput from '../../../components/controls/DateRangeInput';
import { translate } from '../../../helpers/l10n';
-interface Props {
+interface ChangelogSearchProps {
dateRange: { from?: Date; to?: Date } | undefined;
onDateRangeChange: (range: { from?: Date; to?: Date }) => void;
onReset: () => void;
}
-export default class ChangelogSearch extends React.PureComponent<Props> {
- render() {
- return (
- <div className="display-inline-block" id="quality-profile-changelog-form">
- <DateRangeInput onChange={this.props.onDateRangeChange} value={this.props.dateRange} />
- <Button className="spacer-left text-top" onClick={this.props.onReset}>
- {translate('reset_verb')}
- </Button>
- </div>
- );
- }
+export default function ChangelogSearch(props: ChangelogSearchProps) {
+ const { dateRange } = props;
+ return (
+ <div className="display-flex-end" id="quality-profile-changelog-form">
+ <DateRangeInput onChange={props.onDateRangeChange} value={dateRange} />
+ <Button className="spacer-left text-top" onClick={props.onReset}>
+ {translate('reset_verb')}
+ </Button>
+ </div>
+ );
}
exports[`should render 1`] = `
<div
- className="display-inline-block"
+ className="display-flex-end"
id="quality-profile-changelog-form"
>
<DateRangeInput
maxDate?: Date;
minDate?: Date;
name?: string;
+ id?: string;
onChange: (date: Date | undefined) => void;
placeholder: string;
value?: Date;
name,
className,
inputClassName,
+ id,
placeholder
} = this.props;
const { lastHovered, currentMonth, open } = this.state;
className={classNames('date-input-control-input', inputClassName, {
'is-filled': value !== undefined
})}
+ id={id}
innerRef={(node: HTMLInputElement | null) => (this.input = node)}
name={name}
onFocus={this.openCalendar}
const { minDate, maxDate } = this.props;
return (
- <div className={classNames('display-inline-flex-center', this.props.className)}>
- <DateInput
- currentMonth={this.to}
- data-test="from"
- highlightTo={this.to}
- minDate={minDate}
- maxDate={maxDate && this.to ? min([maxDate, this.to]) : maxDate || this.to}
- onChange={this.handleFromChange}
- placeholder={translate('start_date')}
- value={this.from}
- />
- <span className="note little-spacer-left little-spacer-right">{translate('to_')}</span>
- <DateInput
- currentMonth={this.from}
- data-test="to"
- highlightFrom={this.from}
- minDate={minDate && this.from ? max([minDate, this.from]) : minDate || this.from}
- maxDate={maxDate}
- onChange={this.handleToChange}
- placeholder={translate('end_date')}
- ref={element => (this.toDateInput = element)}
- value={this.to}
- />
+ <div className={classNames('display-flex-end', this.props.className)}>
+ <div className="display-flex-column">
+ <label className="text-bold little-spacer-bottom" htmlFor="date-from">
+ {translate('start_date')}
+ </label>
+ <DateInput
+ currentMonth={this.to}
+ data-test="from"
+ id="date-from"
+ highlightTo={this.to}
+ minDate={minDate}
+ maxDate={maxDate && this.to ? min([maxDate, this.to]) : maxDate || this.to}
+ onChange={this.handleFromChange}
+ placeholder={translate('start_date')}
+ value={this.from}
+ />
+ </div>
+ <span className="note little-spacer-left little-spacer-right little-spacer-bottom">
+ {translate('to_')}
+ </span>
+ <div className="display-flex-column">
+ <label className="text-bold little-spacer-bottom" htmlFor="date-to">
+ {translate('end_date')}
+ </label>
+ <DateInput
+ currentMonth={this.from}
+ data-test="to"
+ id="date-to"
+ highlightFrom={this.from}
+ minDate={minDate && this.from ? max([minDate, this.from]) : minDate || this.from}
+ maxDate={maxDate}
+ onChange={this.handleToChange}
+ placeholder={translate('end_date')}
+ ref={element => (this.toDateInput = element)}
+ value={this.to}
+ />
+ </div>
</div>
);
}
exports[`should render 1`] = `
<div
- className="display-inline-flex-center"
+ className="display-flex-end"
>
- <DateInput
- currentMonth={2018-02-05T00:00:00.000Z}
- data-test="from"
- highlightTo={2018-02-05T00:00:00.000Z}
- maxDate={2018-02-05T00:00:00.000Z}
- onChange={[Function]}
- placeholder="start_date"
- value={2018-01-17T00:00:00.000Z}
- />
+ <div
+ className="display-flex-column"
+ >
+ <label
+ className="text-bold little-spacer-bottom"
+ htmlFor="date-from"
+ >
+ start_date
+ </label>
+ <DateInput
+ currentMonth={2018-02-05T00:00:00.000Z}
+ data-test="from"
+ highlightTo={2018-02-05T00:00:00.000Z}
+ id="date-from"
+ maxDate={2018-02-05T00:00:00.000Z}
+ onChange={[Function]}
+ placeholder="start_date"
+ value={2018-01-17T00:00:00.000Z}
+ />
+ </div>
<span
- className="note little-spacer-left little-spacer-right"
+ className="note little-spacer-left little-spacer-right little-spacer-bottom"
>
to_
</span>
- <DateInput
- currentMonth={2018-01-17T00:00:00.000Z}
- data-test="to"
- highlightFrom={2018-01-17T00:00:00.000Z}
- minDate={2018-01-17T00:00:00.000Z}
- onChange={[Function]}
- placeholder="end_date"
- value={2018-02-05T00:00:00.000Z}
- />
+ <div
+ className="display-flex-column"
+ >
+ <label
+ className="text-bold little-spacer-bottom"
+ htmlFor="date-to"
+ >
+ end_date
+ </label>
+ <DateInput
+ currentMonth={2018-01-17T00:00:00.000Z}
+ data-test="to"
+ highlightFrom={2018-01-17T00:00:00.000Z}
+ id="date-to"
+ minDate={2018-01-17T00:00:00.000Z}
+ onChange={[Function]}
+ placeholder="end_date"
+ value={2018-02-05T00:00:00.000Z}
+ />
+ </div>
</div>
`;
exports[`should render: with min/max 1`] = `
<div
- className="display-inline-flex-center"
+ className="display-flex-end"
>
- <DateInput
- data-test="from"
- maxDate={2018-02-05T00:00:00.000Z}
- minDate={2018-01-17T00:00:00.000Z}
- onChange={[Function]}
- placeholder="start_date"
- />
+ <div
+ className="display-flex-column"
+ >
+ <label
+ className="text-bold little-spacer-bottom"
+ htmlFor="date-from"
+ >
+ start_date
+ </label>
+ <DateInput
+ data-test="from"
+ id="date-from"
+ maxDate={2018-02-05T00:00:00.000Z}
+ minDate={2018-01-17T00:00:00.000Z}
+ onChange={[Function]}
+ placeholder="start_date"
+ />
+ </div>
<span
- className="note little-spacer-left little-spacer-right"
+ className="note little-spacer-left little-spacer-right little-spacer-bottom"
>
to_
</span>
- <DateInput
- data-test="to"
- maxDate={2018-02-05T00:00:00.000Z}
- minDate={2018-01-17T00:00:00.000Z}
- onChange={[Function]}
- placeholder="end_date"
- />
+ <div
+ className="display-flex-column"
+ >
+ <label
+ className="text-bold little-spacer-bottom"
+ htmlFor="date-to"
+ >
+ end_date
+ </label>
+ <DateInput
+ data-test="to"
+ id="date-to"
+ maxDate={2018-02-05T00:00:00.000Z}
+ minDate={2018-01-17T00:00:00.000Z}
+ onChange={[Function]}
+ placeholder="end_date"
+ />
+ </div>
</div>
`;
exports[`should render: with min/max and value 1`] = `
<div
- className="display-inline-flex-center"
+ className="display-flex-end"
>
- <DateInput
- currentMonth={2018-02-05T00:00:00.000Z}
- data-test="from"
- highlightTo={2018-02-05T00:00:00.000Z}
- maxDate={2018-02-05T00:00:00.000Z}
- minDate={2018-01-17T00:00:00.000Z}
- onChange={[Function]}
- placeholder="start_date"
- value={2018-01-17T00:00:00.000Z}
- />
+ <div
+ className="display-flex-column"
+ >
+ <label
+ className="text-bold little-spacer-bottom"
+ htmlFor="date-from"
+ >
+ start_date
+ </label>
+ <DateInput
+ currentMonth={2018-02-05T00:00:00.000Z}
+ data-test="from"
+ highlightTo={2018-02-05T00:00:00.000Z}
+ id="date-from"
+ maxDate={2018-02-05T00:00:00.000Z}
+ minDate={2018-01-17T00:00:00.000Z}
+ onChange={[Function]}
+ placeholder="start_date"
+ value={2018-01-17T00:00:00.000Z}
+ />
+ </div>
<span
- className="note little-spacer-left little-spacer-right"
+ className="note little-spacer-left little-spacer-right little-spacer-bottom"
>
to_
</span>
- <DateInput
- currentMonth={2018-01-17T00:00:00.000Z}
- data-test="to"
- highlightFrom={2018-01-17T00:00:00.000Z}
- maxDate={2018-02-05T00:00:00.000Z}
- minDate={2018-01-17T00:00:00.000Z}
- onChange={[Function]}
- placeholder="end_date"
- value={2018-02-05T00:00:00.000Z}
- />
+ <div
+ className="display-flex-column"
+ >
+ <label
+ className="text-bold little-spacer-bottom"
+ htmlFor="date-to"
+ >
+ end_date
+ </label>
+ <DateInput
+ currentMonth={2018-01-17T00:00:00.000Z}
+ data-test="to"
+ highlightFrom={2018-01-17T00:00:00.000Z}
+ id="date-to"
+ maxDate={2018-02-05T00:00:00.000Z}
+ minDate={2018-01-17T00:00:00.000Z}
+ onChange={[Function]}
+ placeholder="end_date"
+ value={2018-02-05T00:00:00.000Z}
+ />
+ </div>
</div>
`;
projects / sonarqube.git / commitdiff