fix: updated task creation logic in pipeline builder to support installation of tasks with name name

Author: anwesha-palit-redhat

src/components/catalog/apis/artifactHub.ts

@@ -102,6 +102,7 @@ export const createArtifactHubTask = (
   namespace: string,
   version: string,
   isDevConsoleProxyAvailable?: boolean,
+  customName?: string,
 ) => {
   const fetchTask = async (): Promise<K8sResourceKind> => {
     if (isDevConsoleProxyAvailable) {
@@ -122,6 +123,9 @@ export const createArtifactHubTask = (
   return fetchTask()
     .then((task: K8sResourceKind) => {
       task.metadata.namespace = namespace;
+      if (customName) {
+        task.metadata.name = customName;
+      }
       task.metadata.annotations = {
         ...task.metadata.annotations,
         [TektonTaskAnnotation.installedFrom]: ARTIFACTHUB,
@@ -185,7 +189,7 @@ export const updateArtifactHubTask = async (
 
 export const fetchArtifactHubTasks = async (
   query: string,
-  limit: number = 20,
+  limit = 20,
 ): Promise<ArtifactHubTask[]> => {
   try {
     const response = await fetch(

src/components/pipeline-builder/PipelineBuilderForm.tsx

@@ -8,7 +8,7 @@ import {
 import { FormikProps } from 'formik';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { PipelineModel } from '../../models';
+import { PipelineModel, TaskModel } from '../../models';
 import {
   PipelineKind,
   PipelineTask,
@@ -42,7 +42,11 @@ import FormFooter from '../pipelines-details/multi-column-field/FormFooter';
 import { FlexForm, FormBody } from './form-utils';
 import SyncedEditorField from './SyncedEditorField';
 import PipelineQuickSearch from '../task-quicksearch/PipelineQuickSearch';
-import { useModal } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  k8sDelete,
+  k8sGet,
+  useModal,
+} from '@openshift-console/dynamic-plugin-sdk';
 
 type PipelineBuilderFormProps = FormikProps<PipelineBuilderFormikValues> & {
   existingPipeline: PipelineKind;
@@ -105,7 +109,6 @@ const PipelineBuilderForm: React.FC<PipelineBuilderFormProps> = (props) => {
   const updateTasks = (changes: CleanupResults): void => {
     const { tasks, listTasks, finallyTasks, finallyListTasks, loadingTasks } =
       changes;
-
     setFieldValue('formData', {
       ...formData,
       tasks,
@@ -206,8 +209,28 @@ const PipelineBuilderForm: React.FC<PipelineBuilderFormProps> = (props) => {
               onRemoveTask={(taskName: string) => {
                 launchModal(RemoveTaskModal, {
                   taskName,
-                  onRemove: () => {
+                  onRemove: async () => {
                     setSelectedTask(null);
+                    let taskExists = false;
+                    try {
+                      await k8sGet({
+                        model: TaskModel,
+                        name: taskName,
+                        ns: namespace,
+                      });
+                      taskExists = true;
+                    } catch (error) {
+                      console.warn(
+                        `Error fetching Task as task does not exist ${taskName}, so safely deleting from PipelineBuilder`,
+                        error,
+                      );
+                    }
+                    if (taskExists) {
+                      await k8sDelete({
+                        model: TaskModel,
+                        resource: { metadata: { name: taskName, namespace } },
+                      });
+                    }
                     updateTasks(
                       applyChange(
                         taskGroup,

src/components/quick-search/utils/quick-search-utils.tsx

@@ -20,7 +20,7 @@ export const handleCta = async (
     closeModal();
     await callback({
       ...callbackProps,
-      selectedVersion: item.data?.version,
+      selectedVersion: item.data?.version ?? item.data?.task?.version,
       selectedItem: item,
     });
     removeQueryArgument('catalogSearch');

src/components/task-quicksearch/PipelineQuickSearch.tsx

@@ -20,6 +20,7 @@ import {
   TaskProviders,
   updateTask,
 } from './pipeline-quicksearch-utils';
+import { safeName } from '../pipeline-builder/utils';
 import PipelineQuickSearchDetails from './PipelineQuickSearchDetails';
 import { CatalogServiceProvider } from '../catalog/service';
 import { CatalogService } from '../catalog/types';
@@ -64,6 +65,24 @@ const Contents: React.FC<
   useLoadingTaskCleanup(onUpdateTasks, taskGroup);
   useCleanupOnFailure(failedTasks, onUpdateTasks, taskGroup);
 
+  // Get all existing task names from taskGroup and installed tasks
+  const getExistingTaskNames = (): string[] => {
+    const taskNames = [
+      ...taskGroup.tasks.map((t) => t.name),
+      ...taskGroup.finallyTasks.map((t) => t.name),
+      ...taskGroup.listTasks.map((t) => t.name),
+      ...taskGroup.loadingTasks.map((t) => t.name),
+      ...taskGroup.finallyListTasks.map((t) => t.name),
+    ];
+    // Add installed task names from catalog
+    catalogService.items.forEach((catalogItem) => {
+      if (catalogItem.data?.metadata?.name) {
+        taskNames.push(catalogItem.data.metadata.name);
+      }
+    });
+    return taskNames;
+  };
+
   const catalogServiceItems = catalogService.items.reduce((acc, item) => {
     const installedTask = findInstalledTask(catalogService.items, item);
 
@@ -102,12 +121,30 @@ const Contents: React.FC<
                 ).catch(() => setFailedTasks([...failedTasks, item.data.name]));
               }
             } else {
-              resolve(
-                savedCallback.current({ metadata: { name: item.data.name } }),
-              );
-              createTask(selectedVersionUrl, namespace).catch(() =>
-                setFailedTasks([...failedTasks, item.data.name]),
-              );
+              // Checking if task with same name already exists, if yes then create with a different name to avoid conflict
+              const existingTaskNames = getExistingTaskNames();
+              if (existingTaskNames.includes(item.data.name)) {
+                const taskNameToUse = safeName(
+                  existingTaskNames,
+                  item.data.name,
+                );
+                createTask(selectedVersionUrl, namespace, taskNameToUse)
+                  .then(() =>
+                    resolve(
+                      savedCallback.current({
+                        metadata: { name: taskNameToUse },
+                      }),
+                    ),
+                  )
+                  .catch(() => setFailedTasks([...failedTasks, taskNameToUse]));
+              } else {
+                resolve(
+                  savedCallback.current({ metadata: { name: item.data.name } }),
+                );
+                createTask(selectedVersionUrl, namespace).catch(() =>
+                  setFailedTasks([...failedTasks, item.data.name]),
+                );
+              }
             }
           } else {
             resolve(savedCallback.current(item.data));
@@ -143,19 +180,46 @@ const Contents: React.FC<
               );
             }
           } else {
-            resolve(
-              savedCallback.current({
-                metadata: { name: item.data.task.name },
-              }),
-            );
-            createArtifactHubTask(
-              selectedVersionUrl,
-              namespace,
-              selectedVersion,
-              isDevConsoleProxyAvailable,
-            ).catch(() =>
-              setFailedTasks([...failedTasks, item.data.task.name]),
-            );
+            // Checking if task with same name already exists, if yes then create with a different name to avoid conflict
+            const existingTaskNames = getExistingTaskNames();
+            if (existingTaskNames.includes(item.data.task.name)) {
+              const taskNameToUse = safeName(
+                existingTaskNames,
+                item.data.task.name,
+              );
+              createArtifactHubTask(
+                selectedVersionUrl,
+                namespace,
+                selectedVersion,
+                isDevConsoleProxyAvailable,
+                taskNameToUse,
+              )
+                .then(() =>
+                  resolve(
+                    savedCallback.current({
+                      metadata: { name: taskNameToUse },
+                    }),
+                  ),
+                )
+                .catch(() => setFailedTasks([...failedTasks, taskNameToUse]));
+            } else {
+              createArtifactHubTask(
+                selectedVersionUrl,
+                namespace,
+                selectedVersion,
+                isDevConsoleProxyAvailable,
+              )
+                .then(() =>
+                  resolve(
+                    savedCallback.current({
+                      metadata: { name: item.data.task.name },
+                    }),
+                  ),
+                )
+                .catch(() =>
+                  setFailedTasks([...failedTasks, item.data.task.name]),
+                );
+            }
           }
         }
       });

src/components/task-quicksearch/pipeline-quicksearch-utils.ts

@@ -174,12 +174,19 @@ export const updateTask = async (
     });
 };
 
-export const createTask = (url: string, namespace: string) => {
+export const createTask = (
+  url: string,
+  namespace: string,
+  customName?: string,
+) => {
   return consoleFetch(url)
     .then(async (res) => {
       const yaml = await res.text();
       const task = load(yaml) as TaskKind;
       task.metadata.namespace = namespace;
+      if (customName) {
+        task.metadata.name = customName;
+      }
       task.metadata.annotations = {
         ...task.metadata.annotations,
         [TektonTaskAnnotation.installedFrom]: TEKTONHUB,