Add Create and Edit and run features for CustomRuns

packages/utils/src/utils/router.js

@@ -51,6 +51,9 @@ export const paths = {
     },
     byNamespace() {
       return byNamespace({ path: '/customruns' });
+    },
+    create() {
+      return '/customruns/create';
     }
   },
   eventListeners: {

src/api/customRuns.js

@@ -18,6 +18,8 @@ import { deleteRequest, get, patch, post } from './comms';
 import {
   getQueryParams,
   getTektonAPI,
+  removeSystemAnnotations,
+  removeSystemLabels,
   useCollection,
   useResource
 } from './utils';
@@ -39,6 +41,47 @@ function getCustomRunsAPI({ filters, isWebSocket, name, namespace }) {
   );
 }
 
+export function getCustomRunPayload({
+  customRunName = `run-${Date.now()}`,
+  labels,
+  namespace,
+  params,
+  serviceAccount,
+  timeout
+}) {
+  const payload = {
+    apiVersion: 'tekton.dev/v1beta1',
+    kind: 'CustomRun',
+    metadata: {
+      name: customRunName,
+      namespace
+    },
+    spec: {
+      customRef: {
+        apiVersion: '',
+        kind: ''
+      }
+    }
+  };
+  if (labels) {
+    payload.metadata.labels = labels;
+  }
+  if (params) {
+    payload.spec.params = Object.keys(params).map(name => ({
+      name,
+      value: params[name]
+    }));
+  }
+  if (serviceAccount) {
+    payload.spec.serviceAccountName = serviceAccount;
+  }
+  if (timeout) {
+    payload.spec.timeout = timeout;
+  }
+
+  return payload;
+}
+
 export function getCustomRuns({ filters = [], namespace } = {}) {
   const uri = getCustomRunsAPI({ filters, namespace });
   return get(uri);
@@ -107,3 +150,47 @@ export function rerunCustomRun(run) {
   const uri = getTektonAPI('customruns', { namespace, version: 'v1beta1' });
   return post(uri, payload).then(({ body }) => body);
 }
+
+export function createCustomRunRaw({ namespace, payload }) {
+  const uri = getTektonAPI('customruns', { namespace, version: 'v1beta1' });
+  return post(uri, payload).then(({ body }) => body);
+}
+
+export function generateNewCustomRunPayload({ customRun, rerun }) {
+  const { annotations, labels, name, namespace, generateName } =
+    customRun.metadata;
+
+  const payload = deepClone(customRun);
+  payload.apiVersion = payload.apiVersion || 'tekton.dev/v1beta1';
+  payload.kind = payload.kind || 'CustomRun';
+
+  function getGenerateName() {
+    if (rerun) {
+      return getGenerateNamePrefixForRerun(name);
+    }
+
+    return generateName || `${name}-`;
+  }
+
+  payload.metadata = {
+    annotations: annotations || {},
+    generateName: getGenerateName(),
+    labels: labels || {},
+    namespace
+  };
+  if (rerun) {
+    payload.metadata.labels['dashboard.tekton.dev/rerunOf'] = name;
+  }
+
+  removeSystemAnnotations(payload);
+  removeSystemLabels(payload);
+
+  Object.keys(payload.metadata).forEach(
+    i => payload.metadata[i] === undefined && delete payload.metadata[i]
+  );
+
+  delete payload.status;
+
+  delete payload.spec?.status;
+  return { namespace, payload };
+}

src/containers/App/App.jsx

@@ -42,6 +42,7 @@ import {
   ClusterTasks,
   ClusterTriggerBinding,
   ClusterTriggerBindings,
+  CreateCustomRun,
   CreatePipelineRun,
   CreateTaskRun,
   CustomResourceDefinition,
@@ -322,6 +323,11 @@ export function App({ lang }) {
                           <TaskRun />
                         </NamespacedRoute>
                       </CompatRoute>
+                      <CompatRoute path={paths.customRuns.create()} exact>
+                        <ReadWriteRoute>
+                          <CreateCustomRun />
+                        </ReadWriteRoute>
+                      </CompatRoute>
                       <CompatRoute path={paths.customRuns.all()}>
                         <NamespacedRoute>
                           <CustomRuns />

src/containers/CreateCustomRun/CreateCustomRun.jsx

@@ -0,0 +1,152 @@
+/*
+Copyright 2023 The Tekton Authors
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/* istanbul ignore file */
+
+import React, { Suspense, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import yaml from 'js-yaml';
+import { ALL_NAMESPACES, urls, useTitleSync } from '@tektoncd/dashboard-utils';
+import { Loading } from '@tektoncd/dashboard-components';
+import { useIntl } from 'react-intl';
+import {
+  createCustomRunRaw,
+  generateNewCustomRunPayload,
+  getCustomRunPayload,
+  useCustomRun,
+  useSelectedNamespace
+} from '../../api';
+
+const YAMLEditor = React.lazy(() => import('../YAMLEditor'));
+
+const initialState = {
+  creating: false,
+  kind: 'CustomRun',
+  labels: [],
+  params: {},
+  validationError: false,
+  validCustomRunName: true
+};
+
+function CreateCustomRun() {
+  const intl = useIntl();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { selectedNamespace: defaultNamespace } = useSelectedNamespace();
+
+  function getCustomRunName() {
+    const urlSearchParams = new URLSearchParams(location.search);
+    return urlSearchParams.get('customRunName') || '';
+  }
+
+  function getNamespace() {
+    const urlSearchParams = new URLSearchParams(location.search);
+    return (
+      urlSearchParams.get('namespace') ||
+      (defaultNamespace !== ALL_NAMESPACES ? defaultNamespace : '')
+    );
+  }
+
+  const [{ kind, labels, namespace, params }] = useState({
+    ...initialState,
+    customRef: '',
+    kind: 'Custom',
+    namespace: getNamespace()
+  });
+
+  useTitleSync({
+    page: intl.formatMessage({
+      id: 'dashboard.createCustomRun.title',
+      defaultMessage: 'Create CustomRun'
+    })
+  });
+
+  function handleCloseYAMLEditor() {
+    let url = urls.customRuns.all();
+    if (defaultNamespace && defaultNamespace !== ALL_NAMESPACES) {
+      url = urls.customRuns.byNamespace({ namespace: defaultNamespace });
+    }
+    navigate(url);
+  }
+
+  function handleCreate({ resource }) {
+    const resourceNamespace = resource?.metadata?.namespace;
+    return createCustomRunRaw({
+      namespace: resourceNamespace,
+      payload: resource
+    }).then(() => {
+      navigate(urls.customRuns.byNamespace({ namespace: resourceNamespace }));
+    });
+  }
+
+  const externalCustomRunName = getCustomRunName();
+  if (externalCustomRunName) {
+    const { data: customRunObject, isLoading } = useCustomRun(
+      {
+        name: externalCustomRunName,
+        namespace: getNamespace()
+      },
+      { disableWebSocket: true }
+    );
+    let payloadYaml = null;
+    if (customRunObject) {
+      const { payload } = generateNewCustomRunPayload({
+        customRun: customRunObject,
+        rerun: false
+      });
+      payloadYaml = yaml.dump(payload);
+    }
+    const loadingMessage = intl.formatMessage(
+      {
+        id: 'dashboard.loading.resource',
+        defaultMessage: 'Loading {kind}…'
+      },
+      { kind: 'CustomRun' }
+    );
+
+    return (
+      <Suspense fallback={<Loading />}>
+        <YAMLEditor
+          code={payloadYaml || ''}
+          handleClose={handleCloseYAMLEditor}
+          handleCreate={handleCreate}
+          kind="CustomRun"
+          loading={isLoading}
+          loadingMessage={loadingMessage}
+        />
+      </Suspense>
+    );
+  }
+
+  const customRun = getCustomRunPayload({
+    kind,
+    labels: labels.reduce((acc, { key, value }) => {
+      acc[key] = value;
+      return acc;
+    }, {}),
+    namespace,
+    params
+  });
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <YAMLEditor
+        code={yaml.dump(customRun)}
+        handleClose={handleCloseYAMLEditor}
+        handleCreate={handleCreate}
+        kind="CustomRun"
+      />
+    </Suspense>
+  );
+}
+
+export default CreateCustomRun;