feat: add depency selection to jobs form

when adding a job, you can now select dependency-jobs in the general tab when
your cluster version is >= 2.2.0.

closes D2IQ-71316

Author: pierrebeitz

locale/en/messages.json

@@ -758,6 +758,7 @@
   "No health checks available": "",
   "No linked clusters": "",
   "No log files found on this agent.": "",
+  "No more jobs to choose from.": "",
   "No nodes detected": "",
   "No package repositories": "",
   "No quota defined": "",
@@ -1131,6 +1132,7 @@
   "This host declined an offer because it has scarce resources (e.g. GPUs).": "",
   "This host port will be accessible as an environment variable called '$PORT{index}'. <0>More information</0>.": "",
   "This host port will be accessible as an environment variable called {environmentVariableName}. <0>More information</0>.": "",
+  "This job will run whenever its last successful run is older than all of its dependencies' latest successful runs.": "",
   "This package can only be installed using the CLI. See the <0>documentation</0>.": "",
   "This package is known to have issues when started with its default settings.": "",
   "This port will be used to load balance this service address internally": "",

locale/zh/messages.json

@@ -758,6 +758,7 @@
   "No health checks available": "无可用的运行状况检查",
   "No linked clusters": "无链接集群",
   "No log files found on this agent.": "此代理上未找到日志文件。",
+  "No more jobs to choose from.": "",
   "No nodes detected": "未检测到节点",
   "No package repositories": "无包存储库",
   "No quota defined": "未定义配额",
@@ -1131,6 +1132,7 @@
   "This host declined an offer because it has scarce resources (e.g. GPUs).": "",
   "This host port will be accessible as an environment variable called '$PORT{index}'. <0>More information</0>.": "此主机端口可以作为一个名为 '$PORT{index}' 的环境变量进行访问。<0>更多信息</0>.",
   "This host port will be accessible as an environment variable called {environmentVariableName}. <0>More information</0>.": "此主机端口可以作为一个名为 {environmentVariableName} 的环境变量进行访问。<0>更多信息</0>.",
+  "This job will run whenever its last successful run is older than all of its dependencies' latest successful runs.": "",
   "This package can only be installed using the CLI. See the <0>documentation</0>.": "此包仅可使用 CLI 进行安装。查看 <0>文档</0>.",
   "This package is known to have issues when started with its default settings.": "",
   "This port will be used to load balance this service address internally": "此端口将用于在内部负载均衡此服务地址",

plugins/jobs/src/js/components/form/GeneralFormSection.tsx

@@ -1,7 +1,10 @@
 import { Trans } from "@lingui/macro";
 import * as React from "react";
 import {
+  SpacingBox,
+  Typeahead,
   Textarea,
+  TextInputWithBadges,
   TextInput,
   Tooltip,
 } from "@dcos/ui-kit";
@@ -20,17 +23,31 @@ import {
   FormOutput,
   FormError,
   Action,
-  JobFormActionType,
+  JobFormActionType as A,
 } from "./helpers/JobFormData";
+import { fetchJobs } from "#SRC/js/events/MetronomeClient";
+import dcosVersion$ from "#SRC/js/stores/dcos-version";
 
 const getFieldError = (path: string, errors: FormError[]) =>
   errors
     .filter((e) => e.path.join(".") === path)
     .map((e) => e.message)
     .join(" ");
 
+export default class GeneralFormSection extends React.Component<{
+  formData: FormOutput;
+  errors: FormError[];
+  showErrors: boolean;
+  isEdit: boolean;
+  onChange: (a: Action) => void;
+}> {
+  state = { jobs: [], hasJobsWithDeps: false };
 
-export default class GeneralFormSection extends React.Component<GeneralProps> {
+  componentWillMount() {
+    dcosVersion$.subscribe(({ hasJobsWithDeps }) => {
+      this.setState({ hasJobsWithDeps });
+    });
+  }
   public getResourceRow() {
     const { formData, showErrors, errors } = this.props;
     const gpusDisabled = !formData.cmdOnly && formData.container !== "ucr";
@@ -72,7 +89,7 @@ export default class GeneralFormSection extends React.Component<GeneralProps> {
         <FormGroup className="column-3" showError={showErrors && !!diskError}>
           <TextInput
             required={true}
-            inputLabel={<Trans id="disk (MiB)" />}
+            inputLabel={<Trans id="Disk (MiB)" />}
             name="job.run.disk"
             type="number"
             value={formData.disk}
@@ -239,8 +256,84 @@ export default class GeneralFormSection extends React.Component<GeneralProps> {
           </FormGroup>
         </FormRow>
         {this.getResourceRow()}
+
+        {this.state.hasJobsWithDeps && (
+          <DependencyPicker
+            deps={formData.dependencies}
+            onChange={this.props.onChange}
+            error={getFieldError("dependencies", errors)}
+          />
+        )}
+
         {this.getJobType()}
       </div>
     );
   }
 }
+
+const setDeps = (value) => ({ path: "job.dependencies", type: A.Set, value });
+type Option = { label: string; value: string };
+const DependencyPicker: React.FC<{
+  deps: Array<{ id: string }>;
+  onChange: (a: Action) => void;
+  error: string;
+}> = ({ deps = [], onChange, error }) => {
+  const [q, setQ] = React.useState("");
+  const [jobs, setJobs] = React.useState<Option[]>([]);
+
+  React.useEffect(() => {
+    fetchJobs().subscribe(({ response }) =>
+      setJobs(response.map((job) => ({ label: job.id, value: job.id })))
+    );
+  }, []);
+
+  const filteredJobs = jobs.filter(
+    ({ label }) => label.includes(q) && !deps.map((d) => d.id).includes(label)
+  );
+  const addJob = ([id]: string[]) => {
+    setQ("");
+    onChange(setDeps([...deps, { id }]));
+  };
+  const badgeChangeHandler = (leftoverBadges: Array<{ value: string }>) => {
+    onChange(setDeps([...leftoverBadges.map((b) => ({ id: b.value }))]));
+  };
+  const onChangeQ = (e) => {
+    setQ(e.currentTarget.value);
+    e.stopPropagation();
+  };
+
+  const toBadge = ({ id }) => ({ value: id, label: id });
+
+  return (
+    <FormRow>
+      <FormGroup className="column-12" showError={!!error}>
+        <Typeahead
+          items={filteredJobs}
+          overlayRoot={document.querySelector<HTMLElement>(".modal-wrapper")!}
+          resetInputOnSelect={true}
+          menuEmptyState={
+            <SpacingBox>
+              <Trans id="No more jobs to choose from." />
+            </SpacingBox>
+          }
+          textField={
+            <TextInputWithBadges
+              badges={deps.map(toBadge)}
+              inputLabel={<Trans id="Dependencies" />}
+              onBadgeChange={badgeChangeHandler}
+              onChange={onChangeQ}
+              placeholder={deps.length ? "" : "Select a Job"}
+              tooltipContent={
+                <Trans id="This job will run whenever its last successful run is older than all of its dependencies' latest successful runs." />
+              }
+              value={q}
+            />
+          }
+          onSelect={addJob}
+        />
+
+        <FieldError>{error}</FieldError>
+      </FormGroup>
+    </FormRow>
+  );
+};

plugins/jobs/src/js/components/form/helpers/JobFormData.ts

@@ -3,6 +3,7 @@ export interface Job<Labels, Env, Secrets> {
   description?: string;
   labels?: Labels;
   run: JobRun<Env, Secrets>;
+  dependencies?: Array<{ id: string }>;
 }
 
 export interface JobRun<Env, Secrets> {
@@ -108,6 +109,7 @@ export interface FormOutput {
   artifacts?: JobArtifact[];
   volumes: Array<SecretVolume | JobVolume>;
   placementConstraints?: PlacementConstraint[];
+  dependencies?: Array<{ id: string }>;
 }
 
 // Labels used internally to track form state

plugins/jobs/src/js/components/form/helpers/JobParsers.ts

@@ -201,6 +201,7 @@ export const jobSpecToFormOutputParser = (jobSpec: JobSpec): FormOutput => {
   }
 
   return {
+    dependencies: jobSpec.job.dependencies,
     jobId: jobSpec.job.id,
     description: jobSpec.job.description,
     cmdOnly: jobSpec.cmdOnly,

src/js/__tests__/__snapshots__/typecheck-test.ts.snap

@@ -369,6 +369,7 @@ plugins/jobs/src/js/__tests__/jobsToggleSchedule-test.ts: error TS2339: Property
 plugins/jobs/src/js/__tests__/jobsToggleSchedule-test.ts: error TS2339: Property 'mockReturnValue' does not exist on type *.
 plugins/jobs/src/js/components/JobsForm.tsx: error TS2322: type * is not assignable to type *.
 plugins/jobs/src/js/components/JobsForm.tsx: error TS2322: type * is not assignable to type *.
+plugins/jobs/src/js/components/JobsForm.tsx: error TS2322: type * is not assignable to type *.
 plugins/jobs/src/js/components/JobsFormConfig.tsx: error TS2322: type * is not assignable to type *.
 plugins/jobs/src/js/components/JobsOverviewList.tsx: error TS2769: No overload matches this call.
 plugins/jobs/src/js/components/form/ArgsSection.tsx: error TS2322: Type 'void' is not assignable to type *.

src/js/events/__tests__/MetronomeClient-test.ts

@@ -48,6 +48,7 @@ describe("MetronomeClient", () => {
       },
       artifacts: [],
       secrets: {},
+      dependencies: [{ id: "dep" }],
     },
   };
   const jobData: JobResponse = {

src/js/stores/dcos-version.ts

@@ -26,6 +26,7 @@ export default fromFetch(
         variant: json["dcos-variant"] as string,
         // we could just pass through the version itself. but having long identifiers will make it easier to understand why some code is conditional and also to remove that conditional again.
         hasQuotaSupport: Version.compare(json.version, "2.0.0-alpha") >= 0,
+        hasJobsWithDeps: Version.compare(json.version, "2.2.0-alpha") >= 0,
         hasCalicoNetworking: Version.compare(json.version, "2.1.0-alpha") >= 0,
         hasVerticalBursting: Version.compare(json.version, "2.1.0-alpha") >= 0,
       }))

tests/_fixtures/dcos/dcos-version.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.2.0",
   "dcos-image-commit": "43eff42b8eb9c5bf5d27b0d56e42b9ffe9ae2b32",
   "bootstrap-id": "88d5b8c52eba580b9ee8418410a0d85cfe4c19e5"
 }

tests/pages/jobs/JobCreateForm-cy.js

@@ -36,12 +36,12 @@ describe("Job Create Form", () => {
     });
 
     context("General tab", () => {
-      it("displays an error badge for the missing id", () => {
+      it("displays an error when id is missing", () => {
         // Fill-in the input elements
-        cy.root().get("label").contains("Command Only").click();
-        cy.root()
-          .getFormGroupInputFor("Command *")
-          .type("while true; do echo 'test' ; sleep 100 ; done");
+        cy.get("label").contains("Command Only").click();
+        cy.getFormGroupInputFor("Command *").type(
+          "while true; do echo 'test' ; sleep 100 ; done"
+        );
 
         // Try to submit the form
         submit();
@@ -55,13 +55,17 @@ describe("Job Create Form", () => {
         getActiveTabErrorBadge().contains("1");
 
         // Fix error
-        cy.root()
-          .getFormGroupInputFor("Job ID *")
-          .type(`{selectall}${"simple"}`);
+        cy.getFormGroupInputFor("Job ID *").retype("simple");
 
         // Error badge disappears
         getActiveTabErrorBadge().should("not.be.visible");
       });
+
+      it("adds and removes a dependency", () => {
+        cy.get("label:contains(Dependencies)").click();
+        cy.get("[data-cy=PopoverListItem]:contains(bar)").click();
+        cy.get("[data-cy=badge]:contains(bar) [role=button]").click();
+      });
     });
 
     context("Container Runtime tab", () => {