Fix issues with dependencies

dashboard/src/index.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "react-query";
 
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { ConfigProvider } from "antd";
-
-const queryClient = new QueryClient({});
+import { GraphQLClientProvider } from "@capactio/react-components";
 
 ConfigProvider.config({
   theme: {
@@ -19,9 +17,9 @@ ConfigProvider.config({
 ReactDOM.render(
   <React.StrictMode>
     <BrowserRouter>
-      <QueryClientProvider client={queryClient}>
+      <GraphQLClientProvider>
         <App />
-      </QueryClientProvider>
+      </GraphQLClientProvider>
     </BrowserRouter>
   </React.StrictMode>,
   document.getElementById("root")

dashboard/src/routes/action.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { Breadcrumb } from "antd";
 import { ActionDetailsContainer } from "@capactio/react-components";
 import Page from "../layout/Page";
 import { loadRuntimeConfig } from "../config/runtime";
 
 function Action() {
+  const navigate = useNavigate();
   const { name } = useParams();
 
   const actionName = name ?? "";
@@ -24,9 +26,18 @@ function Action() {
 
   const { queryRefetchIntervalMS, argoWorkflowsUIBaseURL } = loadRuntimeConfig();
 
+  const onDeleteAction = (_: string) => {
+    navigate("/actions");
+  }
+
   return (
     <Page breadcrumb={breadcrumb} title="Action details">
-      <ActionDetailsContainer name={actionName} refetchInterval={queryRefetchIntervalMS} argoWorkflowsUIBaseURL={argoWorkflowsUIBaseURL} />
+      <ActionDetailsContainer
+        name={actionName}
+        refetchInterval={queryRefetchIntervalMS}
+        argoWorkflowsUIBaseURL={argoWorkflowsUIBaseURL}
+        onDeleteAction={onDeleteAction}
+      />
     </Page>
   );
 }

dashboard/src/routes/actions.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 import { Breadcrumb } from "antd";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 import { ActionListContainer } from "@capactio/react-components";
 import Page from "../layout/Page";
 import { loadRuntimeConfig } from "../config/runtime";
 
 function Actions() {
+  const navigate = useNavigate();
+
   const breadcrumb = (
     <Breadcrumb>
       <Breadcrumb.Item>
@@ -17,9 +19,13 @@ function Actions() {
 
   const { queryRefetchIntervalMS } = loadRuntimeConfig();
 
+  const onActionClick = (name: string) => {
+    navigate(`/actions/${name}`);
+  }
+
   return (
     <Page breadcrumb={breadcrumb} title="Created Actions">
-      <ActionListContainer refetchInterval={queryRefetchIntervalMS} />
+      <ActionListContainer refetchInterval={queryRefetchIntervalMS} onActionClick={onActionClick} />
     </Page>
   );
 }

dashboard/src/routes/hub-interface-groups.tsx

@@ -1,10 +1,16 @@
 import { Breadcrumb } from "antd";
 import React from "react";
 import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { InterfaceGroupCardsContainer } from "@capactio/react-components";
 import Page from "../layout/Page";
 
 function InterfaceGroupCatalog() {
+  const navigate = useNavigate();
+  const onInterfaceGroupClick = (interfaceGroupPath: string) => {
+    navigate(`/hub/interface-groups/${interfaceGroupPath}`)
+  }
+
   const breadcrumb = (
     <Breadcrumb>
       <Breadcrumb.Item>Hub</Breadcrumb.Item>
@@ -15,7 +21,7 @@ function InterfaceGroupCatalog() {
   );
   return (
     <Page breadcrumb={breadcrumb} title="Public Hub">
-      <InterfaceGroupCardsContainer />
+      <InterfaceGroupCardsContainer onInterfaceGroupClick={onInterfaceGroupClick} />
     </Page>
   );
 }

dashboard/src/routes/hub-interfaces.tsx

@@ -25,6 +25,11 @@ function InterfacesCatalog() {
       <Breadcrumb.Item>{name}</Breadcrumb.Item>
     </Breadcrumb>
   );
+
+  const onInterfaceClick =  (path: string, revision: string) => {
+    navigate(`/actions/new/${path}/${revision}`)
+  }
+
   return (
     <Page
       breadcrumb={breadcrumb}
@@ -43,7 +48,7 @@ function InterfacesCatalog() {
       title="Public Hub"
       onBack={() => navigate("/hub/interface-groups")}
     >
-      <InterfacesContainer path={name} view={view} />
+      <InterfacesContainer path={name} view={view} onInterfaceClick={onInterfaceClick} />
     </Page>
   );
 }

dashboard/src/routes/new-action.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { Breadcrumb } from "antd";
 import { WizardContainer } from "@capactio/react-components";
 import Page from "../layout/Page";
 
 function NewAction() {
+  const navigate = useNavigate();
   const { path, revision } = useParams();
 
   if (!path) {
@@ -23,13 +24,17 @@ function NewAction() {
     </Breadcrumb>
   );
 
+  const onActionCreate = (name: string) => {
+    navigate(`/actions/${name}`);
+  }
+
   return (
     <Page
       breadcrumb={breadcrumb}
       title="Create a new Action"
       onBack={() => window.history.back()}
     >
-      <WizardContainer interfacePath={path} interfaceRevision={revision} />
+      <WizardContainer interfacePath={path} interfaceRevision={revision} onActionCreate={onActionCreate} />
     </Page>
   );
 }

react-components/package.json

@@ -9,7 +9,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "start": "npm run build -- --watch",
-    "build": "rollup -c",
+    "build": "NODE_OPTIONS=--max_old_space_size=4096 rollup -c",
     "test": "jest",
     "test:watch": "jest --watch",
     "storybook": "start-storybook -p 6006",

react-components/src/actions/ActionDetails.container.tsx

@@ -1,6 +1,6 @@
 import { message } from "antd";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+
 import {
   ActionStatusPhase,
   useActionQuery,
@@ -14,14 +14,15 @@ export interface ActionDetailsContainerProps {
   name: string;
   refetchInterval?: number;
   argoWorkflowsUIBaseURL: string;
+  onDeleteAction?: (name: string) => void;
 }
 
-export function ActionDetailsContainer({ name, refetchInterval, argoWorkflowsUIBaseURL }: ActionDetailsContainerProps) {
+export function ActionDetailsContainer({ name, refetchInterval, argoWorkflowsUIBaseURL, onDeleteAction }: ActionDetailsContainerProps) {
   const { data, error, isLoading } = useActionQuery(
     { actionName: name },
     { refetchInterval }
   );
-  const navigate = useNavigate();
+
   const runActionMutation = useRunActionMutation();
   const deleteActionMutation = useDeleteActionMutation();
 
@@ -41,7 +42,9 @@ export function ActionDetailsContainer({ name, refetchInterval, argoWorkflowsUIB
     try {
       await deleteActionMutation.mutateAsync({ actionName: name });
       message.success(`Successfully scheduled Action '${name}' deletion`);
-      navigate("/actions");
+      if (onDeleteAction) {
+        onDeleteAction(name);
+      }
     } catch (err) {
       const error = err as Error;
       message.error(

react-components/src/actions/ActionList.container.tsx

@@ -6,9 +6,10 @@ import { ActionList, ActionItem } from "./ActionList";
 
 export interface ActionListContainerProps {
   refetchInterval?: number;
+  onActionClick: (name: string) => void;
 }
 
-export function ActionListContainer({ refetchInterval }: ActionListContainerProps) {
+export function ActionListContainer({ refetchInterval, onActionClick }: ActionListContainerProps) {
   const query = useActionListQuery(undefined, {
     refetchInterval,
   });
@@ -27,6 +28,7 @@ export function ActionListContainer({ refetchInterval }: ActionListContainerProp
 
   return (
     <ActionList
+      onActionClick={onActionClick}
       data={data}
       error={query.error as Error | undefined}
       isLoading={query.isLoading}

react-components/src/actions/ActionList.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { ActionStatusPhase } from "../generated/graphql";
-import { Table, Typography } from "antd";
+import { Button, Table, Typography } from "antd";
 import { EyeOutlined } from "@ant-design/icons";
-import { Link } from "react-router-dom";
 import { ActionStatusBadge } from "./ActionStatusBadge";
 import { ErrorAlert } from "../layout";
 
@@ -20,70 +19,17 @@ export interface ActionListProps {
   isLoading: boolean;
   error?: Error;
   data?: ActionItem[];
+  onActionClick: (name: string) => void;
 }
 
-const columns = [
-  {
-    title: "Name",
-    dataIndex: "name",
-    key: "name",
-    render: (name: string) => (
-      <Link to={`/actions/${name}`}>
-        <strong>{name}</strong>
-      </Link>
-    ),
-    sorter: (a: ActionItem, b: ActionItem) => a.name.localeCompare(b.name),
-  },
-  {
-    title: "Interface",
-    dataIndex: "actionRef",
-    key: "actionRef",
-    render: (actionRef: string) => <Text code>{actionRef}</Text>,
-    sorter: (a: ActionItem, b: ActionItem) =>
-      a.actionRef.localeCompare(b.actionRef),
-  },
-  {
-    title: "Created",
-    dataIndex: "createdAt",
-    key: "createdAt",
-    render: (date: string) => <Text>{new Date(date).toUTCString()}</Text>,
-    sorter: (a: ActionItem, b: ActionItem) =>
-      new Date(a.createdAt as string).getTime() -
-      new Date(b.createdAt as string).getTime(),
-  },
-  {
-    title: "Status",
-    dataIndex: "status",
-    key: "status",
-    render: (phase: ActionStatusPhase | undefined) => (
-      <ActionStatusBadge phase={phase} />
-    ),
-    sorter: (a: ActionItem, b: ActionItem) => {
-      const { status: aStatus = "" } = a;
-      const { status: bStatus = "" } = b;
 
-      return aStatus.localeCompare(bStatus);
-    },
-  },
-  {
-    title: "Action",
-    dataIndex: "name",
-    align: "center" as const,
-    key: "action",
-    render: (name: string) => (
-      <Link to={`/actions/${name}`}>
-        <EyeOutlined />
-      </Link>
-    ),
-  },
-];
-
-export function ActionList({ data, isLoading, error }: ActionListProps) {
+export function ActionList({ data, isLoading, error, onActionClick }: ActionListProps) {
   if (error) {
     return <ErrorAlert error={error} />;
   }
 
   const dataSource = data ?? [];
+  const columns = createColumns(onActionClick)
 
   return (
     <Table
@@ -95,3 +41,58 @@ export function ActionList({ data, isLoading, error }: ActionListProps) {
     />
   );
 }
+
+
+function createColumns(onActionClick: (name: string) => void) {
+  return [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+      render: (name: string) => (
+        <Button type="link" onClick={() => onActionClick(name)}><strong>{name}</strong></Button>
+      ),
+      sorter: (a: ActionItem, b: ActionItem) => a.name.localeCompare(b.name),
+    },
+    {
+      title: "Interface",
+      dataIndex: "actionRef",
+      key: "actionRef",
+      render: (actionRef: string) => <Text code>{actionRef}</Text>,
+      sorter: (a: ActionItem, b: ActionItem) =>
+        a.actionRef.localeCompare(b.actionRef),
+    },
+    {
+      title: "Created",
+      dataIndex: "createdAt",
+      key: "createdAt",
+      render: (date: string) => <Text>{new Date(date).toUTCString()}</Text>,
+      sorter: (a: ActionItem, b: ActionItem) =>
+        new Date(a.createdAt as string).getTime() -
+        new Date(b.createdAt as string).getTime(),
+    },
+    {
+      title: "Status",
+      dataIndex: "status",
+      key: "status",
+      render: (phase: ActionStatusPhase | undefined) => (
+        <ActionStatusBadge phase={phase} />
+      ),
+      sorter: (a: ActionItem, b: ActionItem) => {
+        const { status: aStatus = "" } = a;
+        const { status: bStatus = "" } = b;
+
+        return aStatus.localeCompare(bStatus);
+      },
+    },
+    {
+      title: "Action",
+      dataIndex: "name",
+      align: "center" as const,
+      key: "action",
+      render: (name: string) => (
+        <Button type="link" onClick={() => onActionClick(name)}><EyeOutlined /></Button>
+      ),
+    },
+  ]
+}

react-components/src/http/GraphQLClientProvider.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { QueryClient, QueryClientProvider as OriginalQueryClientProvider } from "react-query";
+
+export interface GraphQLClientProviderProps {
+    children: React.ReactNode;
+    queryClient?: QueryClient
+}
+
+export function GraphQLClientProvider({ children, queryClient = new QueryClient() }: GraphQLClientProviderProps) {
+    return (
+        <OriginalQueryClientProvider client={queryClient}>
+            {children}
+        </OriginalQueryClientProvider>
+    )
+}