show the edit button on user namespaces

Author: ciyer

client/src/features/dataConnectorsV2/components/DataConnectorsBox.tsx

@@ -32,33 +32,84 @@ import {
   Row,
 } from "reactstrap";
 
-import MembershipGuard from "../../ProjectPageV2/utils/MembershipGuard";
+import ClampedParagraph from "../../../components/clamped/ClampedParagraph";
 import { Loader } from "../../../components/Loader";
 import Pagination from "../../../components/Pagination";
 import { TimeCaption } from "../../../components/TimeCaption";
 import { RtkOrNotebooksError } from "../../../components/errors/RtkErrorAlert";
+import MembershipGuard from "../../ProjectPageV2/utils/MembershipGuard";
+import type { NamespaceKind } from "../../projectsV2/api/namespace.api";
 import type { DataConnector } from "../../projectsV2/api/data-connectors.api";
 import {
   useGetDataConnectorsQuery,
   useGetGroupsByGroupSlugMembersQuery,
   type GetDataConnectorsApiResponse,
 } from "../../projectsV2/api/projectV2.enhanced-api";
-import ClampedParagraph from "../../../components/clamped/ClampedParagraph";
+import { useGetUserQuery } from "../../user/dataServicesUser.api";
 
 import DataConnectorModal from "./DataConnectorModal";
 import DataConnectorView from "./DataConnectorView";
 
 const DEFAULT_PER_PAGE = 12;
 const DEFAULT_PAGE_PARAM = "page";
 
+function AddButtonForGroupNamespace({
+  namespace,
+  toggleOpen,
+}: Pick<DataConnectorBoxHeaderProps, "namespace" | "toggleOpen">) {
+  const { data: members } = useGetGroupsByGroupSlugMembersQuery({
+    groupSlug: namespace,
+  });
+  return (
+    <MembershipGuard
+      disabled={null}
+      enabled={
+        <Button
+          data-cy="add-data-connector"
+          color="outline-primary"
+          onClick={toggleOpen}
+          size="sm"
+        >
+          <PlusLg className="icon-text" />
+        </Button>
+      }
+      members={members}
+      minimumRole="editor"
+    />
+  );
+}
+
+function AddButtonForUserNamespace({
+  namespace,
+  toggleOpen,
+}: Pick<DataConnectorBoxHeaderProps, "namespace" | "toggleOpen">) {
+  const { data: currentUser } = useGetUserQuery();
+
+  if (currentUser?.username === namespace) {
+    return (
+      <Button
+        data-cy="add-data-connector"
+        color="outline-primary"
+        onClick={toggleOpen}
+        size="sm"
+      >
+        <PlusLg className="icon-text" />
+      </Button>
+    );
+  }
+  return null;
+}
+
 interface DataConnectorListDisplayProps {
-  namespace?: string;
+  namespace: string;
+  namespaceKind: NamespaceKind;
   pageParam?: string;
   perPage?: number;
 }
 
 export default function DataConnectorsBox({
   namespace: ns,
+  namespaceKind,
   pageParam: pageParam_,
   perPage: perPage_,
 }: DataConnectorListDisplayProps) {
@@ -133,6 +184,7 @@ export default function DataConnectorsBox({
     <DataConnectorBoxContent
       data={data}
       namespace={ns ?? ""}
+      namespaceKind={namespaceKind}
       onPageChange={onPageChange}
       perPage={perPage}
     />
@@ -142,12 +194,14 @@ export default function DataConnectorsBox({
 interface DataConnectorBoxContentProps {
   data: GetDataConnectorsApiResponse;
   namespace: string;
+  namespaceKind: NamespaceKind;
   onPageChange: (pageNumber: number) => void;
   perPage: number;
 }
 function DataConnectorBoxContent({
   data,
   namespace,
+  namespaceKind,
   onPageChange,
   perPage,
 }: DataConnectorBoxContentProps) {
@@ -161,6 +215,7 @@ function DataConnectorBoxContent({
         <DataConnectorBoxHeader
           toggleOpen={toggleOpen}
           namespace={namespace}
+          namespaceKind={namespaceKind}
           totalConnectors={data.total}
         />
         <CardBody>
@@ -200,17 +255,16 @@ function DataConnectorBoxContent({
 interface DataConnectorBoxHeaderProps {
   toggleOpen: () => void;
   namespace: string;
+  namespaceKind: NamespaceKind;
   totalConnectors: number;
 }
 
 function DataConnectorBoxHeader({
   toggleOpen,
   namespace,
+  namespaceKind,
   totalConnectors,
 }: DataConnectorBoxHeaderProps) {
-  const { data: members } = useGetGroupsByGroupSlugMembersQuery({
-    groupSlug: namespace,
-  });
   return (
     <CardHeader>
       <div
@@ -228,21 +282,17 @@ function DataConnectorBoxHeader({
           <Badge>{totalConnectors}</Badge>
         </div>
         <div className="my-auto">
-          <MembershipGuard
-            disabled={null}
-            enabled={
-              <Button
-                data-cy="add-data-connector"
-                color="outline-primary"
-                onClick={toggleOpen}
-                size="sm"
-              >
-                <PlusLg className="icon-text" />
-              </Button>
-            }
-            members={members}
-            minimumRole="editor"
-          />
+          {namespaceKind === "group" ? (
+            <AddButtonForGroupNamespace
+              namespace={namespace}
+              toggleOpen={toggleOpen}
+            />
+          ) : (
+            <AddButtonForUserNamespace
+              namespace={namespace}
+              toggleOpen={toggleOpen}
+            />
+          )}
         </div>
       </div>
     </CardHeader>

client/src/features/groupsV2/show/GroupV2Show.tsx

@@ -142,6 +142,7 @@ export default function GroupV2Show() {
           <Col className="order-3" xs={12} xl={8}>
             <DataConnectorsBox
               namespace={slug}
+              namespaceKind="group"
               pageParam="data_connectors_page"
             />
           </Col>

client/src/features/usersV2/show/UserShow.tsx

@@ -138,6 +138,7 @@ export default function UserShow() {
           <Col className="order-3" xs={12} xl={8}>
             <DataConnectorsBox
               namespace={username}
+              namespaceKind="user"
               pageParam="data_connectors_page"
             />
           </Col>