refactor: set default page to start instead of summary page

react/src/App.tsx

@@ -62,9 +62,9 @@ const InteractiveLoginPage = React.lazy(
 );
 const ImportAndRunPage = React.lazy(() => import('./pages/ImportAndRunPage'));
 
-const RedirectToSummary = () => {
+const RedirectToStart = () => {
   useSuspendedBackendaiClient();
-  const pathName = '/summary';
+  const pathName = '/start';
   document.dispatchEvent(
     new CustomEvent('move-to-from-react', {
       detail: {
@@ -73,7 +73,7 @@ const RedirectToSummary = () => {
       },
     }),
   );
-  return <Navigate to="/summary" replace />;
+  return <Navigate to="/start" replace />;
 };
 
 const router = createBrowserRouter([
@@ -110,17 +110,17 @@ const router = createBrowserRouter([
     children: [
       {
         path: '/',
-        element: <RedirectToSummary />,
+        element: <RedirectToStart />,
       },
       {
         //for electron dev mode
         path: '/build/electron-app/app/index.html',
-        element: <RedirectToSummary />,
+        element: <RedirectToStart />,
       },
       {
         //for electron prod mode
         path: '/app/index.html',
-        element: <RedirectToSummary />,
+        element: <RedirectToStart />,
       },
       {
         path: '/start',
@@ -140,7 +140,7 @@ const router = createBrowserRouter([
             </>
           );
         },
-        handle: { labelKey: 'webui.menu.Summary' },
+        handle: { labelKey: 'start' },
       },
       {
         path: '/job',

react/src/components/BAIMenu.tsx

@@ -1,5 +1,4 @@
 import { ConfigProvider, Menu, MenuProps, theme } from 'antd';
-import _ from 'lodash';
 import React from 'react';
 
 interface BAIMenuProps extends MenuProps {

react/src/components/MainLayout/MainLayout.tsx

@@ -6,12 +6,11 @@ import BAIErrorBoundary from '../BAIErrorBoundary';
 import BAISider from '../BAISider';
 import Flex from '../Flex';
 import ForceTOTPChecker from '../ForceTOTPChecker';
-import NetworkStatusBanner from '../NetworkStatusBanner';
 import PasswordChangeRequestAlert from '../PasswordChangeRequestAlert';
 import { DRAWER_WIDTH } from '../WEBUINotificationDrawer';
 import WebUIHeader from './WebUIHeader';
 import WebUISider from './WebUISider';
-import { App, Button, Layout, Space, theme } from 'antd';
+import { App, Layout, theme } from 'antd';
 import { atom, useSetAtom } from 'jotai';
 import { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate, Outlet } from 'react-router-dom';

react/src/components/MainLayout/WebUIHeader.tsx

@@ -1,6 +1,6 @@
 import { useCustomThemeConfig } from '../../helper/customThemeConfig';
 import { useCurrentDomainValue } from '../../hooks';
-import { useSuspendedBackendaiClient, useWebUINavigate } from '../../hooks';
+import { useWebUINavigate } from '../../hooks';
 import {
   useCurrentProjectValue,
   useSetCurrentProject,
@@ -16,12 +16,9 @@ import { DRAWER_WIDTH } from '../WEBUINotificationDrawer';
 import WebUIThemeToggleButton from '../WebUIThemeToggleButton';
 // @ts-ignore
 import rawCss from './WebUIHeader.css?raw';
-import { MenuOutlined } from '@ant-design/icons';
-import { theme, Button, Typography, Grid } from 'antd';
-import _ from 'lodash';
+import { theme, Typography, Grid } from 'antd';
 import { Suspense, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMatches } from 'react-router-dom';
 
 export interface WebUIHeaderProps extends FlexProps {
   onClickMenuIcon?: () => void;
@@ -38,7 +35,6 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
   const currentDomainName = useCurrentDomainValue();
   const currentProject = useCurrentProjectValue();
   const setCurrentProject = useSetCurrentProject();
-  const matches = useMatches();
   const { y: scrolled } = useScrollBreakPoint(
     {
       y: 1,

react/src/components/MainLayout/WebUISider.tsx

@@ -14,16 +14,15 @@ import TrailsIcon from '../icons/TrailsIcon';
 import { PluginPage, WebUIPluginType } from './MainLayout';
 import {
   ApiOutlined,
-  BarChartOutlined,
   BarsOutlined,
   CloudUploadOutlined,
   ControlOutlined,
+  DashboardOutlined,
   ExportOutlined,
   FileDoneOutlined,
   HddOutlined,
   InfoCircleOutlined,
   PlayCircleOutlined,
-  RocketOutlined,
   SolutionOutlined,
   ToolOutlined,
   UserOutlined,
@@ -32,7 +31,6 @@ import { useToggle } from 'ahooks';
 import { theme, MenuProps, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/interface';
 import _ from 'lodash';
-import { PlayIcon } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
@@ -62,7 +60,6 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
   const location = useLocation();
   const baiClient = useSuspendedBackendaiClient();
 
-  const isHideAgents = baiClient?._config?.hideAgents ?? true;
   const fasttrackEndpoint = baiClient?._config?.fasttrackEndpoint ?? null;
   const blockList = baiClient?._config?.blockList ?? null;
   const inactiveList = baiClient?._config?.inactiveList ?? null;
@@ -408,7 +405,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
       <BAIMenu
         isAdminMenu={true}
         selectedKeys={[
-          location.pathname.split('/')[1] || 'summary',
+          location.pathname.split('/')[1] || 'start',
           // TODO: After matching first path of 'storage-settings' and 'agent', remove this code
           location.pathname.split('/')[1] === 'storage-settings' ? 'agent' : '',
           // TODO: After 'SessionListPage' is completed and used as the main page, remove this code

react/src/components/UserDropdownMenu.tsx

@@ -37,12 +37,12 @@ const UserProfileSettingModal = React.lazy(
   () => import('./UserProfileSettingModal'),
 );
 
-interface UserDropdownMenu {
+interface UserDropdownMenuProps {
   iconColor?: string;
   color?: string;
 }
 
-const UserDropdownMenu: React.FC<UserDropdownMenu> = ({ ...props }) => {
+const UserDropdownMenu: React.FC<UserDropdownMenuProps> = ({ ...props }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const [userInfo] = useCurrentUserInfo();

react/src/components/icons/SessionsIcon.tsx

@@ -1,9 +1,6 @@
 import { ReactComponent as logo } from './Sessions.svg';
 import Icon from '@ant-design/icons';
-import {
-  CustomIconComponentProps,
-  IconComponentProps,
-} from '@ant-design/icons/lib/components/Icon';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
 
 interface SessionsIconProps
   extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}

react/src/components/icons/TrailsIcon.tsx

@@ -1,9 +1,6 @@
 import { ReactComponent as logo } from './Trails.svg';
 import Icon from '@ant-design/icons';
-import {
-  CustomIconComponentProps,
-  IconComponentProps,
-} from '@ant-design/icons/lib/components/Icon';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
 
 interface TrailsIconProps
   extends Omit<CustomIconComponentProps, 'width' | 'height' | 'fill'> {}

react/src/pages/StartPage.tsx

@@ -4,7 +4,6 @@ import BatchSessionIcon from '../components/icons/BatchSessionIcon';
 import ExampleStartIcon from '../components/icons/ExampleStart';
 import InteractiveSessionIcon from '../components/icons/InteractiveSession';
 import ModelServiceIcon from '../components/icons/ModelServiceIcon';
-import URLStartIcon from '../components/icons/URLStartIcon';
 import { useWebUINavigate } from '../hooks';
 import { FolderAddOutlined } from '@ant-design/icons';
 import React from 'react';
@@ -107,10 +106,7 @@ const StartPage: React.FC<StartPageProps> = (props) => {
           secondary
           icon={
             // FIXME: workaround for displaying proper icon
-            <img
-              src="react/src/components/icons/URLStart.svg"
-              alt="URL start"
-            ></img>
+            <img src="/resources/icons/URLStart.svg" alt="URL start"></img>
             // <URLStartIcon />
           }
           title={

src/backend-ai-app.ts

@@ -50,7 +50,7 @@ export const navigate =
     }
     let page;
     if (['/', 'build', '/build', 'app', '/app'].includes(path)) {
-      page = 'summary';
+      page = 'start';
     } else if (path[0] === '/') {
       page = path.slice(1);
     } else {
@@ -85,7 +85,7 @@ const loadPage =
   (page, params: Record<string, unknown> = {}) =>
   (dispatch) => {
     switch (page) {
-      case 'summary':
+      case 'start':
         import('./components/backend-ai-summary-view.js').then((module) => {
           // TODO: after page changing?
         });

src/components/backend-ai-error-view.ts

@@ -70,8 +70,8 @@ export default class BackendAIErrorView extends BackendAIPage {
    * @param {string} url - page to redirect from the current page.
    */
   _moveTo(url = '') {
-    const page = url !== '' ? url : 'summary';
-    globalThis.history.pushState({}, '', '/summary');
+    const page = url !== '' ? url : 'start';
+    globalThis.history.pushState({}, '', '/start');
     store.dispatch(navigate(decodeURIComponent('/' + page), {}));
     document.dispatchEvent(
       new CustomEvent('react-navigate', {
@@ -98,7 +98,7 @@ export default class BackendAIErrorView extends BackendAIPage {
               fullwidth
               id="go-to-summary"
               label="${_t('button.GoBackToSummaryPage')}"
-              @click="${() => this._moveTo('summary')}"
+              @click="${() => this._moveTo('start')}"
             ></mwc-button>
           </div>
         </div>

src/components/backend-ai-permission-denied-view.ts

@@ -113,7 +113,7 @@ export default class BackendAIPermissionDeniedView extends BackendAIPage {
    * @param {string} url - page to redirect from the current page.
    */
   _moveTo(url = '') {
-    const page = url !== '' ? url : 'summary';
+    const page = url !== '' ? url : 'start';
     globalThis.history.pushState({}, '', '/summary');
     store.dispatch(navigate(decodeURIComponent('/' + page), {}));
   }
@@ -135,7 +135,7 @@ export default class BackendAIPermissionDeniedView extends BackendAIPage {
               fullwidth
               id="go-to-summary"
               label="${_t('button.GoBackToSummaryPage')}"
-              @click="${() => this._moveTo('summary')}"
+              @click="${() => this._moveTo('start')}"
             ></mwc-button>
           </div>
         </div>

src/components/backend-ai-storage-list.ts

@@ -1080,7 +1080,7 @@ export default class BackendAiStorageList extends BackendAIPage {
    * @param {string} url - page to redirect from the current page.
    */
   _moveTo(url = '') {
-    const page = url !== '' ? url : 'summary';
+    const page = url !== '' ? url : 'start';
     // globalThis.history.pushState({}, '', page);
     store.dispatch(navigate(decodeURIComponent(page), {}));
 

src/components/backend-ai-storage-proxy-list.ts

@@ -249,7 +249,7 @@ export default class BackendAIStorageProxyList extends BackendAIPage {
    * @param {string} url - page to redirect from the current page.
    */
   _moveTo(url = '') {
-    const page = url !== '' ? url : 'summary';
+    const page = url !== '' ? url : 'start';
     // globalThis.history.pushState({}, '', page);
     store.dispatch(navigate(decodeURIComponent(page), {}));
 

src/components/backend-ai-summary-view.ts

@@ -477,7 +477,7 @@ export default class BackendAISummary extends BackendAIPage {
    * @param {string} search
    */
   _moveTo(url = '', search: string | undefined = undefined) {
-    const page = url !== '' ? url : 'summary';
+    const page = url !== '' ? url : 'start';
     // globalThis.history.pushState({}, '', page);
     store.dispatch(navigate(decodeURIComponent(page), {}));
 

src/components/backend-ai-webui.ts

@@ -145,7 +145,8 @@ export default class BackendAIWebUI extends connect(store)(LitElement) {
   @property({ type: Number }) sidepanelWidth = 250;
   @property({ type: Object }) supports = Object();
   @property({ type: Array }) availablePages = [
-    'summary',
+    // 'summary',
+    'start',
     'verify-email',
     'change-password',
     'job',
@@ -719,7 +720,7 @@ export default class BackendAIWebUI extends connect(store)(LitElement) {
    */
   _loadPageElement() {
     if (this._page === 'index.html' || this._page === '') {
-      this._page = 'summary';
+      this._page = 'start';
       navigate(decodeURIComponent('/'));
     }
   }