- {apps ?
:
}
+
+
);
};
diff --git a/src/features/dashboard/manage-apps/manage-apps.module.scss b/src/features/dashboard/manage-apps/manage-apps.scss
similarity index 64%
rename from src/features/dashboard/manage-apps/manage-apps.module.scss
rename to src/features/dashboard/manage-apps/manage-apps.scss
index b2beab871..84915f88d 100644
--- a/src/features/dashboard/manage-apps/manage-apps.module.scss
+++ b/src/features/dashboard/manage-apps/manage-apps.scss
@@ -1,10 +1,8 @@
@use 'src/styles/utility' as *;
-.manageApps {
+.manage_apps {
width: 100%;
- display: inline-block;
overflow: auto;
- max-height: calc(100vh - rem(35));
border-top-left-radius: rem(1.6);
border-top-right-radius: rem(1.6);
-}
\ No newline at end of file
+}
diff --git a/src/features/dashboard/manage-dashboard/__tests__/manage-dashboard.test.tsx b/src/features/dashboard/manage-dashboard/__tests__/manage-dashboard.test.tsx
index 0d4d23ec3..ecfbf1e9b 100644
--- a/src/features/dashboard/manage-dashboard/__tests__/manage-dashboard.test.tsx
+++ b/src/features/dashboard/manage-dashboard/__tests__/manage-dashboard.test.tsx
@@ -14,6 +14,7 @@ mockUseAppManager.mockImplementation(() => ({
getApps: jest.fn(),
apps: undefined,
tokens: undefined,
+ updateCurrentTab: jest.fn(),
}));
jest.mock('@site/src/hooks/useDeviceType');
@@ -45,6 +46,7 @@ describe('ManageDashboard', () => {
apps: [],
tokens: [],
getApps: jest.fn(),
+ updateCurrentTab: jest.fn(),
}));
mockDeviceType.mockImplementation(() => ({
deviceType: 'mobile',
@@ -60,6 +62,7 @@ describe('ManageDashboard', () => {
apps: [],
tokens: [],
getApps: mockGetApps,
+ updateCurrentTab: jest.fn(),
}));
render(
);
@@ -105,6 +108,7 @@ describe('ManageDashboard', () => {
apps: [],
tokens: [],
setAppRegisterModalOpen: mockModalOpenSetter,
+ updateCurrentTab: jest.fn(),
}));
render(
);
@@ -127,6 +131,7 @@ describe('ManageDashboard', () => {
tokens: [],
setAppRegisterModalOpen: mockModalOpenSetter,
app_register_modal_open: true,
+ updateCurrentTab: jest.fn(),
}));
render(
);
@@ -145,6 +150,7 @@ describe('ManageDashboard', () => {
tokens: [],
setAppRegisterModalOpen: mockModalOpenSetter,
app_register_modal_open: true,
+ updateCurrentTab: jest.fn(),
}));
render(
);
diff --git a/src/features/dashboard/manage-dashboard/index.tsx b/src/features/dashboard/manage-dashboard/index.tsx
index e8fbea2c2..915ddff18 100644
--- a/src/features/dashboard/manage-dashboard/index.tsx
+++ b/src/features/dashboard/manage-dashboard/index.tsx
@@ -8,21 +8,18 @@ import useWS from '@site/src/hooks/useWs';
import useDeviceType from '@site/src/hooks/useDeviceType';
import { RegisterAppDialogError } from '../components/Dialogs/RegisterAppDialogError';
import { AppRegisterSuccessModal } from '../components/Modals/AppRegisterSuccessModal';
+import AppManagement from '../manage-apps';
import './manage-dashboard.scss';
const ManageDashboard = () => {
- const { apps, getApps, setAppRegisterModalOpen } = useAppManager();
+ const { apps, getApps, setAppRegisterModalOpen, currentTab, updateCurrentTab } = useAppManager();
const { tokens } = useApiToken();
const { send: registerApp, error, clear, data, is_loading } = useWS('app_register');
const { deviceType } = useDeviceType();
const [is_desktop, setIsDesktop] = useState(true);
useEffect(() => {
- if (deviceType.includes('desktop')) {
- setIsDesktop(true);
- } else {
- setIsDesktop(false);
- }
+ setIsDesktop(deviceType.includes('desktop'));
}, [deviceType]);
useEffect(() => {
@@ -37,6 +34,14 @@ const ManageDashboard = () => {
getApps();
}, [getApps]);
+ useEffect(() => {
+ if (!apps?.length && !tokens?.length) {
+ updateCurrentTab('REGISTER_APP');
+ } else {
+ updateCurrentTab('MANAGE_APPS');
+ }
+ }, [tokens, apps, updateCurrentTab]);
+
const submit = useCallback(
(data) => {
const { name } = data;
@@ -54,6 +59,18 @@ const ManageDashboard = () => {
);
+
+ const renderScreen = () => {
+ switch (currentTab) {
+ case 'REGISTER_APP':
+ return