Create connector 404 (#92)

+ removed component CreateConnectorButton.tsx + added prop showTooltip to Tooltip component
kafbat · Feb 21, 2024 · d529c6a · d529c6a
1 parent 81cb57c
commit d529c6a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 42 deletions.
diff --git a/frontend/src/components/Connect/List/CreateConnectorButton.tsx b/frontend/src/components/Connect/List/CreateConnectorButton.tsx
diff --git a/frontend/src/components/Connect/List/ListPage.tsx b/frontend/src/components/Connect/List/ListPage.tsx
@@ -1,17 +1,17 @@
 import React, { Suspense } from 'react';
 import useAppParams from 'lib/hooks/useAppParams';
-import { ClusterNameRoute } from 'lib/paths';
+import { ClusterNameRoute, clusterConnectorNewRelativePath } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
 import Search from 'components/common/Search/Search';
 import * as Metrics from 'components/common/Metrics';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import { ConnectorState } from 'generated-sources';
+import { ConnectorState, Action, ResourceType } from 'generated-sources';
 import { useConnectors, useConnects } from 'lib/hooks/api/kafkaConnect';
+import { ActionButton } from 'components/common/ActionComponent';
 
-import CreateConnectorButton from './CreateConnectorButton';
 import List from './List';
 
 const ListPage: React.FC = () => {
@@ -34,16 +34,27 @@ const ListPage: React.FC = () => {
   return (
     <>
       <PageHeading text="Connectors">
-        {!isReadOnly &&
-          (connects && connects.length > 0 ? (
-            <CreateConnectorButton />
-          ) : (
-            <Tooltip
-              value={<CreateConnectorButton disabled />}
-              content="No connects available"
-              placement="left"
-            />
-          ))}
+        {!isReadOnly && (
+          <Tooltip
+            value={
+              <ActionButton
+                buttonType="primary"
+                buttonSize="M"
+                disabled={!connects.length}
+                to={clusterConnectorNewRelativePath}
+                permission={{
+                  resource: ResourceType.CONNECT,
+                  action: Action.CREATE,
+                }}
+              >
+                Create Connector
+              </ActionButton>
+            }
+            showTooltip={!connects.length}
+            content="No Connects available"
+            placement="left"
+          />
+        )}
       </PageHeading>
       <Metrics.Wrapper>
         <Metrics.Section>

diff --git a/frontend/src/components/common/Tooltip/Tooltip.tsx b/frontend/src/components/common/Tooltip/Tooltip.tsx
@@ -12,9 +12,15 @@ interface TooltipProps {
   value: React.ReactNode;
   content: string;
   placement?: Placement;
+  showTooltip?: boolean;
 }
 
-const Tooltip: React.FC<TooltipProps> = ({ value, content, placement }) => {
+const Tooltip: React.FC<TooltipProps> = ({
+  value,
+  content,
+  placement,
+  showTooltip = true,
+}) => {
   const [open, setOpen] = useState(false);
   const { x, y, refs, strategy, context } = useFloating({
     open,
@@ -28,7 +34,7 @@ const Tooltip: React.FC<TooltipProps> = ({ value, content, placement }) => {
       <div ref={refs.setReference} {...getReferenceProps()}>
         <S.Wrapper>{value}</S.Wrapper>
       </div>
-      {open && (
+      {showTooltip && open && (
         <S.MessageTooltip
           ref={refs.setFloating}
           style={{