From ee9ae97179a1f116d57eb243759f3137d4ff48b2 Mon Sep 17 00:00:00 2001 From: rique223 Date: Thu, 13 Oct 2022 17:31:18 -0300 Subject: [PATCH 1/8] fix: :bug: Marketplace app details page back-button behavior Fixed the behavior of the marketplace app details page back button. Now it will return the user to the page they accessed the app details from. Also, refactored the overall routing of marketplace and removed the admin-apps route as everything is now handled by the admin-marketplace route. --- .../AdministrationList/AppsModelList.tsx | 5 ++- .../views/admin/apps/AppDetailsPage.tsx | 23 ++++------- .../client/views/admin/apps/AppInstallPage.js | 41 +++++++++++++++---- .../meteor/client/views/admin/apps/AppMenu.js | 22 ++++++++-- .../meteor/client/views/admin/apps/AppRow.tsx | 35 ++++++++-------- .../client/views/admin/apps/AppsPage.tsx | 30 ++++++++------ .../views/admin/apps/AppsPageContent.tsx | 21 +++++++--- .../client/views/admin/apps/AppsRoute.tsx | 14 ++++--- apps/meteor/client/views/admin/routes.tsx | 14 ++++--- yarn.lock | 2 +- 10 files changed, 128 insertions(+), 79 deletions(-) diff --git a/apps/meteor/client/components/AdministrationList/AppsModelList.tsx b/apps/meteor/client/components/AdministrationList/AppsModelList.tsx index 3f9291fe2cc77..e402ffffa87b6 100644 --- a/apps/meteor/client/components/AdministrationList/AppsModelList.tsx +++ b/apps/meteor/client/components/AdministrationList/AppsModelList.tsx @@ -15,6 +15,7 @@ type AppsModelListProps = { const AppsModelList: FC = ({ appBoxItems, showManageApps, closeList }) => { const t = useTranslation(); const marketplaceRoute = useRoute('admin-marketplace'); + const page = 'list'; return ( <> @@ -26,7 +27,7 @@ const AppsModelList: FC = ({ appBoxItems, showManageApps, cl icon='store' text={t('Marketplace')} action={(): void => { - marketplaceRoute.push(); + marketplaceRoute.push({ context: 'all', page }); closeList(); }} /> @@ -34,7 +35,7 @@ const AppsModelList: FC = ({ appBoxItems, showManageApps, cl icon='cube' text={t('Installed')} action={(): void => { - marketplaceRoute.push({ context: 'installed' }); + marketplaceRoute.push({ context: 'installed', page }); closeList(); }} /> diff --git a/apps/meteor/client/views/admin/apps/AppDetailsPage.tsx b/apps/meteor/client/views/admin/apps/AppDetailsPage.tsx index 1eee7d1993467..eb96628f50bdc 100644 --- a/apps/meteor/client/views/admin/apps/AppDetailsPage.tsx +++ b/apps/meteor/client/views/admin/apps/AppDetailsPage.tsx @@ -26,18 +26,19 @@ const AppDetailsPage: FC<{ id: string }> = function AppDetailsPage({ id }) { const settingsRef = useRef>({}); const appData = useAppInfo(id); - const [routeName, urlParams] = useCurrentRoute(); - const appsRoute = useRoute('admin-apps'); - const marketplaceRoute = useRoute('admin-marketplace'); - const tab = useRouteParameter('tab'); - const [currentRouteName] = useCurrentRoute(); if (!currentRouteName) { throw new Error('No current route name'); } - const router = useRoute(currentRouteName); - const handleReturn = useMutableCallback((): void => router.push({})); + + const [, urlParams] = useCurrentRoute(); + const tab = useRouteParameter('tab'); + const context = useRouteParameter('context'); + + const handleReturn = useMutableCallback((): void => { + context && router.push({ context, page: 'list' }); + }); const { installed, settings, privacyPolicySummary, permissions, tosLink, privacyLink, marketplace } = appData || {}; const isSecurityVisible = privacyPolicySummary || permissions || tosLink || privacyLink; @@ -60,13 +61,7 @@ const AppDetailsPage: FC<{ id: string }> = function AppDetailsPage({ id }) { }, [id, settings]); const handleTabClick = (tab: 'details' | 'security' | 'releases' | 'settings' | 'logs'): void => { - if (routeName === 'admin-marketplace') { - marketplaceRoute.replace({ ...urlParams, tab }); - } - - if (routeName === 'admin-apps') { - appsRoute.replace({ ...urlParams, tab }); - } + router.replace({ ...urlParams, tab }); }; return ( diff --git a/apps/meteor/client/views/admin/apps/AppInstallPage.js b/apps/meteor/client/views/admin/apps/AppInstallPage.js index 4ea0e0ad479df..9fd73862aae80 100644 --- a/apps/meteor/client/views/admin/apps/AppInstallPage.js +++ b/apps/meteor/client/views/admin/apps/AppInstallPage.js @@ -1,5 +1,13 @@ import { Button, ButtonGroup, Icon, Field, FieldGroup, TextInput, Throbber } from '@rocket.chat/fuselage'; -import { useSetModal, useRoute, useQueryStringParameter, useEndpoint, useUpload, useTranslation } from '@rocket.chat/ui-contexts'; +import { + useSetModal, + useRoute, + useQueryStringParameter, + useEndpoint, + useUpload, + useTranslation, + useCurrentRoute, +} from '@rocket.chat/ui-contexts'; import React, { useCallback, useEffect, useState } from 'react'; import { Apps } from '../../../../app/apps/client/orchestrator'; @@ -8,7 +16,8 @@ import { useFileInput } from '../../../hooks/useFileInput'; import { useForm } from '../../../hooks/useForm'; import AppPermissionsReviewModal from './AppPermissionsReviewModal'; import AppUpdateModal from './AppUpdateModal'; -import { handleInstallError } from './helpers'; +import { useAppsReload } from './AppsContext'; +import { handleAPIError, handleInstallError } from './helpers'; import { getManifestFromZippedApp } from './lib/getManifestFromZippedApp'; const placeholderUrl = 'https://rocket.chat/apps/package.zip'; @@ -16,7 +25,14 @@ const placeholderUrl = 'https://rocket.chat/apps/package.zip'; function AppInstallPage() { const t = useTranslation(); - const appsRoute = useRoute('admin-apps'); + const reload = useAppsReload(); + + const [currentRouteName] = useCurrentRoute(); + if (!currentRouteName) { + throw new Error('No current route name'); + } + const router = useRoute(currentRouteName); + const setModal = useSetModal(); const appId = useQueryStringParameter('id'); @@ -52,13 +68,20 @@ function AppInstallPage() { fileData.append('app', appFile, appFile.name); fileData.append('permissions', JSON.stringify(permissionsGranted)); - if (appId) { - await uploadUpdateApp(fileData); - } else { - app = await uploadApp(fileData); + try { + if (appId) { + await uploadUpdateApp(fileData); + } else { + app = await uploadApp(fileData); + } + } catch (e) { + handleAPIError(e); } - appsRoute.push({ context: 'details', id: appId || app.app.id }); + router.push({ context: 'installed', page: 'info', id: appId || app.app.id }); + + reload(); + setModal(null); }; @@ -123,7 +146,7 @@ function AppInstallPage() { }; const handleCancel = () => { - appsRoute.push(); + router.push({ context: 'all', page: 'list' }); }; return ( diff --git a/apps/meteor/client/views/admin/apps/AppMenu.js b/apps/meteor/client/views/admin/apps/AppMenu.js index b0d12d2cd8822..b1f82302e3c7d 100644 --- a/apps/meteor/client/views/admin/apps/AppMenu.js +++ b/apps/meteor/client/views/admin/apps/AppMenu.js @@ -1,5 +1,13 @@ import { Box, Icon, Menu } from '@rocket.chat/fuselage'; -import { useSetModal, useMethod, useEndpoint, useTranslation, useRoute, useRouteParameter } from '@rocket.chat/ui-contexts'; +import { + useSetModal, + useMethod, + useEndpoint, + useTranslation, + useRoute, + useRouteParameter, + useCurrentRoute, +} from '@rocket.chat/ui-contexts'; import React, { useMemo, useCallback } from 'react'; import CloudLoginModal from './CloudLoginModal'; @@ -11,7 +19,13 @@ function AppMenu({ app, ...props }) { const t = useTranslation(); const setModal = useSetModal(); const checkUserLoggedIn = useMethod('cloud:checkUserLoggedIn'); - const appsRoute = useRoute('admin-apps'); + + const [currentRouteName] = useCurrentRoute(); + if (!currentRouteName) { + throw new Error('No current route name'); + } + const router = useRoute(currentRouteName); + const context = useRouteParameter('context'); const setAppStatus = useEndpoint('POST', `/apps/${app.id}/status`); @@ -67,8 +81,8 @@ function AppMenu({ app, ...props }) { }, [checkUserLoggedIn, setModal, closeModal, buildExternalUrl, app.id, app.purchaseType, syncApp]); const handleViewLogs = useCallback(() => { - appsRoute.push({ context: 'details', id: app.id, version: app.version, tab: 'logs' }); - }, [app.id, app.version, appsRoute]); + router.push({ context, page: 'info', id: app.id, version: app.version, tab: 'logs' }); + }, [app.id, app.version, context, router]); const handleDisable = useCallback(() => { const confirm = async () => { diff --git a/apps/meteor/client/views/admin/apps/AppRow.tsx b/apps/meteor/client/views/admin/apps/AppRow.tsx index f71fe26f2b593..e4d98e4eaccd3 100644 --- a/apps/meteor/client/views/admin/apps/AppRow.tsx +++ b/apps/meteor/client/views/admin/apps/AppRow.tsx @@ -2,7 +2,7 @@ import { css } from '@rocket.chat/css-in-js'; import { Box } from '@rocket.chat/fuselage'; import { useBreakpoints } from '@rocket.chat/fuselage-hooks'; import colors from '@rocket.chat/fuselage-tokens/colors'; -import { useRoute } from '@rocket.chat/ui-contexts'; +import { useCurrentRoute, useRoute, useRouteParameter } from '@rocket.chat/ui-contexts'; import React, { FC, memo, KeyboardEvent, MouseEvent } from 'react'; import AppAvatar from '../../../components/avatar/AppAvatar'; @@ -12,30 +12,27 @@ import BundleChips from './BundleChips'; import { App } from './types'; const AppRow: FC = (props) => { - const { name, id, description, iconFileData, marketplaceVersion, iconFileContent, installed, isSubscribed, isMarketplace, bundledIn } = - props; + const { name, id, description, iconFileData, marketplaceVersion, iconFileContent, installed, isSubscribed, bundledIn } = props; const breakpoints = useBreakpoints(); const isDescriptionVisible = breakpoints.includes('xl'); - const appsRoute = useRoute('admin-apps'); - const marketplaceRoute = useRoute('admin-marketplace'); + const [currentRouteName] = useCurrentRoute(); + if (!currentRouteName) { + throw new Error('No current route name'); + } + const router = useRoute(currentRouteName); - const handleClick = (): void => { - if (isMarketplace) { - marketplaceRoute.push({ - context: 'details', + const context = useRouteParameter('context'); + + const handleNavigateToAppInfo = (): void => { + context && + router.push({ + context, + page: 'info', version: marketplaceVersion, id, }); - return; - } - - appsRoute.push({ - context: 'details', - version: marketplaceVersion, - id, - }); }; const handleKeyDown = (e: KeyboardEvent): void => { @@ -43,7 +40,7 @@ const AppRow: FC = (props) => { return; } - handleClick(); + handleNavigateToAppInfo(); }; const preventClickPropagation = (e: MouseEvent): void => { @@ -64,7 +61,7 @@ const AppRow: FC = (props) => { key={id} role='link' tabIndex={0} - onClick={handleClick} + onClick={handleNavigateToAppInfo} onKeyDown={handleKeyDown} display='flex' flexDirection='row' diff --git a/apps/meteor/client/views/admin/apps/AppsPage.tsx b/apps/meteor/client/views/admin/apps/AppsPage.tsx index f716e34d39eee..6a42b04474861 100644 --- a/apps/meteor/client/views/admin/apps/AppsPage.tsx +++ b/apps/meteor/client/views/admin/apps/AppsPage.tsx @@ -1,5 +1,5 @@ import { Button, ButtonGroup, Icon, Skeleton, Tabs } from '@rocket.chat/fuselage'; -import { useRoute, useSetting, useMethod, useTranslation } from '@rocket.chat/ui-contexts'; +import { useRoute, useSetting, useMethod, useTranslation, useCurrentRoute, useRouteParameter } from '@rocket.chat/ui-contexts'; import React, { useEffect, useState, ReactElement } from 'react'; import Page from '../../../components/Page'; @@ -13,11 +13,17 @@ const AppsPage = ({ isMarketplace }: AppsPageProps): ReactElement => { const t = useTranslation(); const isDevelopmentMode = useSetting('Apps_Framework_Development_Mode'); - const marketplaceRoute = useRoute('admin-marketplace'); - const appsRoute = useRoute('admin-apps'); const cloudRoute = useRoute('cloud'); const checkUserLoggedIn = useMethod('cloud:checkUserLoggedIn'); + const [currentRouteName] = useCurrentRoute(); + if (!currentRouteName) { + throw new Error('No current route name'); + } + const router = useRoute(currentRouteName); + + const context = useRouteParameter('context'); + const [isLoggedInCloud, setIsLoggedInCloud] = useState(); useEffect(() => { @@ -32,9 +38,13 @@ const AppsPage = ({ isMarketplace }: AppsPageProps): ReactElement => { }; const handleUploadButtonClick = (): void => { - appsRoute.push({ context: 'install' }); + router.push({ context: 'install' }); }; + const handleMarketplaceTabClick = (): void => router.push({ context: 'all', page: 'list' }); + + const handleInstalledTabClick = (): void => router.push({ context: 'installed', page: 'list' }); + return ( @@ -58,21 +68,15 @@ const AppsPage = ({ isMarketplace }: AppsPageProps): ReactElement => { - marketplaceRoute.push({ context: '' })} selected={isMarketplace}> + {t('Marketplace')} - marketplaceRoute.push({ context: 'installed' })} - selected={!isMarketplace} - mbe='neg-x4' - borderWidth='0' - borderBlockWidth='x4' - > + {t('Installed')} - + ); diff --git a/apps/meteor/client/views/admin/apps/AppsPageContent.tsx b/apps/meteor/client/views/admin/apps/AppsPageContent.tsx index 422916a24be77..72a4599dd8aa1 100644 --- a/apps/meteor/client/views/admin/apps/AppsPageContent.tsx +++ b/apps/meteor/client/views/admin/apps/AppsPageContent.tsx @@ -1,6 +1,6 @@ import { Pagination, Divider } from '@rocket.chat/fuselage'; import { useDebouncedState } from '@rocket.chat/fuselage-hooks'; -import { useRoute, useTranslation } from '@rocket.chat/ui-contexts'; +import { useCurrentRoute, useRoute, useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts'; import React, { ReactElement, useMemo, useState } from 'react'; import { usePagination } from '../../../components/GenericTable/hooks/usePagination'; @@ -19,14 +19,21 @@ import { useCategories } from './hooks/useCategories'; import { useFilteredApps } from './hooks/useFilteredApps'; import { useRadioToggle } from './hooks/useRadioToggle'; -const AppsPageContent = ({ isMarketplace }: { isMarketplace: boolean }): ReactElement => { +const AppsPageContent = (): ReactElement => { const t = useTranslation(); const { marketplaceApps, installedApps } = useAppsResult(); const [text, setText] = useDebouncedState('', 500); const reload = useAppsReload(); const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination(); - const marketplaceRoute = useRoute('admin-marketplace'); + const [currentRouteName] = useCurrentRoute(); + if (!currentRouteName) { + throw new Error('No current route name'); + } + const router = useRoute(currentRouteName); + + const context = useRouteParameter('context'); + const isMarketplace = context === 'all'; const [freePaidFilterStructure, setFreePaidFilterStructure] = useState({ label: t('Filter_By_Price'), @@ -85,6 +92,10 @@ const AppsPageContent = ({ isMarketplace }: { isMarketplace: boolean }): ReactEl sortFilterStructure.items.find((item) => item.checked)?.id !== 'mru' || selectedCategories.length > 0; + const handleEmptyStateCTAClick = (): void => { + router.push({ context: 'all', page: 'list' }); + }; + return ( <> marketplaceRoute.push({ context: '' })} + onButtonClick={handleEmptyStateCTAClick} /> )} - {noInstalledAppsFound && marketplaceRoute.push({ context: '' })} />} + {noInstalledAppsFound && } {appsResult.phase === AsyncStatePhase.REJECTED && } ); diff --git a/apps/meteor/client/views/admin/apps/AppsRoute.tsx b/apps/meteor/client/views/admin/apps/AppsRoute.tsx index 0fe081d2fb101..fea79fb968e28 100644 --- a/apps/meteor/client/views/admin/apps/AppsRoute.tsx +++ b/apps/meteor/client/views/admin/apps/AppsRoute.tsx @@ -10,15 +10,16 @@ import AppsProvider from './AppsProvider'; const AppsRoute: FC = () => { const [isLoading, setLoading] = useState(true); - const canViewAppsAndMarketplace = usePermission('manage-apps'); + const canManageApps = usePermission('manage-apps'); const isAppsEngineEnabled = useMethod('apps/is-enabled'); const appsWhatIsItRoute = useRoute('admin-apps-disabled'); + const marketplaceRoute = useRoute('admin-marketplace'); useEffect(() => { let mounted = true; const initialize = async (): Promise => { - if (!canViewAppsAndMarketplace) { + if (!canManageApps) { return; } @@ -39,15 +40,16 @@ const AppsRoute: FC = () => { return (): void => { mounted = false; }; - }, [canViewAppsAndMarketplace, isAppsEngineEnabled, appsWhatIsItRoute]); + }, [canManageApps, isAppsEngineEnabled, appsWhatIsItRoute, marketplaceRoute]); const context = useRouteParameter('context'); const isMarketplace = !context; const id = useRouteParameter('id'); + const page = useRouteParameter('page'); - if (!canViewAppsAndMarketplace) { + if (!canManageApps) { return ; } @@ -57,8 +59,8 @@ const AppsRoute: FC = () => { return ( - {((!context || context === 'installed') && ) || - (id && context === 'details' && ) || + {(page === 'list' && ) || + (id && page === 'info' && ) || (context === 'install' && )} ); diff --git a/apps/meteor/client/views/admin/routes.tsx b/apps/meteor/client/views/admin/routes.tsx index b00a8dfcc7b8d..dd3a08c2015d5 100644 --- a/apps/meteor/client/views/admin/routes.tsx +++ b/apps/meteor/client/views/admin/routes.tsx @@ -21,14 +21,16 @@ registerAdminRoute('/apps/what-is-it', { component: lazy(() => import('./apps/AppsWhatIsIt')), }); -registerAdminRoute('/marketplace/:context?/:id?/:version?/:tab?', { +registerAdminRoute('/marketplace/:context?/:page?/:id?/:version?/:tab?', { name: 'admin-marketplace', component: lazy(() => import('./apps/AppsRoute')), -}); - -registerAdminRoute('/apps/:context?/:id?/:version?/:tab?', { - name: 'admin-apps', - component: lazy(() => import('./apps/AppsRoute')), + triggersEnter: [ + (context, redirect): void => { + if (!context.params.context) { + redirect('/admin/marketplace/all/list'); + } + }, + ], }); registerAdminRoute('/info', { diff --git a/yarn.lock b/yarn.lock index 3158cedad7bfa..68a60c369b605 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23117,7 +23117,7 @@ __metadata: optional: true bin: lessc: ./bin/lessc - checksum: c9b8c0e865427112c48a9cac36f14964e130577743c29d56a6d93b5812b70846b04ccaa364acf1e8d75cee3855215ec0a2d8d9de569c80e774f10b6245f39b7d + checksum: 61568b56b5289fdcfe3d51baf3c13e7db7140022c0a37ef0ae343169f0de927a4b4f4272bc10c20101796e8ee79e934e024051321bba93b3ae071f734309bd98 languageName: node linkType: hard From b3f47711c2f1a85d25332deedc5be74c5bfdfd63 Mon Sep 17 00:00:00 2001 From: rique223 Date: Thu, 13 Oct 2022 18:56:14 -0300 Subject: [PATCH 2/8] test: :white_check_mark: Update AppsModelList tests to work with new marketplace routing --- .../client/components/AdministrationList/AppsModelList.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/tests/unit/client/components/AdministrationList/AppsModelList.spec.tsx b/apps/meteor/tests/unit/client/components/AdministrationList/AppsModelList.spec.tsx index 8b97900ee1a0b..a15af26cb14d4 100644 --- a/apps/meteor/tests/unit/client/components/AdministrationList/AppsModelList.spec.tsx +++ b/apps/meteor/tests/unit/client/components/AdministrationList/AppsModelList.spec.tsx @@ -67,7 +67,7 @@ describe('components/AdministrationList/AppsModelList', () => { const button = screen.getByText('Installed'); userEvent.click(button); - await waitFor(() => expect(pushRoute).to.have.been.called.with('admin-marketplace', { context: 'installed' })); + await waitFor(() => expect(pushRoute).to.have.been.called.with('admin-marketplace', { context: 'installed', page: 'list' })); await waitFor(() => expect(closeList).to.have.been.called()); }); From 700e67ac892a2f38b98ce103403fb79e5849b2d9 Mon Sep 17 00:00:00 2001 From: rique223 Date: Thu, 13 Oct 2022 23:01:09 -0300 Subject: [PATCH 3/8] Fix admin menu tests --- apps/meteor/tests/e2e/administration-menu.spec.ts | 4 ++-- yarn.lock | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/meteor/tests/e2e/administration-menu.spec.ts b/apps/meteor/tests/e2e/administration-menu.spec.ts index 4da0bf93361fe..007846845c3de 100644 --- a/apps/meteor/tests/e2e/administration-menu.spec.ts +++ b/apps/meteor/tests/e2e/administration-menu.spec.ts @@ -35,13 +35,13 @@ test.describe.serial('administration-menu', () => { test('expect open app marketplace page', async ({ page }) => { await poHomeDiscussion.sidenav.openAdministrationByLabel('Marketplace'); - await expect(page).toHaveURL('admin/marketplace'); + await expect(page).toHaveURL('admin/marketplace/all/list'); }); test('expect open app installed page', async ({ page }) => { await poHomeDiscussion.sidenav.openAdministrationByLabel('Installed'); - await expect(page).toHaveURL('admin/marketplace/installed'); + await expect(page).toHaveURL('admin/marketplace/installed/list'); }); test.describe('user', () => { diff --git a/yarn.lock b/yarn.lock index 02330733a9588..9342b6ded4872 100644 --- a/yarn.lock +++ b/yarn.lock @@ -22995,7 +22995,7 @@ __metadata: resolution: "lamejs@https://github.com/zhuker/lamejs.git#commit=582bbba6a12f981b984d8fb9e1874499fed85675" dependencies: use-strict: 1.0.1 - checksum: ed7f6f1c9629b53c17023eb04b4fc5a222e9c34fcb4a2f61214488fc64e5cfea825e4588d959c5fb20f3a91f0120103fa60307dd43df995d498ff5ddb6200cd9 + checksum: fa829e0c170a65573e653b4d908a44aaf06a50e1bbade3b1217a300a03ccd59a537e294e2d924a584f9d70c7726a12d4c3af9c675436d48d08be5fb94b5eb400 languageName: node linkType: hard @@ -23117,7 +23117,7 @@ __metadata: optional: true bin: lessc: ./bin/lessc - checksum: 61568b56b5289fdcfe3d51baf3c13e7db7140022c0a37ef0ae343169f0de927a4b4f4272bc10c20101796e8ee79e934e024051321bba93b3ae071f734309bd98 + checksum: c9b8c0e865427112c48a9cac36f14964e130577743c29d56a6d93b5812b70846b04ccaa364acf1e8d75cee3855215ec0a2d8d9de569c80e774f10b6245f39b7d languageName: node linkType: hard From 6b021face1780e30e4f30a3e3da8b66e81d7cbcc Mon Sep 17 00:00:00 2001 From: rique223 Date: Tue, 18 Oct 2022 17:43:40 -0300 Subject: [PATCH 4/8] Solve upload app page cancel button behavior --- apps/meteor/client/views/admin/apps/AppInstallPage.js | 5 ++++- apps/meteor/client/views/admin/apps/AppsPage.tsx | 2 +- apps/meteor/client/views/admin/apps/AppsRoute.tsx | 2 +- yarn.lock | 2 +- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/apps/meteor/client/views/admin/apps/AppInstallPage.js b/apps/meteor/client/views/admin/apps/AppInstallPage.js index 9fd73862aae80..5a279d79113b5 100644 --- a/apps/meteor/client/views/admin/apps/AppInstallPage.js +++ b/apps/meteor/client/views/admin/apps/AppInstallPage.js @@ -7,6 +7,7 @@ import { useUpload, useTranslation, useCurrentRoute, + useRouteParameter, } from '@rocket.chat/ui-contexts'; import React, { useCallback, useEffect, useState } from 'react'; @@ -33,6 +34,8 @@ function AppInstallPage() { } const router = useRoute(currentRouteName); + const context = useRouteParameter('context'); + const setModal = useSetModal(); const appId = useQueryStringParameter('id'); @@ -146,7 +149,7 @@ function AppInstallPage() { }; const handleCancel = () => { - router.push({ context: 'all', page: 'list' }); + router.push({ context, page: 'list' }); }; return ( diff --git a/apps/meteor/client/views/admin/apps/AppsPage.tsx b/apps/meteor/client/views/admin/apps/AppsPage.tsx index 6a42b04474861..1a7a336331b88 100644 --- a/apps/meteor/client/views/admin/apps/AppsPage.tsx +++ b/apps/meteor/client/views/admin/apps/AppsPage.tsx @@ -38,7 +38,7 @@ const AppsPage = ({ isMarketplace }: AppsPageProps): ReactElement => { }; const handleUploadButtonClick = (): void => { - router.push({ context: 'install' }); + context && router.push({ context, page: 'install' }); }; const handleMarketplaceTabClick = (): void => router.push({ context: 'all', page: 'list' }); diff --git a/apps/meteor/client/views/admin/apps/AppsRoute.tsx b/apps/meteor/client/views/admin/apps/AppsRoute.tsx index fea79fb968e28..c5b24ec899462 100644 --- a/apps/meteor/client/views/admin/apps/AppsRoute.tsx +++ b/apps/meteor/client/views/admin/apps/AppsRoute.tsx @@ -61,7 +61,7 @@ const AppsRoute: FC = () => { {(page === 'list' && ) || (id && page === 'info' && ) || - (context === 'install' && )} + (page === 'install' && )} ); }; diff --git a/yarn.lock b/yarn.lock index 9342b6ded4872..f4ebfbcd83c1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23117,7 +23117,7 @@ __metadata: optional: true bin: lessc: ./bin/lessc - checksum: c9b8c0e865427112c48a9cac36f14964e130577743c29d56a6d93b5812b70846b04ccaa364acf1e8d75cee3855215ec0a2d8d9de569c80e774f10b6245f39b7d + checksum: 61568b56b5289fdcfe3d51baf3c13e7db7140022c0a37ef0ae343169f0de927a4b4f4272bc10c20101796e8ee79e934e024051321bba93b3ae071f734309bd98 languageName: node linkType: hard From 9e31fc3168f6cef983921d384089e3e44f7d7c41 Mon Sep 17 00:00:00 2001 From: rique223 Date: Tue, 1 Nov 2022 18:23:42 -0300 Subject: [PATCH 5/8] Typecheck --- apps/meteor/client/views/admin/apps/AppsList/AppRow.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/views/admin/apps/AppsList/AppRow.tsx b/apps/meteor/client/views/admin/apps/AppsList/AppRow.tsx index 9ce4475d5e367..b811c2b7aa91f 100644 --- a/apps/meteor/client/views/admin/apps/AppsList/AppRow.tsx +++ b/apps/meteor/client/views/admin/apps/AppsList/AppRow.tsx @@ -4,14 +4,16 @@ import { Box } from '@rocket.chat/fuselage'; import { useBreakpoints } from '@rocket.chat/fuselage-hooks'; import colors from '@rocket.chat/fuselage-tokens/colors'; import { useCurrentRoute, useRoute, useRouteParameter } from '@rocket.chat/ui-contexts'; -import React, { FC, memo, KeyboardEvent, MouseEvent } from 'react'; +import React, { memo, KeyboardEvent, MouseEvent, ReactElement } from 'react'; import AppAvatar from '../../../../components/avatar/AppAvatar'; import AppStatus from '../AppDetailsPage/tabs/AppStatus/AppStatus'; import AppMenu from '../AppMenu'; import BundleChips from '../BundleChips'; -const AppRow: FC = (props) => { +type AppRowProps = App & { isMarketplace: boolean }; + +const AppRow = (props: AppRowProps): ReactElement => { const { name, id, description, iconFileData, marketplaceVersion, iconFileContent, installed, isSubscribed, bundledIn } = props; const breakpoints = useBreakpoints(); From cc33f3e1f3df5c2537300a8ee853e58be76fbce1 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Thu, 10 Nov 2022 11:57:16 -0300 Subject: [PATCH 6/8] fix: review --- .../client/views/admin/apps/AppsPage/AppsPageContent.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/meteor/client/views/admin/apps/AppsPage/AppsPageContent.tsx b/apps/meteor/client/views/admin/apps/AppsPage/AppsPageContent.tsx index 2cd3bd18d2acb..deb1d685e4b61 100644 --- a/apps/meteor/client/views/admin/apps/AppsPage/AppsPageContent.tsx +++ b/apps/meteor/client/views/admin/apps/AppsPage/AppsPageContent.tsx @@ -92,7 +92,7 @@ const AppsPageContent = (): ReactElement => { sortFilterStructure.items.find((item) => item.checked)?.id !== 'mru' || selectedCategories.length > 0; - const handleEmptyStateCTAClick = (): void => { + const handleBack = (): void => { router.push({ context: 'all', page: 'list' }); }; @@ -141,10 +141,10 @@ const AppsPageContent = (): ReactElement => { )} - {noInstalledAppsFound && } + {noInstalledAppsFound && } {appsResult.phase === AsyncStatePhase.REJECTED && } ); From 99105f5b85f8439565494bc333b28edbd63cb500 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 10 Nov 2022 15:53:35 -0300 Subject: [PATCH 7/8] review --- .../client/views/admin/apps/AppsPage/AppsPageContent.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/meteor/client/views/admin/apps/AppsPage/AppsPageContent.tsx b/apps/meteor/client/views/admin/apps/AppsPage/AppsPageContent.tsx index deb1d685e4b61..bc34915042506 100644 --- a/apps/meteor/client/views/admin/apps/AppsPage/AppsPageContent.tsx +++ b/apps/meteor/client/views/admin/apps/AppsPage/AppsPageContent.tsx @@ -92,7 +92,7 @@ const AppsPageContent = (): ReactElement => { sortFilterStructure.items.find((item) => item.checked)?.id !== 'mru' || selectedCategories.length > 0; - const handleBack = (): void => { + const handleReturn = (): void => { router.push({ context: 'all', page: 'list' }); }; @@ -141,10 +141,10 @@ const AppsPageContent = (): ReactElement => { )} - {noInstalledAppsFound && } + {noInstalledAppsFound && } {appsResult.phase === AsyncStatePhase.REJECTED && } ); From 3349abd23b0c70d17cced251299db9e3baddb5dc Mon Sep 17 00:00:00 2001 From: rique223 Date: Thu, 10 Nov 2022 16:04:46 -0300 Subject: [PATCH 8/8] Solve wrong types review --- .../client/components/AdministrationList/AppsModelList.tsx | 4 ++-- apps/meteor/client/views/admin/apps/AppsRoute.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/meteor/client/components/AdministrationList/AppsModelList.tsx b/apps/meteor/client/components/AdministrationList/AppsModelList.tsx index e402ffffa87b6..cb6ec49e3d360 100644 --- a/apps/meteor/client/components/AdministrationList/AppsModelList.tsx +++ b/apps/meteor/client/components/AdministrationList/AppsModelList.tsx @@ -1,6 +1,6 @@ import { OptionTitle } from '@rocket.chat/fuselage'; import { useTranslation, useRoute } from '@rocket.chat/ui-contexts'; -import React, { FC } from 'react'; +import React, { ReactElement } from 'react'; import { triggerActionButtonAction } from '../../../app/ui-message/client/ActionManager'; import { IAppAccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox'; @@ -12,7 +12,7 @@ type AppsModelListProps = { closeList: () => void; }; -const AppsModelList: FC = ({ appBoxItems, showManageApps, closeList }) => { +const AppsModelList = ({ appBoxItems, showManageApps, closeList }: AppsModelListProps): ReactElement => { const t = useTranslation(); const marketplaceRoute = useRoute('admin-marketplace'); const page = 'list'; diff --git a/apps/meteor/client/views/admin/apps/AppsRoute.tsx b/apps/meteor/client/views/admin/apps/AppsRoute.tsx index 880d25ce6913c..a014a94c0cc66 100644 --- a/apps/meteor/client/views/admin/apps/AppsRoute.tsx +++ b/apps/meteor/client/views/admin/apps/AppsRoute.tsx @@ -1,5 +1,5 @@ import { useRouteParameter, useRoute, usePermission, useMethod } from '@rocket.chat/ui-contexts'; -import React, { useState, useEffect, FC } from 'react'; +import React, { useState, useEffect, ReactElement } from 'react'; import PageSkeleton from '../../../components/PageSkeleton'; import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage'; @@ -8,7 +8,7 @@ import AppInstallPage from './AppInstallPage'; import AppsPage from './AppsPage/AppsPage'; import AppsProvider from './AppsProvider'; -const AppsRoute: FC = () => { +const AppsRoute = (): ReactElement => { const [isLoading, setLoading] = useState(true); const canManageApps = usePermission('manage-apps'); const isAppsEngineEnabled = useMethod('apps/is-enabled');