ms2/spaces view

src/management-system-v2/app/(dashboard)/[environmentId]/layout-client.tsx

@@ -96,9 +96,9 @@ const Layout: FC<
               icon: <FaUserEdit />,
             },
             {
-              key: 'environments',
+              key: 'spaces',
               title: 'My Spaces',
-              label: <SpaceLink href={`/environments`}>My Spaces</SpaceLink>,
+              label: <SpaceLink href={`/spaces`}>My Spaces</SpaceLink>,
               icon: <AppstoreOutlined />,
             },
           ],
@@ -187,7 +187,6 @@ const Layout: FC<
                     priority
                   />
                 </Link>
-
                 {loggedIn ? menu : null}
               </AntLayout.Sider>
             )}

src/management-system-v2/app/(dashboard)/[environmentId]/spaces/environments-page.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import Bar from '@/components/bar';
+import { OrganizationEnvironment } from '@/lib/data/environment-schema';
+import { Button } from 'antd';
+import { FC } from 'react';
+import useFuzySearch, { ReplaceKeysWithHighlighted } from '@/lib/useFuzySearch';
+import ElementList from '@/components/item-list-view';
+import Link from 'next/link';
+
+const highlightedKeys = ['name', 'description'] as const;
+export type FilteredEnvironment = ReplaceKeysWithHighlighted<
+  OrganizationEnvironment,
+  (typeof highlightedKeys)[number]
+>;
+
+const EnvironmentsPage: FC<{ organizationEnvironments: OrganizationEnvironment[] }> = ({
+  organizationEnvironments,
+}) => {
+  const { searchQuery, filteredData, setSearchQuery } = useFuzySearch({
+    data: organizationEnvironments,
+    keys: ['name', 'description'],
+    highlightedKeys,
+    transformData: (results) => results.map((result) => result.item),
+  });
+
+  return (
+    <>
+      <Bar
+        leftNode={
+          <Link href="/create-organization">
+            <Button type="primary">New Organization</Button>
+          </Link>
+        }
+        searchProps={{
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          placeholder: 'Search Environments',
+        }}
+      />
+      <ElementList<(typeof filteredData)[number]>
+        columns={[
+          { title: 'Name', render: (_, environment) => environment.name.highlighted },
+          {
+            title: 'Description',
+            render: (_, environment) => environment.description.highlighted,
+          },
+          {
+            dataIndex: 'id',
+            key: 'tooltip',
+            title: '',
+            width: 100,
+            render: (id: string) => (
+              <Link href={`/${id}/processes`}>
+                <Button>Enter</Button>
+              </Link>
+            ),
+          },
+        ]}
+        data={filteredData}
+        tableProps={{
+          rowKey: 'id',
+        }}
+      />
+    </>
+  );
+};
+export default EnvironmentsPage;

src/management-system-v2/app/(dashboard)/[environmentId]/environments/page.tsx → src/management-system-v2/app/(dashboard)/[environmentId]/spaces/page.tsx

@@ -3,7 +3,7 @@ import Content from '@/components/content';
 import { getEnvironmentById } from '@/lib/data/DTOs';
 import { getUserOrganizationEnvironments } from '@/lib/data/DTOs';
 import { OrganizationEnvironment } from '@/lib/data/environment-schema';
-import EnvironmentsPage from './environemnts-page';
+import EnvironmentsPage from './environments-page';
 import { getUserById } from '@/lib/data/DTOs';
 import UnauthorizedFallback from '@/components/unauthorized-fallback';
 
@@ -19,7 +19,7 @@ const Page = async () => {
   )) as OrganizationEnvironment[];
 
   return (
-    <Content title="My Environments">
+    <Content title="My Spaces">
       <EnvironmentsPage organizationEnvironments={organizationEnvironments} />
     </Content>
   );

src/management-system-v2/components/header-actions.tsx

@@ -126,9 +126,9 @@ const HeaderActions: FC = () => {
 
     avatarDropdownItems.push(
       {
-        key: 'environments',
+        key: 'spaces',
         title: 'My Spaces',
-        label: <SpaceLink href={`/environments`}>My Spaces</SpaceLink>,
+        label: <SpaceLink href={`/spaces`}>My Spaces</SpaceLink>,
         icon: <AppstoreOutlined />,
       },
       {

src/management-system-v2/lib/user-preferences.ts

@@ -41,7 +41,6 @@ const defaultPreferences = {
   'role-page-side-panel': { open: false, width: 300 },
   'user-page-side-panel': { open: false, width: 300 },
   'process-meta-data': { open: false, width: 300 },
-  'environments-page-side-panel': { open: false, width: 300 },
   'tech-data-open-tree-items': [] as { id: string; open: string[] }[],
   'tech-data-editor': { siderOpen: true, siderWidth: 300 },
 }; /* as const */ /* Does not work for strings */

src/management-system-v2/next.config.js

@@ -48,7 +48,7 @@ const nextConfig = {
   rewrites: async () => {
     return [
       'processes',
-      'environments',
+      'spaces',
       'executions',
       'engines',
       'tasklist',