feat: proper listing of project data connectors

client/src/features/ProjectPageV2/ProjectPageContent/DataConnectors/ProjectDataConnectorsBox.tsx

@@ -17,7 +17,7 @@
  */
 
 import cx from "classnames";
-import { useCallback, useState } from "react";
+import { useCallback, useState, useRef } from "react";
 import { Database, PlusLg } from "react-bootstrap-icons";
 import {
   Badge,
@@ -26,12 +26,16 @@ import {
   CardBody,
   CardHeader,
   ListGroup,
+  UncontrolledTooltip,
 } from "reactstrap";
 
 import { Loader } from "../../../../components/Loader";
 import { RtkOrNotebooksError } from "../../../../components/errors/RtkErrorAlert";
 
-import { useGetDataConnectorsByDataConnectorIdQuery } from "../../../dataConnectorsV2/api/data-connectors.api";
+import {
+  useGetDataConnectorsByDataConnectorIdQuery,
+  useGetProjectsByProjectIdInaccessibleDataConnectorLinksQuery,
+} from "../../../dataConnectorsV2/api/data-connectors.api";
 import DataConnectorBoxListDisplay from "../../../dataConnectorsV2/components/DataConnectorsBoxListDisplay";
 import PermissionsGuard from "../../../permissionsV2/PermissionsGuard";
 import type {
@@ -43,6 +47,7 @@ import { useGetProjectsByProjectIdDataConnectorLinksQuery } from "../../../proje
 import useProjectPermissions from "../../utils/useProjectPermissions.hook";
 
 import ProjectConnectDataConnectorsModal from "./ProjectConnectDataConnectorsModal";
+import { ErrorAlert } from "../../../../components/Alert";
 
 interface DataConnectorListDisplayProps {
   project: Project;
@@ -56,22 +61,49 @@ export default function ProjectDataConnectorsBox({
       projectId: project.id,
     });
 
-  if (isLoading) return <DataConnectorLoadingBoxContent />;
+  const {
+    data: inaccessibleDataConnectorsData,
+    isLoading: inaccessibleDataConnectorsIsLoading,
+  } = useGetProjectsByProjectIdInaccessibleDataConnectorLinksQuery({
+    projectId: project.id,
+  });
+
+  if (isLoading || inaccessibleDataConnectorsIsLoading)
+    return <DataConnectorLoadingBoxContent />;
 
-  if (error || data == null) {
+  if (error) {
     return <RtkOrNotebooksError error={error} dismissible={false} />;
   }
 
-  return <ProjectDataConnectorBoxContent data={data} project={project} />;
+  if (data == null) {
+    return (
+      <ErrorAlert>
+        Data connectors could not be loaded from the API, please contact a Renku
+        administrator.
+      </ErrorAlert>
+    );
+  }
+
+  return (
+    <ProjectDataConnectorBoxContent
+      data={data}
+      project={project}
+      inaccessibleDataConnectorsCount={
+        inaccessibleDataConnectorsData?.count || 0
+      }
+    />
+  );
 }
 
 interface ProjectDataConnectorBoxContentProps
   extends DataConnectorListDisplayProps {
   data: GetProjectsByProjectIdDataConnectorLinksApiResponse;
+  inaccessibleDataConnectorsCount: number;
 }
 function ProjectDataConnectorBoxContent({
   data,
   project,
+  inaccessibleDataConnectorsCount,
 }: ProjectDataConnectorBoxContentProps) {
   const [isModalOpen, setModalOpen] = useState(false);
   const toggleOpen = useCallback(() => {
@@ -83,7 +115,8 @@ function ProjectDataConnectorBoxContent({
         <ProjectDataConnectorBoxHeader
           projectId={project.id}
           toggleOpen={toggleOpen}
-          totalConnectors={data.length}
+          accessibleDataConnectorsCount={data.length}
+          inaccessibleDataConnectorsCount={inaccessibleDataConnectorsCount}
         />
         <CardBody>
           {data.length === 0 && (
@@ -95,7 +128,11 @@ function ProjectDataConnectorBoxContent({
           {data != null && data.length > 0 && (
             <ListGroup flush>
               {data.map((dc) => (
-                <DataConnectorLinkDisplay key={dc.id} dataConnectorLink={dc} />
+                <DataConnectorLinkDisplay
+                  key={dc.id}
+                  dataConnectorLink={dc}
+                  projectPath={`${project.namespace}/${project.slug}`}
+                />
               ))}
             </ListGroup>
           )}
@@ -116,13 +153,15 @@ function ProjectDataConnectorBoxContent({
 interface ProjectDataConnectorBoxHeaderProps {
   projectId: Project["id"];
   toggleOpen: () => void;
-  totalConnectors: number;
+  accessibleDataConnectorsCount: number;
+  inaccessibleDataConnectorsCount: number;
 }
 
 function ProjectDataConnectorBoxHeader({
   projectId,
   toggleOpen,
-  totalConnectors,
+  accessibleDataConnectorsCount,
+  inaccessibleDataConnectorsCount,
 }: ProjectDataConnectorBoxHeaderProps) {
   const permissions = useProjectPermissions({ projectId });
 
@@ -135,12 +174,17 @@ function ProjectDataConnectorBoxHeader({
           "justify-content-between"
         )}
       >
-        <div className={cx("align-items-center", "d-flex")}>
-          <h4 className={cx("mb-0", "me-2")}>
+        <div className={cx("align-items-center", "d-flex", "gap-2")}>
+          <h4 className="mb-0">
             <Database className={cx("me-1", "bi")} />
             Data
           </h4>
-          <Badge>{totalConnectors}</Badge>
+          <Badge>{accessibleDataConnectorsCount}</Badge>
+          {inaccessibleDataConnectorsCount > 0 && (
+            <MissingDataConnectorsBadge
+              inaccessibleConnectors={inaccessibleDataConnectorsCount}
+            />
+          )}
         </div>
         <div className="my-auto">
           <PermissionsGuard
@@ -193,9 +237,11 @@ function DataConnectorLoadingBoxContent() {
 
 interface DataConnectorLinkDisplayProps {
   dataConnectorLink: DataConnectorToProjectLink;
+  projectPath: string;
 }
 function DataConnectorLinkDisplay({
   dataConnectorLink,
+  projectPath,
 }: DataConnectorLinkDisplayProps) {
   const { data_connector_id } = dataConnectorLink;
   const { data: dataConnector, isLoading } =
@@ -208,6 +254,41 @@ function DataConnectorLinkDisplay({
     <DataConnectorBoxListDisplay
       dataConnector={dataConnector}
       dataConnectorLink={dataConnectorLink}
+      dataConnectorPotentiallyInaccessible={
+        projectPath != dataConnector.namespace &&
+        dataConnector.visibility == "private"
+      }
     />
   );
 }
+
+interface MissingDataConnectorsBadgeProps {
+  className?: string;
+  inaccessibleConnectors: number;
+}
+
+function MissingDataConnectorsBadge({
+  className,
+  inaccessibleConnectors,
+}: MissingDataConnectorsBadgeProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  if (!inaccessibleConnectors) return null;
+  const singular = inaccessibleConnectors === 1;
+  return (
+    <>
+      <Badge
+        className={cx("rounded-pill", className)}
+        color="primary"
+        innerRef={ref}
+      >
+        +{inaccessibleConnectors} hidden
+      </Badge>
+      <UncontrolledTooltip target={ref}>
+        There {singular ? "is" : "are"} {inaccessibleConnectors}
+        data connector{singular ? "" : "s"} linked to this project but not
+        visible to you.
+      </UncontrolledTooltip>
+    </>
+  );
+}

client/src/features/dashboardV2/DashboardV2.tsx

@@ -297,11 +297,9 @@ function ProjectList({ data, error, isLoading }: ProjectListProps) {
 
 function GroupsDashboard() {
   const { data, error, isLoading } = useGetGroupsQuery({
-    params: {
-      page: 1,
-      per_page: 5,
-      direct_member: true,
-    },
+    page: 1,
+    perPage: 5,
+    directMember: true,
   });
   const hasGroups = data && data?.groups?.length > 0;
   return (

client/src/features/dataConnectorsV2/api/data-connectors.api.ts

@@ -118,6 +118,22 @@ const injectedRtkApi = api.injectEndpoints({
         method: "DELETE",
       }),
     }),
+    getProjectsByProjectIdDataConnectorLinks: build.query<
+      GetProjectsByProjectIdDataConnectorLinksApiResponse,
+      GetProjectsByProjectIdDataConnectorLinksApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/projects/${queryArg.projectId}/data_connector_links`,
+      }),
+    }),
+    getProjectsByProjectIdInaccessibleDataConnectorLinks: build.query<
+      GetProjectsByProjectIdInaccessibleDataConnectorLinksApiResponse,
+      GetProjectsByProjectIdInaccessibleDataConnectorLinksApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/projects/${queryArg.projectId}/inaccessible_data_connector_links`,
+      }),
+    }),
   }),
   overrideExisting: false,
 });
@@ -206,6 +222,18 @@ export type DeleteDataConnectorsByDataConnectorIdSecretsApiArg = {
   /** the ID of the data connector */
   dataConnectorId: Ulid;
 };
+export type GetProjectsByProjectIdDataConnectorLinksApiResponse =
+  /** status 200 List of data connector to project links */ DataConnectorToProjectLinksList;
+export type GetProjectsByProjectIdDataConnectorLinksApiArg = {
+  /** the ID of the project */
+  projectId: Ulid;
+};
+export type GetProjectsByProjectIdInaccessibleDataConnectorLinksApiResponse =
+  /** status 200 List of data connector to project links */ InaccessibleDataConnectorLinks;
+export type GetProjectsByProjectIdInaccessibleDataConnectorLinksApiArg = {
+  /** the ID of the project */
+  projectId: Ulid;
+};
 export type Ulid = string;
 export type DataConnectorName = string;
 export type Slug = string;
@@ -248,7 +276,17 @@ export type RCloneOption = {
   /** if true, only values from 'examples' can be used */
   exclusive?: boolean;
   /** data type of option value. RClone has more options but they map to the ones listed here. */
-  datatype?: "int" | "bool" | "string" | "Time";
+  type?:
+    | "int"
+    | "bool"
+    | "string"
+    | "Time"
+    | "Duration"
+    | "MultiEncoder"
+    | "SizeSuffix"
+    | "SpaceSepList"
+    | "CommaSepList"
+    | "Tristate";
 };
 export type CloudStorageCore = {
   storage_type: StorageType;
@@ -418,6 +456,10 @@ export type DataConnectorSecretPatch = {
   value: SecretValueNullable;
 };
 export type DataConnectorSecretPatchList = DataConnectorSecretPatch[];
+export type InaccessibleDataConnectorLinks = {
+  /** The number of data links the user does not have access to */
+  count?: number;
+};
 export const {
   useGetDataConnectorsQuery,
   usePostDataConnectorsMutation,
@@ -432,4 +474,6 @@ export const {
   useGetDataConnectorsByDataConnectorIdSecretsQuery,
   usePatchDataConnectorsByDataConnectorIdSecretsMutation,
   useDeleteDataConnectorsByDataConnectorIdSecretsMutation,
+  useGetProjectsByProjectIdDataConnectorLinksQuery,
+  useGetProjectsByProjectIdInaccessibleDataConnectorLinksQuery,
 } = injectedRtkApi;