feat: use new project detail layout

config-ui/src/api/project/index.ts

@@ -20,7 +20,7 @@ import type { IProject } from '@/types';
 import { encodeName } from '@/routes';
 import { request } from '@/utils';
 
-export const list = (data: Pagination): Promise<{ count: number; projects: IProject[] }> =>
+export const list = (data: Pagination & { keyword?: string }): Promise<{ count: number; projects: IProject[] }> =>
   request('/projects', { data });
 
 export const get = (name: string): Promise<IProject> => request(`/projects/${encodeName(name)}`);

config-ui/src/app/routrer.tsx

@@ -19,15 +19,19 @@
 import { createBrowserRouter, Navigate } from 'react-router-dom';
 
 import {
+  App,
+  appLoader,
   DBMigrate,
   Onboard,
   Error,
   Layout,
-  layoutLoader,
   Connections,
   Connection,
   ProjectHomePage,
-  ProjectDetailPage,
+  ProjectLayout,
+  ProjectGeneralSettings,
+  ProjectWebhook,
+  ProjectAdditionalSettings,
   BlueprintHomePage,
   BlueprintDetailPage,
   BlueprintConnectionDetailPage,
@@ -37,79 +41,103 @@ import {
   NotFound,
 } from '@/routes';
 
-const PATH_PREFIX = import.meta.env.DEVLAKE_PATH_PREFIX ?? '';
+const PATH_PREFIX = import.meta.env.DEVLAKE_PATH_PREFIX ?? '/';
 
 export const router = createBrowserRouter([
   {
-    path: '/',
-    element: <Navigate to={PATH_PREFIX ? PATH_PREFIX : '/connections'} />,
-  },
-  {
-    path: `${PATH_PREFIX}/db-migrate`,
-    element: <DBMigrate />,
-  },
-  {
-    path: `${PATH_PREFIX}/onboard`,
-    element: <Onboard />,
-  },
-  {
-    path: `${PATH_PREFIX}`,
-    element: <Layout />,
-    loader: layoutLoader,
+    path: PATH_PREFIX,
+    element: <App />,
+    loader: appLoader,
     errorElement: <Error />,
     children: [
       {
         index: true,
         element: <Navigate to="projects" />,
       },
       {
-        path: 'projects',
-        element: <ProjectHomePage />,
-      },
-      {
-        path: 'projects/:pname',
-        element: <ProjectDetailPage />,
-      },
-      {
-        path: 'projects/:pname/:unique',
-        element: <BlueprintConnectionDetailPage />,
+        path: 'db-migrate',
+        element: <DBMigrate />,
       },
       {
-        path: 'connections',
-        element: <Connections />,
+        path: 'onboard',
+        element: <Onboard />,
       },
       {
-        path: 'connections/:plugin/:id',
-        element: <Connection />,
-      },
-      {
-        path: 'advanced',
+        path: 'projects/:pname',
+        element: <ProjectLayout />,
         children: [
           {
-            path: 'blueprints',
-            element: <BlueprintHomePage />,
+            index: true,
+            element: <Navigate to="general-settings" />,
           },
           {
-            path: 'blueprints/:id',
-            element: <BlueprintDetailPage />,
+            path: 'general-settings',
+            element: <ProjectGeneralSettings />,
           },
           {
-            path: 'blueprints/:bid/:unique',
+            path: 'general-settings/:unique',
             element: <BlueprintConnectionDetailPage />,
           },
           {
-            path: 'pipelines',
-            element: <Pipelines />,
+            path: 'webhooks',
+            element: <ProjectWebhook />,
           },
           {
-            path: 'pipeline/:id',
-            element: <Pipeline />,
+            path: 'additional-settings',
+            element: <ProjectAdditionalSettings />,
           },
         ],
       },
       {
-        path: 'keys',
-        element: <ApiKeys />,
+        path: '',
+        element: <Layout />,
+        children: [
+          {
+            index: true,
+            element: <Navigate to="projects" />,
+          },
+          {
+            path: 'projects',
+            element: <ProjectHomePage />,
+          },
+          {
+            path: 'connections',
+            element: <Connections />,
+          },
+          {
+            path: 'connections/:plugin/:id',
+            element: <Connection />,
+          },
+          {
+            path: 'advanced',
+            children: [
+              {
+                path: 'blueprints',
+                element: <BlueprintHomePage />,
+              },
+              {
+                path: 'blueprints/:id',
+                element: <BlueprintDetailPage />,
+              },
+              {
+                path: 'blueprints/:bid/:unique',
+                element: <BlueprintConnectionDetailPage />,
+              },
+              {
+                path: 'pipelines',
+                element: <Pipelines />,
+              },
+              {
+                path: 'pipeline/:id',
+                element: <Pipeline />,
+              },
+            ],
+          },
+          {
+            path: 'keys',
+            element: <ApiKeys />,
+          },
+        ],
       },
     ],
   },

config-ui/src/config/paths.ts

@@ -27,7 +27,7 @@ export const PATHS = {
   PROJECTS: () => `${PATH_PREFIX}/projects`,
   PROJECT: (pname: string) => `${PATH_PREFIX}/projects/${encodeName(pname)}`,
   PROJECT_CONNECTION: (pname: string, plugin: string, connectionId: ID) =>
-    `${PATH_PREFIX}/projects/${encodeName(pname)}/${plugin}-${connectionId}`,
+    `${PATH_PREFIX}/projects/${encodeName(pname)}/general-settings/${plugin}-${connectionId}`,
   BLUEPRINTS: () => `${PATH_PREFIX}/advanced/blueprints`,
   BLUEPRINT: (bid: ID) => `${PATH_PREFIX}/advanced/blueprints/${bid}`,
   BLUEPRINT_CONNECTION: (bid: ID, plugin: string, connectionId: ID) =>

config-ui/src/features/connections/slice.ts

@@ -28,42 +28,48 @@ import { transformConnection, transformWebhook } from './utils';
 const initialState: {
   status: IStatus;
   error: any;
+  version: string;
   plugins: string[];
   connections: IConnection[];
   webhooks: IWebhook[];
 } = {
   status: 'idle',
   error: null,
+  version: '',
   plugins: [],
   connections: [],
   webhooks: [],
 };
 
-export const init = createAsyncThunk('connections/init', async (plugins: string[]) => {
-  const connections = await Promise.all(
-    plugins
-      .filter((plugin) => plugin !== 'webhook')
-      .map(async (plugin) => {
-        const connections = await API.connection.list(plugin);
-        return connections.map((connection) => transformConnection(plugin, connection));
-      }),
-  );
-
-  const webhooks = await Promise.all(
-    plugins
-      .filter((plugin) => plugin === 'webhook')
-      .map(async () => {
-        const webhooks = await API.plugin.webhook.list();
-        return webhooks.map((webhook) => transformWebhook(webhook));
-      }),
-  );
-
-  return {
-    plugins,
-    connections: flatten(connections),
-    webhooks: flatten(webhooks),
-  };
-});
+export const init = createAsyncThunk(
+  'connections/init',
+  async ({ version, plugins }: { version: string; plugins: string[] }) => {
+    const connections = await Promise.all(
+      plugins
+        .filter((plugin) => plugin !== 'webhook')
+        .map(async (plugin) => {
+          const connections = await API.connection.list(plugin);
+          return connections.map((connection) => transformConnection(plugin, connection));
+        }),
+    );
+
+    const webhooks = await Promise.all(
+      plugins
+        .filter((plugin) => plugin === 'webhook')
+        .map(async () => {
+          const webhooks = await API.plugin.webhook.list();
+          return webhooks.map((webhook) => transformWebhook(webhook));
+        }),
+    );
+
+    return {
+      version,
+      plugins,
+      connections: flatten(connections),
+      webhooks: flatten(webhooks),
+    };
+  },
+);
 
 export const addConnection = createAsyncThunk('connections/addConnection', async ({ plugin, ...payload }: any) => {
   const connection = await API.connection.create(plugin, payload);
@@ -143,6 +149,7 @@ export const connectionsSlice = createSlice({
         state.status = 'loading';
       })
       .addCase(init.fulfilled, (state, action) => {
+        state.version = action.payload.version;
         state.plugins = action.payload.plugins;
         state.connections = action.payload.connections;
         state.webhooks = action.payload.webhooks;
@@ -205,6 +212,8 @@ export const selectStatus = (state: RootState) => state.connections.status;
 
 export const selectError = (state: RootState) => state.connections.error;
 
+export const selectVersion = (state: RootState) => state.connections.version;
+
 export const selectPlugins = (state: RootState) => state.connections.plugins;
 
 export const selectAllConnections = (state: RootState) => state.connections.connections;

config-ui/src/hooks/index.ts

@@ -18,5 +18,6 @@
 
 export * from './extend-redux';
 export * from './use-auto-refresh';
+export * from './use-outside-click';
 export * from './use-refresh-data';
 export * from './user-proxy-prefix';

config-ui/src/hooks/use-outside-click.ts

@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import type { MutableRefObject } from 'react';
+import { useEffect } from 'react';
+
+export const useOutsideClick = (ref: MutableRefObject<HTMLDivElement | null>, cb: () => void) => {
+  useEffect(() => {
+    function handleClickOutside(event: any) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        cb();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, cb]);
+};

config-ui/src/routes/app/app.tsx

@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { useEffect } from 'react';
+import { useNavigate, useLoaderData, Outlet } from 'react-router-dom';
+
+import { init } from '@/features';
+import { useAppDispatch } from '@/hooks';
+import { setUpRequestInterceptor } from '@/utils';
+
+export const App = () => {
+  const navigate = useNavigate();
+
+  const { version, plugins } = useLoaderData() as { version: string; plugins: string[] };
+
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    setUpRequestInterceptor(navigate);
+    dispatch(init({ version, plugins }));
+  }, []);
+
+  return <Outlet />;
+};

config-ui/src/routes/project/detail/styled.ts → config-ui/src/routes/app/index.ts

@@ -16,11 +16,5 @@
  *
  */
 
-import styled from 'styled-components';
-
-export const Wrapper = styled.div``;
-
-export const DialogBody = styled.div`
-  display: flex;
-  align-items: center;
-`;
+export * from './app';
+export * from './loader';

config-ui/src/routes/layout/loader.ts → config-ui/src/routes/app/loader.ts

@@ -26,7 +26,7 @@ type Props = {
   request: Request;
 };
 
-export const layoutLoader = async ({ request }: Props) => {
+export const appLoader = async ({ request }: Props) => {
   const onboard = await API.store.get('onboard');
 
   if (!onboard) {

config-ui/src/routes/blueprint/detail/blueprint-detail.tsx

@@ -67,7 +67,6 @@ export const BlueprintDetail = ({ id, from }: Props) => {
   return (
     <S.Wrapper>
       <Tabs
-        centered
         items={[
           {
             key: 'status',

config-ui/src/routes/index.ts

@@ -17,6 +17,7 @@
  */
 
 export * from './api-keys';
+export * from './app';
 export * from './blueprint';
 export * from './connection';
 export * from './db-migrate';