dashboard: refactor directory structure (#995)

Signed-off-by: Teo Koon Peng <teokoonpeng@gmail.com>

packages/dashboard/src/app-config.ts

@@ -2,7 +2,9 @@ import React from 'react';
 import { getDefaultTaskDefinition, TaskDefinition } from 'react-components';
 
 import testConfig from '../app-config.json';
-import { Authenticator, KeycloakAuthenticator, StubAuthenticator } from './auth';
+import { Authenticator } from './services/authenticator';
+import { KeycloakAuthenticator } from './services/keycloak';
+import { StubAuthenticator } from './services/stub-authenticator';
 
 export interface RobotResource {
   /**

packages/dashboard/src/components/app.tsx → packages/dashboard/src/app.tsx

@@ -8,8 +8,19 @@ import './app.css';
 import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
-import { AppConfigContext, AuthenticatorContext, ResourcesContext } from '../app-config';
-import { LoginPage, PrivateRoute } from '../auth';
+import { AppConfigContext, AuthenticatorContext, ResourcesContext } from './app-config';
+import {
+  AdminRouter,
+  AppBase,
+  AppEvents,
+  ManagedWorkspace,
+  PrivateRoute,
+  RmfApp,
+  SettingsContext,
+  Workspace,
+  WorkspaceState,
+} from './components';
+import { LoginPage } from './pages';
 import {
   AdminRoute,
   CustomRoute1,
@@ -18,16 +29,40 @@ import {
   LoginRoute,
   RobotsRoute,
   TasksRoute,
-} from '../util/url';
-import { AdminRouter } from './admin';
-import { AppBase } from './app-base';
-import { SettingsContext } from './app-contexts';
-import { AppEvents } from './app-events';
-import { dashboardWorkspace } from './dashboard';
-import { RmfApp } from './rmf-app';
-import { robotsWorkspace } from './robots/robots-workspace';
-import { tasksWorkspace } from './tasks/tasks-workspace';
-import { ManagedWorkspace, Workspace } from './workspace';
+} from './utils/url';
+
+const dashboardWorkspace: WorkspaceState = {
+  layout: [{ i: 'map', x: 0, y: 0, w: 12, h: 12 }],
+  windows: [{ key: 'map', appName: 'Map' }],
+};
+
+const robotsWorkspace: WorkspaceState = {
+  layout: [
+    { i: 'robots', x: 0, y: 0, w: 7, h: 4 },
+    { i: 'map', x: 8, y: 0, w: 5, h: 8 },
+    { i: 'doors', x: 0, y: 0, w: 7, h: 4 },
+    { i: 'lifts', x: 0, y: 0, w: 7, h: 4 },
+    { i: 'mutexGroups', x: 8, y: 0, w: 5, h: 4 },
+  ],
+  windows: [
+    { key: 'robots', appName: 'Robots' },
+    { key: 'map', appName: 'Map' },
+    { key: 'doors', appName: 'Doors' },
+    { key: 'lifts', appName: 'Lifts' },
+    { key: 'mutexGroups', appName: 'Mutex Groups' },
+  ],
+};
+
+const tasksWorkspace: WorkspaceState = {
+  layout: [
+    { i: 'tasks', x: 0, y: 0, w: 7, h: 12 },
+    { i: 'map', x: 8, y: 0, w: 5, h: 12 },
+  ],
+  windows: [
+    { key: 'tasks', appName: 'Tasks' },
+    { key: 'map', appName: 'Map' },
+  ],
+};
 
 export default function App(): JSX.Element | null {
   const authenticator = React.useContext(AuthenticatorContext);

packages/dashboard/src/components/admin/add-permission-dialog.stories.tsx

@@ -1,21 +1,22 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
-import { AddPermissionDialog, AddPermissionDialogProps } from './add-permission-dialog';
+import { AddPermissionDialog } from './add-permission-dialog';
 
 export default {
   title: 'Admin/Add Permission Dialog',
   component: AddPermissionDialog,
 } satisfies Meta;
 
-export const Default: StoryFn<AddPermissionDialogProps> = (args) => {
-  return (
+type Story = StoryObj<typeof AddPermissionDialog>;
+
+export const Default: Story = {
+  storyName: 'Add Permission Dialog',
+  render: (args) => (
     <AddPermissionDialog
       {...args}
       open={true}
       setOpen={() => {}}
       savePermission={() => new Promise((res) => setTimeout(res, 100))}
     />
-  );
+  ),
 };
-
-Default.storyName = 'Add Permission Dialog';

packages/dashboard/src/components/admin/tests/add-permission-dialog.test.tsx → packages/dashboard/src/components/admin/add-permission-dialog.test.tsx

@@ -2,8 +2,8 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { RmfAction } from '../../permissions';
-import { AddPermissionDialog } from '../add-permission-dialog';
+import { RmfAction } from '../../services/permissions';
+import { AddPermissionDialog } from './add-permission-dialog';
 
 describe('AddPermissionDialog', () => {
   it('calls savePermission when form is submitted', async () => {

packages/dashboard/src/components/admin/add-permission-dialog.tsx

@@ -3,8 +3,8 @@ import { Permission } from 'api-client';
 import React from 'react';
 import { ConfirmationDialog, useAsync } from 'react-components';
 
+import { getActionText, RmfAction } from '../../services/permissions';
 import { AppControllerContext } from '../app-contexts';
-import { getActionText, RmfAction } from '../permissions';
 
 export interface AddPermissionDialogProps {
   open: boolean;

packages/dashboard/src/components/admin/create-role-dialog.stories.tsx

@@ -1,20 +1,21 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
-import { CreateRoleDialog, CreateRoleDialogProps } from './create-role-dialog';
+import { CreateRoleDialog } from './create-role-dialog';
 
 export default {
   title: 'Admin/Create Role Dialog',
   component: CreateRoleDialog,
 } satisfies Meta;
 
-export const Default: StoryFn<CreateRoleDialogProps> = (args) => {
-  return (
+type Story = StoryObj<typeof CreateRoleDialog>;
+
+export const Default: Story = {
+  storyName: 'Create Role Dialog',
+  render: (args) => (
     <CreateRoleDialog
       {...args}
       open={true}
       createRole={() => new Promise((res) => setTimeout(res, 100))}
     />
-  );
+  ),
 };
-
-Default.storyName = 'Create Role Dialog';

packages/dashboard/src/components/admin/tests/create-role-dialog.test.tsx → packages/dashboard/src/components/admin/create-role-dialog.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { CreateRoleDialog } from '../create-role-dialog';
+import { CreateRoleDialog } from './create-role-dialog';
 
 describe('CreateRoleDialog', () => {
   it('calls createRole when form is submitted', async () => {

packages/dashboard/src/components/admin/create-user-dialog.stories.tsx

@@ -1,20 +1,23 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
-import { CreateUserDialog, CreateUserDialogProps } from './create-user-dialog';
+import { CreateUserDialog } from './create-user-dialog';
 
 export default {
   title: 'Admin/Create User Dialog',
   component: CreateUserDialog,
 } satisfies Meta;
 
-export const Default: StoryFn<CreateUserDialogProps> = (args) => {
-  return (
+type Story = StoryObj<typeof CreateUserDialog>;
+
+export const Default: Story = {
+  storyName: 'Create User Dialog',
+  render: (args) => (
     <CreateUserDialog
       {...args}
       open={true}
       createUser={() => new Promise((res) => setTimeout(res, 100))}
     />
-  );
+  ),
 };
 
 Default.storyName = 'Create User Dialog';

packages/dashboard/src/components/admin/tests/create-user-dialog.test.tsx → packages/dashboard/src/components/admin/create-user-dialog.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { CreateUserDialog } from '../create-user-dialog';
+import { CreateUserDialog } from './create-user-dialog';
 
 describe('CreateUserDialog', () => {
   it('calls createUser when form is submitted', async () => {

packages/dashboard/src/components/admin/drawer.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { AdminDrawer } from './drawer';
 
@@ -12,8 +12,8 @@ export default {
   },
 } satisfies Meta;
 
-export const Default: StoryFn<{}> = (args) => {
-  return <AdminDrawer {...args} />;
-};
+type Story = StoryObj<typeof AdminDrawer>;
 
-Default.storyName = 'Drawer';
+export const Default: Story = {
+  storyName: 'Drawer',
+};

packages/dashboard/src/components/admin/drawer.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { describe, it } from 'vitest';
+
+import { AdminDrawer } from './drawer';
+
+describe('AdminDrawer', () => {
+  it('smoke test', () => {
+    render(
+      <MemoryRouter>
+        <AdminDrawer />
+      </MemoryRouter>,
+    );
+  });
+});

packages/dashboard/src/components/admin/manage-roles-dialog.stories.tsx

@@ -1,21 +1,26 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { ManageRolesCard } from './manage-roles-dialog';
-import { RoleListCardProps } from './role-list-card';
 
 export default {
   title: 'Admin/Manage Roles Card',
+  component: ManageRolesCard,
 } satisfies Meta;
 
 const allRoles: string[] = [];
 for (let i = 0; i < 5; i++) {
   allRoles.push(`role${i}`);
 }
 
-export const Default: StoryFn<RoleListCardProps> = (args) => {
-  return (
+type Story = StoryObj<typeof ManageRolesCard>;
+
+export const Default: Story = {
+  storyName: 'Manage Roles Card',
+  args: {
+    assignedRoles: ['role1'],
+  },
+  render: (args) => (
     <ManageRolesCard
-      assignedRoles={['role1']}
       getAllRoles={async () => {
         await new Promise((res) => setTimeout(res, 100));
         return allRoles;
@@ -25,7 +30,5 @@ export const Default: StoryFn<RoleListCardProps> = (args) => {
       }}
       {...args}
     />
-  );
+  ),
 };
-
-Default.storyName = 'Manage Roles Card';

packages/dashboard/src/components/admin/tests/manage-roles-dialog.test.tsx → packages/dashboard/src/components/admin/manage-roles-dialog.test.tsx

@@ -2,7 +2,7 @@ import { render, waitFor, waitForElementToBeRemoved } from '@testing-library/rea
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { ManageRolesCard, ManageRolesDialog } from '../manage-roles-dialog';
+import { ManageRolesCard, ManageRolesDialog } from './manage-roles-dialog';
 
 describe('ManageRolesCard', () => {
   it('shows dialog when add/remove is clicked', async () => {

packages/dashboard/src/components/admin/permissions-card.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { Permission } from 'api-client';
 
-import { PermissionsCard, PermissionsCardProps } from './permissions-card';
+import { PermissionsCard } from './permissions-card';
 
 export default {
   title: 'Admin/Permissions Card',
@@ -16,10 +16,11 @@ export default {
   },
 } satisfies Meta;
 
-export const Default: StoryFn<PermissionsCardProps> = (args) => {
-  return (
+type Story = StoryObj<typeof PermissionsCard>;
+
+export const Default: Story = {
+  storyName: 'Permissions Card',
+  render: (args) => (
     <PermissionsCard {...args} savePermission={() => new Promise((res) => setTimeout(res, 100))} />
-  );
+  ),
 };
-
-Default.storyName = 'Permissions Card';

packages/dashboard/src/components/admin/tests/permissions-card.test.tsx → packages/dashboard/src/components/admin/permissions-card.test.tsx

@@ -2,8 +2,8 @@ import { fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
 
-import { getActionText, RmfAction } from '../../permissions';
-import { PermissionsCard } from '../permissions-card';
+import { getActionText, RmfAction } from '../../services/permissions';
+import { PermissionsCard } from './permissions-card';
 
 // TODO(AA): To remove after
 // https://github.com/testing-library/react-testing-library/issues/1216

packages/dashboard/src/components/admin/permissions-card.tsx

@@ -19,8 +19,8 @@ import { Permission } from 'api-client';
 import React from 'react';
 import { Loading, useAsync } from 'react-components';
 
+import { getActionText } from '../../services/permissions';
 import { AppControllerContext } from '../app-contexts';
-import { getActionText } from '../permissions';
 import { AddPermissionDialog, AddPermissionDialogProps } from './add-permission-dialog';
 
 const prefix = 'permissions-card';