feat(Tasks): create new Task scheduler form (#6265)

* feat(TaskPage): add TaskScheduler to TaskPage

* feat(Tasks): create new task scheduler component

* feat: add script selector component

* feat: add task interval form component

* fix: prettier

* chore: clean up

* fix: update form input styles

* chore: clean up

* fix: fix positioning of tooltips

* fix: use taskOption.name for task name input

* fix(taskPage): update showControlBar prop

* chore: updating wording

Author: blegesse-w

src/tasks/components/TaskHeader.tsx

@@ -10,37 +10,40 @@ import {
 } from '@influxdata/clockface'
 
 interface Props {
-  title: string
   canSubmit: boolean
   onCancel: () => void
   onSave: () => void
+  showControlBar?: boolean
+  title: string
 }
 
 export default class TaskHeader extends PureComponent<Props> {
   public render() {
-    const {onCancel, onSave, title} = this.props
+    const {onCancel, onSave, showControlBar = true, title} = this.props
     return (
       <>
         <Page.Header fullWidth={true}>
           <Page.Title title={title} />
         </Page.Header>
-        <Page.ControlBar fullWidth={true}>
-          <Page.ControlBarRight>
-            <Button
-              color={ComponentColor.Tertiary}
-              text="Cancel"
-              onClick={onCancel}
-              testID="task-cancel-btn"
-            />
-            <Button
-              color={ComponentColor.Success}
-              text="Save"
-              status={this.status}
-              onClick={onSave}
-              testID="task-save-btn"
-            />
-          </Page.ControlBarRight>
-        </Page.ControlBar>
+        {showControlBar && (
+          <Page.ControlBar fullWidth={true}>
+            <Page.ControlBarRight>
+              <Button
+                color={ComponentColor.Tertiary}
+                text="Cancel"
+                onClick={onCancel}
+                testID="task-cancel-btn"
+              />
+              <Button
+                color={ComponentColor.Success}
+                text="Save"
+                status={this.status}
+                onClick={onSave}
+                testID="task-save-btn"
+              />
+            </Page.ControlBarRight>
+          </Page.ControlBar>
+        )}
       </>
     )
   }

src/tasks/components/TaskScheduler/ScriptSelector.tsx

@@ -0,0 +1,69 @@
+import React, {FC} from 'react'
+import {useHistory, useParams} from 'react-router-dom'
+import {
+  ComponentSize,
+  Dropdown,
+  Form,
+  IconFont,
+  Input,
+} from '@influxdata/clockface'
+
+// Utils
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+
+export const ScriptSelector: FC = () => {
+  const {orgID} = useParams<{orgID: string}>()
+  const history = useHistory()
+  const fluxScriptEditorLink = `/orgs/${orgID}/data-explorer?fluxScriptEditor`
+
+  const openScriptEditor = () => {
+    history.push(`/orgs/${orgID}/data-explorer?fluxScriptEditor`)
+  }
+
+  const createScriptInEditor = (
+    <Dropdown.Item onClick={openScriptEditor}>
+      + Create Script in Editor
+    </Dropdown.Item>
+  )
+
+  const dropdownButtonText = 'Select a Script'
+
+  return (
+    <div className="select-script">
+      <div className="create-task-titles script">Select a Script</div>
+      <Form.Element label="Script" required={true} className="script-dropdown">
+        <Dropdown
+          button={(active, onClick) => (
+            <Dropdown.Button
+              active={active}
+              onClick={onClick}
+              testID="variable-type-dropdown--button"
+            >
+              {dropdownButtonText}
+            </Dropdown.Button>
+          )}
+          menu={onCollapse => (
+            <>
+              <Input
+                size={ComponentSize.Small}
+                icon={IconFont.Search_New}
+                value=""
+                placeholder="Search Scripts..."
+                onChange={() => {}}
+              />
+              <Dropdown.Menu onCollapse={onCollapse}>
+                {createScriptInEditor}
+              </Dropdown.Menu>
+            </>
+          )}
+        />
+      </Form.Element>
+      <p>
+        You can create or edit Scripts in the{' '}
+        <SafeBlankLink href={fluxScriptEditorLink}>
+          Script Editor.
+        </SafeBlankLink>
+      </p>
+    </div>
+  )
+}

src/tasks/components/TaskScheduler/TaskIntervalForm.tsx

@@ -0,0 +1,86 @@
+import React, {FC, ChangeEvent} from 'react'
+import {
+  Columns,
+  ComponentColor,
+  Grid,
+  Input,
+  InputType,
+  Form,
+  QuestionMarkTooltip,
+} from '@influxdata/clockface'
+
+// Types
+import {TaskSchedule, TaskOptions} from 'src/types'
+
+interface Props {
+  taskOptions: TaskOptions
+  updateInput: (event: ChangeEvent<HTMLInputElement>) => void
+}
+
+const tooltipContents = {
+  interval:
+    'This is the interval at which the task runs. It also determines when the task first starts to run, depending on the specified time (in duration literal)',
+  offset:
+    'Offset delays the execution of the task but preserves the original time range',
+  cron: 'Cron is an expression that defines the schedule on which the task runs. Cron scheduling is based on system time',
+}
+
+export const TaskIntervalForm: FC<Props> = props => {
+  const {
+    taskOptions: {taskScheduleType, cron, offset, interval},
+    updateInput,
+  } = props
+
+  return (
+    <div className="task-form-field">
+      <Grid.Column widthXS={Columns.Six}>
+        <Form.Element
+          label={taskScheduleType === TaskSchedule.interval ? 'Every' : 'Cron'}
+          required={true}
+          className="task-form-labels"
+        >
+          <div className="schedule-tooltip interval">
+            <QuestionMarkTooltip
+              diameter={15}
+              color={ComponentColor.Primary}
+              tooltipContents={tooltipContents[taskScheduleType]}
+            />
+          </div>
+          <Input
+            name={taskScheduleType}
+            type={InputType.Text}
+            value={taskScheduleType === TaskSchedule.interval ? interval : cron}
+            placeholder={
+              taskScheduleType === TaskSchedule.interval ? '3h30s' : '02***'
+            }
+            onChange={updateInput}
+            testID="task-form-every-input"
+          />
+        </Form.Element>
+      </Grid.Column>
+      <Grid.Column widthXS={Columns.Six}>
+        <Form.Element
+          label="Offset"
+          required={true}
+          className="task-form-labels"
+        >
+          <div className="schedule-tooltip offset">
+            <QuestionMarkTooltip
+              diameter={15}
+              color={ComponentColor.Primary}
+              tooltipContents={tooltipContents['offset']}
+            />
+          </div>
+          <Input
+            name="offset"
+            type={InputType.Text}
+            value={offset}
+            placeholder="20m"
+            onChange={updateInput}
+            testID="task-form-offset-input"
+          />
+        </Form.Element>
+      </Grid.Column>
+    </div>
+  )
+}

src/tasks/components/TaskScheduler/TaskScheduler.scss

@@ -0,0 +1,61 @@
+.cf-form--footer {
+  position: relative;
+  margin-top: 20%;
+  justify-content: end;
+}
+
+.cf-page-contents__fluid {
+  position: absolute;
+}
+
+.create-task-titles {
+  font-size: 20px;
+  font-weight: bold;
+  opacity: 0.9;
+}
+
+.cf-form--footer > * {
+  margin: 0px;
+}
+
+.schedule-task,
+.name-task,
+.select-script {
+  margin-top: 35px;
+}
+
+.schedule-task p {
+  margin-top: 5px;
+}
+
+.task-name-input,
+.script-dropdown,
+.task-form-field {
+  margin-top: 15px;
+}
+
+.task-form-labels {
+  position: relative;
+}
+
+.schedule-tooltip {
+  position: absolute;
+}
+
+.interval {
+  left: 51px;
+}
+
+.offset {
+  left: 55px;
+}
+
+.cf-input-field:focus,
+.cf-input-field:hover {
+  background-color: rgb(0, 0, 0);
+}
+
+.cf-form--label-text {
+  font-weight: 600;
+  font-size: 15px;
+}