NEW-GUI pipelines and projects pages - add to project modal (#3781)

portals-ui/sites/ngs-portal/src/pages/home/components/pipeline-card.tsx

@@ -2,13 +2,15 @@ import { Badge, FlexRow, Button, RichTextView } from '@epam/uui';
 import ContentPersonFillIcon from '@epam/assets/icons/content-person-fill.svg?react';
 import cn from 'classnames';
 import { Link } from 'react-router-dom';
-import type { Pipeline } from '@cloud-pipeline/core';
+import { noop, type Pipeline } from '@cloud-pipeline/core';
 import type { CommonProps } from '@cloud-pipeline/components';
 import HighlightedText from '../../../shared/highlight-text';
 import { NgsUserCard } from '../../../widgets/ngs-user-card';
 import './style.css';
 import { useMemo } from 'react';
 import { NgsTag } from '../../../widgets/ngs-tag';
+import { useUuiContext } from '@epam/uui-core';
+import { PipelineToProjectModal } from '../../../widgets/modals';
 
 type Props = CommonProps & {
   pipeline: Pipeline;
@@ -78,6 +80,7 @@ export const PipelineCard = ({
   style,
   mode = 'standard',
 }: Props) => {
+  const { uuiModals } = useUuiContext();
   const { id, name, owner, data = {}, description } = pipeline;
   const tags = useMemo(
     () =>
@@ -87,6 +90,13 @@ export const PipelineCard = ({
     [data],
   );
 
+  const openAddPipelineModal = () => {
+    uuiModals
+      .show((props) => <PipelineToProjectModal {...props} />)
+      .then(noop)
+      .catch(noop);
+  };
+
   const filteredTag = useMemo(() => tags.filter(filterTag), [tags]);
   return (
     <div
@@ -134,7 +144,7 @@ export const PipelineCard = ({
             fill="none"
             color="secondary"
             size="24"
-            onClick={() => null}
+            onClick={openAddPipelineModal}
           />
         </div>
       )}

portals-ui/sites/ngs-portal/src/pages/home/components/projects-list.tsx

@@ -20,23 +20,19 @@ type Props = {
 
 export const ProjectsList = memo(
   ({ projects, mode = 'standard', filters }: Props) => {
-    const { uuiModals} = useUuiContext();
-    const {pipelines} = usePipelinesState();
+    const { uuiModals } = useUuiContext();
+    const { pipelines } = usePipelinesState();
     const getRandomPipeline = () =>
       pipelines?.[Math.floor(Math.random() * pipelines.length)];
     useEffect(() => {
-      loadPipelines()
-        .then(() => {
-        })
-        .catch(() => {
-        });
+      loadPipelines().then(noop).catch(noop);
     }, []);
     const renderItem = (item: Project, search: string, i: number) => (
       <ProjectCard
         key={String(item.id)}
         project={item}
         highlightedText={search}
-        className={cn({['border-t']: i !== 0})}
+        className={cn({ ['border-t']: i !== 0 })}
         mode={mode}
         lastRun={getRandomPipeline()}
       />
@@ -53,7 +49,7 @@ export const ProjectsList = memo(
         className="max-h-full list-container overflow-auto"
         title={
           <div className="fill-current flex flex-nowrap gap-1">
-            <ActionJobFunctionOutlineIcon/>
+            <ActionJobFunctionOutlineIcon />
             <span>Projects</span>
           </div>
         }

portals-ui/sites/ngs-portal/src/widgets/modals/index.ts

@@ -1 +1,2 @@
 export { CreateProjectModal } from './create-project-modal';
+export { PipelineToProjectModal } from './pipeline-to-project-modal';

portals-ui/sites/ngs-portal/src/widgets/modals/pipeline-to-project-modal/index.tsx

@@ -0,0 +1,107 @@
+import { noop } from '@cloud-pipeline/core';
+import {
+  ModalHeader,
+  ModalFooter,
+  Button,
+  ModalBlocker,
+  ModalWindow,
+  LabeledInput,
+  PickerInput,
+  SuccessNotification,
+  ErrorNotification,
+} from '@epam/uui';
+import { useArrayDataSource, useUuiContext, type IModal } from '@epam/uui-core';
+import { useEffect, useState } from 'react';
+import CircleLoaderIcon from '@epam/assets/icons/loaders/circle-loader.svg?react';
+import { loadProjects } from '../../../state/projects/load-projects';
+import { useProjectsState } from '../../../state/projects/hooks';
+
+export const PipelineToProjectModal = (props: IModal<string>) => {
+  const { projects } = useProjectsState();
+  const [selectedProjectId, setSelectedProjectId] = useState<number>();
+  useEffect(() => {
+    loadProjects()
+      .then(() => {})
+      .catch(() => {});
+  }, []);
+  const { uuiNotifications } = useUuiContext();
+  const [pending, setPending] = useState(false);
+  const [spin, setSpin] = useState(false);
+  const dataSource = useArrayDataSource(
+    {
+      items: projects,
+    },
+    [],
+  );
+  const onOk = () => {
+    if (pending || !selectedProjectId) {
+      return;
+    }
+    setPending(true);
+    setSpin(true);
+    const selected = projects?.find(({ id }) => id === selectedProjectId);
+    try {
+      uuiNotifications
+        .show((props) => (
+          <SuccessNotification {...props}>
+            <b>Successfully added to {selected?.name ?? 'project'}.</b>
+          </SuccessNotification>
+        ))
+        .then(noop)
+        .catch(noop);
+      props.success('');
+    } catch (error) {
+      uuiNotifications
+        .show((props) => (
+          <ErrorNotification {...props}>
+            <b>Failed to add to {selected?.name ?? 'project'}.</b>
+            <span>
+              {error instanceof Error ? error.message : String(error)}
+            </span>
+          </ErrorNotification>
+        ))
+        .then(noop)
+        .catch(noop);
+    } finally {
+      setPending(false);
+      setSpin(false);
+    }
+  };
+  return (
+    <ModalBlocker {...props}>
+      <ModalWindow width={'70vw'} style={{ maxWidth: 740 }}>
+        <ModalHeader title="Create project" onClose={() => props.abort()} />
+        <div className="flex flex-col gap-2 p-4">
+          <LabeledInput
+            htmlFor="datastorage"
+            label={<span>Select datastorage:</span>}
+            labelPosition="left">
+            <PickerInput
+              dataSource={dataSource}
+              value={selectedProjectId}
+              onValueChange={setSelectedProjectId}
+              selectionMode="single"
+              valueType="id"
+            />
+          </LabeledInput>
+        </div>
+        <ModalFooter cx="justify-end">
+          <Button
+            color="secondary"
+            fill="outline"
+            caption="Cancel"
+            onClick={() => props.abort()}
+          />
+          <Button
+            color="primary"
+            caption="Add"
+            isDisabled={pending || spin}
+            onClick={onOk}
+            iconPosition="right"
+            icon={spin ? CircleLoaderIcon : undefined}
+          />
+        </ModalFooter>
+      </ModalWindow>
+    </ModalBlocker>
+  );
+};