[ML] calendar eui conversion (#26741) (#27054)

* Create calendar list in react * wip: create new_calendar page * Update new calendar settings directory name * Edit button action + update utils * Adds ability to create new calendar * Display calendar data on edit * rename directory to settings/calendar * Add scss files to calendar dir * Create new group from form * Adds event table and partial event modal. * adds datepicker to modal * Time range event functionality * add import event functionality * upate new event modal design * Add error handling to list/edit * calendarId validity check * Create/delete permission. List/form style tweak * Update calendarList to match filterList * Add missing newlines in scss files * Initial tests for calendar list * Update classnames to meet guidelines * ImportedEvents component + create utils * remove unnecessary import * rename calendars dir * include past evens in import if checkbox checked * code review updates * move components into own directories * update index.scss with dir name change * skip irrelevant tests * fix unsaved event deletion. rename scss file. * Add modal tests * Show calendarId and description as header on edit * update snapshot for refactor * update classnames to BEM guidelines * Update snapshot for classname change
elastic · Dec 12, 2018 · 00ab45a · 00ab45a
1 parent 5b82c06
commit 00ab45a
Show file tree

Hide file tree

Showing 49 changed files with 3,179 additions and 6 deletions.
diff --git a/x-pack/plugins/ml/public/settings/_index.scss b/x-pack/plugins/ml/public/settings/_index.scss
@@ -1,3 +1,3 @@
 @import 'settings';
 @import 'filter_lists/index';
-@import 'scheduled_events/index';
+@import 'calendars/index';
diff --git a/x-pack/plugins/ml/public/settings/calendars/_calendars.scss b/x-pack/plugins/ml/public/settings/calendars/_calendars.scss
@@ -0,0 +1,4 @@
+.mlCalendarManagement {
+  background: $euiColorLightestShade;
+  min-height: 100vh;
+}
diff --git a/x-pack/plugins/ml/public/settings/calendars/_index.scss b/x-pack/plugins/ml/public/settings/calendars/_index.scss
@@ -0,0 +1,3 @@
+@import 'calendars';
+@import 'edit/index';
+@import 'list/index';
diff --git a/x-pack/plugins/ml/public/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap b/x-pack/plugins/ml/public/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCalendar Renders new calendar form 1`] = `
+<EuiPage
+  className="mlCalendarEditForm"
+  restrictWidth={false}
+>
+  <EuiPageContent
+    className="mlCalendarEditForm__content"
+    horizontalPosition="center"
+    panelPaddingSize="l"
+    verticalPosition="center"
+  >
+    <CalendarForm
+      calendarId=""
+      description=""
+      eventsList={Array []}
+      groupIds={Array []}
+      isEdit={false}
+      isNewCalendarIdValid={true}
+      jobIds={Array []}
+      onCalendarIdChange={[Function]}
+      onCreate={[Function]}
+      onCreateGroupOption={[Function]}
+      onDescriptionChange={[Function]}
+      onEdit={[Function]}
+      onEventDelete={[Function]}
+      onGroupSelection={[Function]}
+      onJobSelection={[Function]}
+      saving={false}
+      selectedGroupOptions={Array []}
+      selectedJobOptions={Array []}
+      showImportModal={[Function]}
+      showNewEventModal={[Function]}
+    />
+  </EuiPageContent>
+</EuiPage>
+`;
diff --git a/x-pack/plugins/ml/public/settings/calendars/edit/_edit.scss b/x-pack/plugins/ml/public/settings/calendars/edit/_edit.scss
@@ -0,0 +1,8 @@
+.mlCalendarEditForm {
+  .mlCalendarEditForm__content {
+    max-width: map-get($euiBreakpoints, 'xl');
+    width: 100%;
+    margin-top: $euiSize;
+    margin-bottom: $euiSize;  
+  }
+}
diff --git a/x-pack/plugins/ml/public/settings/calendars/edit/_index.scss b/x-pack/plugins/ml/public/settings/calendars/edit/_index.scss
@@ -0,0 +1 @@
+@import 'edit';
diff --git a/.../ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap b/.../ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CalendarForm Renders calendar form 1`] = `
+<EuiForm>
+  <React.Fragment>
+    <EuiFormRow
+      describedByIds={Array []}
+      error={
+        Array [
+          "Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores;
+    must start and end with an alphanumeric character",
+        ]
+      }
+      fullWidth={false}
+      hasEmptyLabelSpace={false}
+      isInvalid={true}
+      label="Calendar ID"
+    >
+      <EuiFieldText
+        compressed={false}
+        disabled={false}
+        fullWidth={false}
+        isLoading={false}
+        name="calendarId"
+        onChange={[MockFunction]}
+        value=""
+      />
+    </EuiFormRow>
+    <EuiFormRow
+      describedByIds={Array []}
+      fullWidth={false}
+      hasEmptyLabelSpace={false}
+      label="Description"
+    >
+      <EuiFieldText
+        compressed={false}
+        disabled={false}
+        fullWidth={false}
+        isLoading={false}
+        name="description"
+        onChange={[MockFunction]}
+        value=""
+      />
+    </EuiFormRow>
+  </React.Fragment>
+  <EuiFormRow
+    describedByIds={Array []}
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    label="Jobs"
+  >
+    <EuiComboBox
+      compressed={false}
+      disabled={false}
+      fullWidth={false}
+      isClearable={true}
+      onChange={[MockFunction]}
+      options={Array []}
+      selectedOptions={Array []}
+      singleSelection={false}
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    describedByIds={Array []}
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    label="Groups"
+  >
+    <EuiComboBox
+      compressed={false}
+      disabled={false}
+      fullWidth={false}
+      isClearable={true}
+      onChange={[MockFunction]}
+      onCreateOption={[MockFunction]}
+      options={Array []}
+      selectedOptions={Array []}
+      singleSelection={false}
+    />
+  </EuiFormRow>
+  <EuiSpacer
+    size="xl"
+  />
+  <EuiFormRow
+    describedByIds={Array []}
+    fullWidth={true}
+    hasEmptyLabelSpace={false}
+    label="Events"
+  >
+    <EventsTable
+      eventsList={Array []}
+      onDeleteClick={[MockFunction]}
+      showImportModal={[MockFunction]}
+      showNewEventModal={[MockFunction]}
+      showSearchBar={true}
+    />
+  </EuiFormRow>
+  <EuiSpacer
+    size="l"
+  />
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="l"
+    justifyContent="flexEnd"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiButton
+        color="primary"
+        disabled={true}
+        fill={true}
+        iconSide="left"
+        onClick={[MockFunction]}
+        type="button"
+      >
+        Save
+      </EuiButton>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiButton
+        color="primary"
+        disabled={false}
+        fill={false}
+        href="undefined/app/ml#/settings/calendars_list"
+        iconSide="left"
+        type="button"
+      >
+        Cancel
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</EuiForm>
+`;
diff --git a/x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/calendar_form.js b/x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/calendar_form.js
@@ -0,0 +1,191 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+
+import React, { Fragment } from 'react';
+import { PropTypes } from 'prop-types';
+
+import {
+  EuiButton,
+  EuiComboBox,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiForm,
+  EuiFormRow,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+
+import chrome from 'ui/chrome';
+import { EventsTable } from '../events_table/';
+
+
+function EditHeader({
+  calendarId,
+  description
+}) {
+  return (
+    <Fragment>
+      <EuiTitle>
+        <h1>Calendar {calendarId}</h1>
+      </EuiTitle>
+      <EuiText>
+        <p>
+          {description}
+        </p>
+      </EuiText>
+      <EuiSpacer size="l"/>
+    </Fragment>
+  );
+}
+
+export function CalendarForm({
+  calendarId,
+  description,
+  eventsList,
+  groupIds,
+  isEdit,
+  isNewCalendarIdValid,
+  jobIds,
+  onCalendarIdChange,
+  onCreate,
+  onCreateGroupOption,
+  onDescriptionChange,
+  onEdit,
+  onEventDelete,
+  onGroupSelection,
+  showImportModal,
+  onJobSelection,
+  saving,
+  selectedGroupOptions,
+  selectedJobOptions,
+  showNewEventModal
+}) {
+  const msg = `Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores;
+    must start and end with an alphanumeric character`;
+  const helpText = (isNewCalendarIdValid === true && !isEdit) ? msg : undefined;
+  const error = (isNewCalendarIdValid === false && !isEdit) ? [msg] : undefined;
+
+  return (
+    <EuiForm>
+      {!isEdit &&
+        <Fragment>
+          <EuiFormRow
+            label="Calendar ID"
+            helpText={helpText}
+            error={error}
+            isInvalid={!isNewCalendarIdValid}
+          >
+            <EuiFieldText
+              name="calendarId"
+              value={calendarId}
+              onChange={onCalendarIdChange}
+              disabled={isEdit === true || saving === true}
+            />
+          </EuiFormRow>
+
+          <EuiFormRow
+            label="Description"
+          >
+            <EuiFieldText
+              name="description"
+              value={description}
+              onChange={onDescriptionChange}
+              disabled={isEdit === true || saving === true}
+            />
+          </EuiFormRow>
+        </Fragment>
+      }
+      {isEdit &&
+        <EditHeader
+          calendarId={calendarId}
+          description={description}
+        />}
+      <EuiFormRow
+        label="Jobs"
+      >
+        <EuiComboBox
+          options={jobIds}
+          selectedOptions={selectedJobOptions}
+          onChange={onJobSelection}
+          disabled={saving === true}
+        />
+      </EuiFormRow>
+
+      <EuiFormRow
+        label="Groups"
+      >
+        <EuiComboBox
+          onCreateOption={onCreateGroupOption}
+          options={groupIds}
+          selectedOptions={selectedGroupOptions}
+          onChange={onGroupSelection}
+          disabled={saving === true}
+        />
+      </EuiFormRow>
+
+      <EuiSpacer size="xl" />
+
+      <EuiFormRow
+        label="Events"
+        fullWidth
+      >
+        <EventsTable
+          eventsList={eventsList}
+          onDeleteClick={onEventDelete}
+          showImportModal={showImportModal}
+          showNewEventModal={showNewEventModal}
+          showSearchBar
+        />
+      </EuiFormRow>
+      <EuiSpacer size="l" />
+      <EuiFlexGroup justifyContent="flexEnd">
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            fill
+            onClick={isEdit ? onEdit : onCreate}
+            disabled={saving || !isNewCalendarIdValid || calendarId === ''}
+          >
+            {saving ? 'Saving...' : 'Save'}
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            disabled={saving}
+            href={`${chrome.getBasePath()}/app/ml#/settings/calendars_list`}
+          >
+            Cancel
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiForm>
+  );
+}
+
+CalendarForm.propTypes = {
+  calendarId: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  groupIds: PropTypes.array.isRequired,
+  isEdit: PropTypes.bool.isRequired,
+  isNewCalendarIdValid: PropTypes.bool.isRequired,
+  jobIds: PropTypes.array.isRequired,
+  onCalendarIdChange: PropTypes.func.isRequired,
+  onCreate: PropTypes.func.isRequired,
+  onCreateGroupOption: PropTypes.func.isRequired,
+  onDescriptionChange: PropTypes.func.isRequired,
+  onEdit: PropTypes.func.isRequired,
+  onEventDelete: PropTypes.func.isRequired,
+  onGroupSelection: PropTypes.func.isRequired,
+  showImportModal: PropTypes.func.isRequired,
+  onJobSelection: PropTypes.func.isRequired,
+  saving: PropTypes.bool.isRequired,
+  selectedGroupOptions: PropTypes.array.isRequired,
+  selectedJobOptions: PropTypes.array.isRequired,
+  showNewEventModal: PropTypes.func.isRequired,
+};