[ML] Converts Settings page to react (elastic#27144)

* Replace settings page with react directive

* Adds test for Settings component

* add calendar permission check

* Update settings test

* Remove outdated angular settings tests

x-pack/plugins/ml/public/settings/__snapshots__/settings.test.js.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Settings Renders settings page 1`] = `
+<EuiPage
+  className="mlSettingsPage"
+  restrictWidth={false}
+>
+  <EuiPageBody
+    className="mlSettingsPage__body"
+    restrictWidth={false}
+  >
+    <EuiPageContent
+      className="mlSettingsPage__content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+    >
+      <EuiPageContentHeader
+        responsive={true}
+      >
+        <EuiTitle
+          size="m"
+          textTransform="none"
+        >
+          <h2>
+            Job Management
+          </h2>
+        </EuiTitle>
+      </EuiPageContentHeader>
+      <EuiFlexGroup
+        alignItems="stretch"
+        component="div"
+        direction="row"
+        gutterSize="xl"
+        justifyContent="flexStart"
+        responsive={true}
+        wrap={false}
+      >
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiButtonEmpty
+            color="primary"
+            data-testid="ml_calendar_mng_button"
+            href="undefined/app/ml#/settings/calendars_list"
+            iconSide="left"
+            isDisabled={false}
+            size="l"
+            type="button"
+          >
+            Calendar management
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem
+          component="div"
+          grow={false}
+        >
+          <EuiButtonEmpty
+            color="primary"
+            data-testid="ml_filter_lists_button"
+            href="undefined/app/ml#/settings/filter_lists"
+            iconSide="left"
+            isDisabled={false}
+            size="l"
+            type="button"
+          >
+            Filter Lists
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPageContent>
+  </EuiPageBody>
+</EuiPage>
+`;

x-pack/plugins/ml/public/settings/_settings.scss

@@ -1,18 +1,14 @@
-.disabled {
-  color: $euiColorMediumShade;
-  cursor: pointer;
-}
+.mlSettingsPage {
 
-ml-settings {
-  .mgtPanel {
-    .mgtPanel__link {
-      font-size: $euiFontSizeM;
-      line-height: $euiSizeXL;
-      margin-left: $euiSizeXS;
-    }
+  .mlSettingsPage__body {
+    background: $euiColorLightestShade;
+    min-height: 100vh;
+  }
 
-    .disabled {
-      color: $euiColorMediumShade;
-    }
+  .mlSettingsPage__content {
+    width: map-get($euiBreakpoints, 'xl');
+    margin-top: $euiSize;
+    margin-bottom: $euiSize;
   }
-}
+
+}

x-pack/plugins/ml/public/settings/index.js

@@ -6,6 +6,6 @@
 
 
 
-import './settings_controller';
+import './settings_directive';
 import './calendars';
 import './filter_lists';

x-pack/plugins/ml/public/settings/settings.js

@@ -0,0 +1,75 @@
+/*
+ * 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 from 'react';
+import { PropTypes } from 'prop-types';
+
+import {
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPage,
+  EuiPageContentHeader,
+  EuiPageContent,
+  EuiPageBody,
+  EuiTitle
+} from '@elastic/eui';
+
+import chrome from 'ui/chrome';
+
+
+export function Settings({ canCreateFilter, canCreateCalendar }) {
+  return (
+    <EuiPage className="mlSettingsPage">
+      <EuiPageBody className="mlSettingsPage__body">
+        <EuiPageContent
+          className="mlSettingsPage__content"
+          horizontalPosition="center"
+        >
+          <EuiPageContentHeader>
+            <EuiTitle>
+              <h2>Job Management</h2>
+            </EuiTitle>
+          </EuiPageContentHeader>
+
+          <EuiFlexGroup gutterSize="xl">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                data-testid="ml_calendar_mng_button"
+                size="l"
+                color="primary"
+                href={`${chrome.getBasePath()}/app/ml#/settings/calendars_list`}
+                isDisabled={canCreateCalendar === false}
+              >
+                Calendar management
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                data-testid="ml_filter_lists_button"
+                size="l"
+                color="primary"
+                href={`${chrome.getBasePath()}/app/ml#/settings/filter_lists`}
+                isDisabled={canCreateFilter === false}
+              >
+                Filter Lists
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+}
+
+Settings.propTypes = {
+  canCreateFilter: PropTypes.bool.isRequired,
+  canCreateCalendar: PropTypes.bool.isRequired,
+};

x-pack/plugins/ml/public/settings/settings.test.js

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+
+
+jest.mock('ui/chrome', () => ({
+  getBasePath: jest.fn()
+}));
+
+import { shallow, mount } from 'enzyme';
+import React from 'react';
+
+import { Settings } from './settings';
+
+
+describe('Settings', () => {
+
+  test('Renders settings page', () => {
+    const wrapper = shallow(
+      <Settings canCreateFilter={true} canCreateCalendar={true}/>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('Filter Lists button disabled if canCreateFilter is false', () => {
+    const wrapper = mount(
+      <Settings canCreateFilter={false} canCreateCalendar={true}/>
+    );
+
+    const button = wrapper.find('[data-testid="ml_filter_lists_button"]');
+    const filterButton = button.find('EuiButtonEmpty');
+    expect(filterButton.prop('isDisabled')).toBe(true);
+  });
+
+  test('Calendar management button disabled if canCreateCalendar is false', () => {
+    const wrapper = mount(
+      <Settings canCreateFilter={true} canCreateCalendar={false} />
+    );
+
+    const button = wrapper.find('[data-testid="ml_calendar_mng_button"]');
+    const calendarButton = button.find('EuiButtonEmpty');
+    expect(calendarButton.prop('isDisabled')).toBe(true);
+  });
+
+});