refactor(Marketplace): Install private apps page to TypeScript (#31404)

Co-authored-by: Douglas Gubert <1810309+d-gubert@users.noreply.github.com>
Co-authored-by: Tasso Evangelista <2263066+tassoevan@users.noreply.github.com>

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx

@@ -4,7 +4,7 @@ import type { ReactElement } from 'react';
 import React from 'react';
 
 import { useFormatDateAndTime } from '../../../../../hooks/useFormatDateAndTime';
-import AccordionLoading from '../../../AccordionLoading';
+import AccordionLoading from '../../../components/AccordionLoading';
 import { useLogs } from '../../../hooks/useLogs';
 import AppLogsItem from './AppLogsItem';
 

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppReleases/AppReleases.tsx

@@ -5,10 +5,9 @@ import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import AccordionLoading from '../../../AccordionLoading';
+import AccordionLoading from '../../../components/AccordionLoading';
 import AppReleasesItem from './AppReleasesItem';
 
-// TODO: replace useEndpointData
 const AppReleases = ({ id }: { id: App['id'] }): ReactElement => {
 	const getVersions = useEndpoint('GET', '/apps/:id/versions', { id });
 	const dispatchToastMessage = useToastMessageDispatch();

apps/meteor/client/views/marketplace/AppInstallPage.tsx

@@ -0,0 +1,94 @@
+import { Button, ButtonGroup, Icon, Field, FieldGroup, FieldLabel, FieldRow, TextInput, Callout } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useTranslation, useRouter, useSearchParameter } from '@rocket.chat/ui-contexts';
+import React, { useCallback } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+import { Page, PageHeader, PageScrollableContent } from '../../components/Page';
+import { useSingleFileInput } from '../../hooks/useSingleFileInput';
+import { useInstallApp } from './hooks/useInstallApp';
+
+const PLACEHOLDER_URL = 'https://rocket.chat/apps/package.zip';
+
+const AppInstallPage = () => {
+	const t = useTranslation();
+	const router = useRouter();
+
+	const queryUrl = useSearchParameter('url');
+
+	const { control, setValue, watch } = useForm<{ file: File; url: string }>({ defaultValues: { url: queryUrl || '' } });
+	const { file, url } = watch();
+	const { install, isInstalling } = useInstallApp(file, url);
+
+	const [handleUploadButtonClick] = useSingleFileInput((value) => setValue('file', value), 'app');
+
+	const handleCancel = useCallback(() => {
+		router.navigate({
+			name: 'marketplace',
+			params: {
+				context: 'private',
+				page: 'list',
+			},
+		});
+	}, [router]);
+
+	const urlField = useUniqueId();
+	const fileField = useUniqueId();
+
+	return (
+		<Page flexDirection='column'>
+			<PageHeader title={t('App_Installation')} />
+			<PageScrollableContent>
+				<FieldGroup display='flex' flexDirection='column' alignSelf='center' maxWidth='x600' w='full'>
+					<Field>
+						<FieldLabel htmlFor={urlField}>{t('App_Url_to_Install_From')}</FieldLabel>
+						<Callout type='warning' title={t('App_Installation_Deprecation_Title')}>
+							{t('App_Installation_Deprecation')}
+						</Callout>
+						<FieldRow>
+							<Controller
+								name='url'
+								control={control}
+								render={({ field }) => (
+									<TextInput id={urlField} placeholder={PLACEHOLDER_URL} addon={<Icon name='permalink' size='x20' />} {...field} />
+								)}
+							/>
+						</FieldRow>
+					</Field>
+					<Field>
+						<FieldLabel htmlFor={fileField}>{t('App_Url_to_Install_From_File')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								name='file'
+								control={control}
+								render={({ field }) => (
+									<TextInput
+										id={fileField}
+										readOnly
+										{...field}
+										value={field.value?.name || ''}
+										addon={
+											<Button icon='upload' small primary onClick={handleUploadButtonClick} mb='neg-x4' mie='neg-x8'>
+												{t('Browse_Files')}
+											</Button>
+										}
+									/>
+								)}
+							/>
+						</FieldRow>
+					</Field>
+					<Field>
+						<ButtonGroup>
+							<Button disabled={!url && !file?.name} loading={isInstalling} onClick={install}>
+								{t('Install')}
+							</Button>
+							<Button onClick={handleCancel}>{t('Cancel')}</Button>
+						</ButtonGroup>
+					</Field>
+				</FieldGroup>
+			</PageScrollableContent>
+		</Page>
+	);
+};
+
+export default AppInstallPage;

apps/meteor/client/views/marketplace/components/AccordionLoading.tsx

@@ -0,0 +1,14 @@
+import { Skeleton } from '@rocket.chat/fuselage';
+import React from 'react';
+
+const SKELETON_ITEMS = 3;
+
+const AccordionLoading = () => (
+	<>
+		{Array.from({ length: SKELETON_ITEMS }, (_v, k) => (
+			<Skeleton key={k} variant='rect' height='80px' m='2px' />
+		))}
+	</>
+);
+
+export default AccordionLoading;