Merge pull request #1743 from manaswinidas/delete-pipeline-server

Delete pipeline server from the Pipelines Section in Projects page

frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineServerActions.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownToggle,
+  KebabToggle,
+  Tooltip,
+} from '@patternfly/react-core';
+import { DeleteServerModal, ViewServerModal } from '~/concepts/pipelines/context';
+
+type PipelineServerActionsProps = {
+  variant?: 'kebab' | 'dropdown';
+  isDisabled: boolean;
+};
+
+const PipelineServerActions: React.FC<PipelineServerActionsProps> = ({ variant, isDisabled }) => {
+  const [open, setOpen] = React.useState(false);
+  const [deleteOpen, setDeleteOpen] = React.useState(false);
+  const [viewOpen, setViewOpen] = React.useState(false);
+
+  const DropdownComponent = (
+    <Dropdown
+      removeFindDomNode
+      onSelect={() => setOpen(false)}
+      toggle={
+        variant === 'kebab' ? (
+          <KebabToggle isDisabled={isDisabled} onToggle={() => setOpen(!open)} />
+        ) : (
+          <DropdownToggle
+            toggleVariant="secondary"
+            isDisabled={isDisabled}
+            onToggle={() => setOpen(!open)}
+          >
+            Pipeline server actions
+          </DropdownToggle>
+        )
+      }
+      isOpen={open}
+      position="right"
+      isPlain={variant === 'kebab'}
+      dropdownItems={[
+        <DropdownItem key="view-server-details" onClick={() => setViewOpen(true)}>
+          View pipeline server configuration
+        </DropdownItem>,
+        <DropdownSeparator key="separator" />,
+        <DropdownItem
+          onClick={() => {
+            setDeleteOpen(true);
+          }}
+          key="delete-server"
+        >
+          Delete pipeline server
+        </DropdownItem>,
+      ]}
+    />
+  );
+
+  if (isDisabled) {
+    return (
+      <Tooltip
+        content="To access pipeline server actions, first create a pipeline server."
+        position="right"
+      >
+        {DropdownComponent}
+      </Tooltip>
+    );
+  }
+
+  return (
+    <>
+      {DropdownComponent}
+      <DeleteServerModal
+        isOpen={deleteOpen}
+        onClose={() => {
+          setDeleteOpen(false);
+        }}
+      />
+      <ViewServerModal isOpen={viewOpen} onClose={() => setViewOpen(false)} />
+    </>
+  );
+};
+
+export default PipelineServerActions;

frontend/src/pages/pipelines/global/pipelines/GlobalPipelines.tsx

@@ -4,7 +4,7 @@ import {
   pipelinesPageDescription,
   pipelinesPageTitle,
 } from '~/pages/pipelines/global/pipelines/const';
-import PipelinesPageHeaderActions from '~/pages/pipelines/global/pipelines/PipelinesPageHeaderActions';
+import PipelineServerActions from '~/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineServerActions';
 import PipelineCoreApplicationPage from '~/pages/pipelines/global/PipelineCoreApplicationPage';
 import PipelinesView from '~/pages/pipelines/global/pipelines/PipelinesView';
 import EnsureAPIAvailability from '~/concepts/pipelines/EnsureAPIAvailability';
@@ -16,7 +16,7 @@ const GlobalPipelines: React.FC = () => {
     <PipelineCoreApplicationPage
       title={pipelinesPageTitle}
       description={pipelinesPageDescription}
-      headerAction={pipelinesAPi.pipelinesServer.installed && <PipelinesPageHeaderActions />}
+      headerAction={<PipelineServerActions isDisabled={!pipelinesAPi.pipelinesServer.installed} />}
       getRedirectPath={(namespace) => `/pipelines/${namespace}`}
     >
       <EnsureAPIAvailability>

frontend/src/pages/projects/screens/detail/pipelines/PipelinesSection.tsx

@@ -8,6 +8,7 @@ import NoPipelineServer from '~/concepts/pipelines/NoPipelineServer';
 import ImportPipelineButton from '~/concepts/pipelines/content/import/ImportPipelineButton';
 import PipelinesList from '~/pages/projects/screens/detail/pipelines/PipelinesList';
 import EnsureAPIAvailability from '~/concepts/pipelines/EnsureAPIAvailability';
+import PipelineServerActions from '~/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineServerActions';
 
 const PipelinesSection: React.FC = () => {
   const {
@@ -27,6 +28,11 @@ const PipelinesSection: React.FC = () => {
             key={`action-${ProjectSectionID.PIPELINES}`}
             variant="secondary"
           />,
+          <PipelineServerActions
+            key={`action-${ProjectSectionID.PIPELINES}-1`}
+            isDisabled={!initializing && !installed}
+            variant="kebab"
+          />,
         ]}
         isLoading={initializing}
         isEmpty={!installed}