eduvia/workavia-drive
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨 [element-identifier]: Update test id convention

Browse Source
This commit is contained in:
lethemanh
2024-12-12 13:33:58 +07:00
parent 6d3be1fa28
commit c59545aff1
52 changed files with 220 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tdrive/frontend/src/app/views/client/body/drive/browser.tsx
+9 -10
View File
@@ -10,7 +10,7 @@ import { useDriveUpload } from '@features/drive/hooks/use-drive-upload';
import { DriveItemSelectedList, DriveItemSort } from '@features/drive/state/store';
import { formatBytes } from '@features/drive/utils';
import useRouterCompany from '@features/router/hooks/use-router-company';
import _, { get, set } from 'lodash';
import _ from 'lodash';
import { memo, Suspense, useCallback, useEffect, useRef, useState } from 'react';
import { atomFamily, useRecoilState, useSetRecoilState } from 'recoil';
import { DrivePreview } from '../../viewer/drive-preview';
@@ -232,10 +232,10 @@ export default memo(
inPublicSharing,
};
return isMobile ? (
<DocumentRow {...commonProps} testClassId="browser-document-row" />
<DocumentRow {...commonProps} />
) : (
<Draggable id={index} key={index}>
<DocumentRow {...commonProps} testClassId="browser-document-row" />
<DocumentRow {...commonProps} />
</Draggable>
);
}
@@ -379,7 +379,7 @@ export default memo(
"browser-share-with-me-menu-file-type"
);
}}
testClassId="browser-share-with-me-button-file-type"
testClassId="button-open-menu-file-type"
>
<span>
{filter.mimeType.key && filter.mimeType.key != 'All'
@@ -402,7 +402,7 @@ export default memo(
"browser-share-with-me-menu-people"
);
}}
testClassId="browser-share-with-me-button-people"
testClassId="button-open-menu-people"
>
<span>{Languages.t('scenes.app.shared_with_me.people')}</span>
<ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />
@@ -422,7 +422,7 @@ export default memo(
"browser-share-with-me-menu-last-modified"
);
}}
testClassId="browser-share-with-me-button-last-modified"
testClassId="button-open-menu-last-modified"
>
<span>
{filter.date.key && filter.date.key != 'All'
@@ -452,7 +452,7 @@ export default memo(
<Menu menu={() => onBuildSortContextMenu()} sortData={sortLabel} testClassId="browser-menu-sorting">
{' '}
<Button theme="outline" className="ml-4 flex flex-row items-center" testClassId="browser-button-sorting">
<Button theme="outline" className="ml-4 flex flex-row items-center" testClassId="button-sorting">
<SortIcon
className={`h-4 w-4 mr-2 -ml-1 ${
sortLabel.order === 'asc' ? 'transform rotate-180' : ''
@@ -467,7 +467,7 @@ export default memo(
{viewId !== 'shared_with_me' && (
<Menu menu={() => onBuildContextMenu(details)} testClassId="browser-menu-more">
{' '}
<Button theme="secondary" className="ml-4 flex flex-row items-center" testClassId="browser-button-more">
<Button theme="secondary" className="ml-4 flex flex-row items-center" testClassId="button-more">
<span>
{selectedCount > 1
? `${selectedCount} items`
@@ -495,7 +495,7 @@ export default memo(
onClick={() => uploadItemModal()}
theme="primary"
className="mt-4"
testClassId="browser-button-add-doc"
testClassId="button-add-doc"
>
{Languages.t('scenes.app.drive.add_doc')}
</Button>
@@ -525,7 +525,6 @@ export default memo(
setChecked(_.pickBy({ ...checked, [child.id]: v }, _.identity))
}
onBuildContextMenu={() => onBuildContextMenu(details, child)}
testClassId="browser-folder-row"
/>
</Droppable>
) : (
tdrive/frontend/src/app/views/client/body/drive/documents/common.tsx
-1
View File
@@ -9,7 +9,6 @@ export type DriveItemProps = {
checked: boolean;
onClick?: () => void;
onBuildContextMenu: () => Promise<any[]>;
testClassId?: string;
};
export type DriveItemOverlayProps = {
tdrive/frontend/src/app/views/client/body/drive/documents/document-icon.tsx
+3 -2
View File
@@ -45,9 +45,10 @@ export const DocumentIcon = (props: {
size="xs"
type="square"
title={metadata.name}
testClassId="avatar"
/>
: props.item?.is_directory
? <FolderIcon className={className + (props.blueiffyFolders || props.blueiffyFolders == null ? ' text-blue-500' : '')} />
: <SpecificFileTypeIcon className={className} />
? <FolderIcon className={className + (props.blueiffyFolders || props.blueiffyFolders == null ? ' text-blue-500' : '') + ' testid:folder-icon'} />
: <SpecificFileTypeIcon className={className + ' testid:specific-file-type-icon'} />
);
};
tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx
+1 -4
View File
@@ -31,7 +31,6 @@ export const DocumentRow = ({
checked,
onClick,
onBuildContextMenu,
testClassId,
}: DriveItemProps) => {
const history = useHistory();
const [hover, setHover] = useState(false);
@@ -45,8 +44,6 @@ export const DocumentRow = ({
// history.push(RouterServices.generateRouteFromState({ companyId: company, itemId: item.id }));
};
const testId = testClassId ? `testid:${testClassId}` : '';
return (
<div
className={
@@ -55,7 +52,7 @@ export const DocumentRow = ({
? (notSafe ? 'bg-rose-500' : 'bg-blue-500') + ' bg-opacity-10 hover:bg-opacity-25'
: 'hover:bg-zinc-500 hover:bg-opacity-10 ') +
(className || '') + ' ' +
testId
'testid:document-row'
}
id={`DR-${item.id}`}
onMouseEnter={() => setHover(true)}
tdrive/frontend/src/app/views/client/body/drive/documents/folder-row.tsx
+1 -4
View File
@@ -17,12 +17,9 @@ export const FolderRow = ({
checked,
onClick,
onBuildContextMenu,
testClassId,
}: DriveItemProps) => {
const [hover, setHover] = useState(false);
const testId = testClassId ? ` testid:${testClassId}` : '';
return (
<div
className={
@@ -32,7 +29,7 @@ export const FolderRow = ({
? 'bg-blue-500 bg-opacity-10 hover:bg-opacity-25 '
: 'hover:bg-zinc-500 hover:bg-opacity-10 ') +
(className || '') + ' ' +
testId
'testid:folder-row'
}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
tdrive/frontend/src/app/views/client/body/drive/header-path.tsx
+11 -3
View File
@@ -133,20 +133,22 @@ const PathItem = ({
const { access: trashAccess } = useDriveItem('trash');
const isInSharedWithMe = viewId === 'shared_with_me';
return (
<div className={`flex items-center ${!first ? 'overflow-hidden' : ''}`}>
<div className={`flex items-center ${!first ? 'overflow-hidden' : ''} testid:header-path-item`}>
<a
href="#"
className={`text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white ${!first ? 'overflow-hidden' : ''} testid:header-path-item`}
className={`text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white ${!first ? 'overflow-hidden' : ''} testid:item-link`}
onClick={evt => {
evt.preventDefault();
const trashMenuItems = [
{
testClassId: 'my-trash',
type: 'menu',
text: Languages.t('components.header_path.my_trash'),
onClick: () => onClick('trash_' + user?.id, ''),
},
{
testClassId: 'shared-trash',
type: 'menu',
text: Languages.t('components.header_path.shared_trash'),
onClick: () => onClick('trash', ''),
@@ -160,7 +162,13 @@ const PathItem = ({
if (first && user?.id) {
if (viewId?.includes('trash')) {
MenusManager.openMenu(trashMenuItems, { x: evt.clientX, y: evt.clientY }, 'center');
MenusManager.openMenu(
trashMenuItems,
{ x: evt.clientX, y: evt.clientY },
'center',
undefined,
'menu-trash'
);
} else {
if (viewId === 'root') {
onClick('root', '');
tdrive/frontend/src/app/views/client/body/drive/modals/confirm-delete/index.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ const ConfirmDeleteModalContent = ({ items }: { items: DriveItem[] }) => {
setSelected({});
setState({ ...state, open: false });
}}
testClassId="confirm-delete-modal-button-delete"
testClassId="button-delete"
>
Delete
</Button>
tdrive/frontend/src/app/views/client/body/drive/modals/confirm-move/index.tsx
+2 -2
View File
@@ -52,7 +52,7 @@ const ConfirmModalContent = () => {
theme="primary"
className="float-right"
onClick={handleClose}
testClassId="confirm-modal-button-move"
testClassId="button-move"
>
<>{Languages.t('components.SelectorModalContent_move_to')} '{selected[0]?.name}'</>
</Button>
@@ -68,7 +68,7 @@ export const ConfirmModal = () => {
};
return (
<Modal className="testid:confirm-modal" open={state.open} onClose={handleClose}>
<Modal className="testid:confirm-move-modal" open={state.open} onClose={handleClose}>
<ConfirmModalContent key={state.parent_id} />
</Modal>
);
tdrive/frontend/src/app/views/client/body/drive/modals/confirm-trash/index.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ const ConfirmTrashModalContent = ({ items }: { items: DriveItem[] }) => {
await refresh("trash");
setState({ ...state, open: false });
}}
testClassId="cofirm-trash-modal-button-remove"
testClassId="button-remove"
>
{Languages.t('components.ConfirmTrashModalContent_move_to_trash')}
</Button>
tdrive/frontend/src/app/views/client/body/drive/modals/manage-users/common.tsx
+2 -1
View File
@@ -19,7 +19,8 @@ export const AccessLevel = ({
className={
className +
' w-auto ' +
(level === 'none' ? '!text-rose-500 !bg-rose-100 dark-bg-rose-800' : '')
(level === 'none' ? '!text-rose-500 !bg-rose-100 dark-bg-rose-800' : '') +
' testid:select-access-level'
}
value={level || 'read'}
onChange={e => onChange(e.target.value as DriveFileAccessLevel & 'remove')}
tdrive/frontend/src/app/views/client/body/drive/modals/manage-users/index.tsx
+4 -3
View File
@@ -27,7 +27,7 @@ export const UsersModal = () => {
const [state, setState] = useRecoilState(UsersModalAtom);
const userList = useUserCompanyList();
return (
<Modal open={state.open} onClose={() => setState({ open: false })}>
<Modal className="testid:manage-users-modal" open={state.open} onClose={() => setState({ open: false })}>
<Base className="block mt-4 mb-1">
{Languages.t('components.internal-manage_root_users')}
</Base>
@@ -59,15 +59,16 @@ const UserAccessLevel = ({
//const level = role == "admin" ? "manage" : "read";
return (
<div className="p-4 border-t flex flex-row items-center justify-center">
<div className="p-4 border-t flex flex-row items-center justify-center testid:user-access-level">
<div className="shrink-0">
<Avatar
avatar={user?.thumbnail || ''}
title={!user ? '-' : currentUserService.getFullName(user)}
size="sm"
testClassId="avatar"
/>
</div>
<div className="grow ml-2">
<div className="grow ml-2 testid:username">
<Base>{username} </Base>{' '}
{user?.id === currentUser?.id && (
<Info>{Languages.t('components.internal-access_specific_rules_you')}</Info>
tdrive/frontend/src/app/views/client/body/drive/modals/properties/index.tsx
+2 -2
View File
@@ -105,7 +105,7 @@ const PropertiesModalContent = ({ id, onClose, inPublicSharing }: { id: string;
}
}}
placeholder={Languages.t('components.PropertiesModalContent_place_holder')}
testClassId="properties-modal-input-update-name"
testClassId="input-update-name"
/>
}
/>
@@ -116,7 +116,7 @@ const PropertiesModalContent = ({ id, onClose, inPublicSharing }: { id: string;
theme="primary"
loading={loading}
onClick={doSave}
testClassId="properties-modal-button-update-name"
testClassId="button-update-name"
>
{Languages.t('components.PropertiesModalContent_update_button')}
</Button>
tdrive/frontend/src/app/views/client/body/drive/modals/public-link/expiry-editor-row.tsx
+5 -5
View File
@@ -81,7 +81,7 @@ export const ExpiryEditorRow = (props: {
return <>
<BaseBlock
className={"m-4" + (disabled ? Styles.Disabled.Yes : "")}
className={"m-4" + (disabled ? Styles.Disabled.Yes : "") + ' testid:expiry-editor-row'}
disabled={disabled}
avatar={<CalendarIcon className={Styles.SmallIconClasses} />}
title={
@@ -90,7 +90,7 @@ export const ExpiryEditorRow = (props: {
{!!props.value && !isEditing &&
<>
<a
className={disabled ? Styles.Disabled.Yes : ""}
className={(disabled ? Styles.Disabled.Yes : "") + ' testid:button-edit'}
onClick={() => {
if (!disabled) {
setCurrentEditedValue(props.value);
@@ -130,7 +130,7 @@ export const ExpiryEditorRow = (props: {
else if (e.key == 'Enter')
confirmSaveExpiry(currentEditedValue);
}}
testClassId="expiry-editor-row-expired-date"
testClassId="input-expired-date"
/>
<Button
disabled={disabled}
@@ -138,7 +138,7 @@ export const ExpiryEditorRow = (props: {
size="sm"
className="max-w-xs mr-2 mt-1"
onClick={() => confirmSaveExpiry(currentEditedValue)}
testClassId="expiry-editor-row-button-confirm"
testClassId="button-confirm"
>
{Languages.t('components.public-link-security_field_confirm_edit')}
</Button>
@@ -155,7 +155,7 @@ export const ExpiryEditorRow = (props: {
} else
confirmSaveExpiry(0);
}}
testClassId="expiry-editor-row-checkbox"
testClassId="checkbox"
/>
}
/>
tdrive/frontend/src/app/views/client/body/drive/modals/public-link/index.tsx
+2 -2
View File
@@ -79,7 +79,7 @@ const ChangePublicLinkAccessLevelRow = (props: {
level={props.level}
hiddenLevels={['remove']}
onChange={props.onChange}
testClassId="public-link-access-level-dropdown"
testClassId="level-dropdown"
/>
}
/>
@@ -103,7 +103,7 @@ const SwitchToAdvancedSettingsRow = (props: {
if (!props.disabled)
props.onShowAdvancedScreen(true);
}}
testClassId="public-link-access-advance-switcher"
testClassId="advance-switcher"
>
{Languages.t("components.public-link-security-change")}
</A>
tdrive/frontend/src/app/views/client/body/drive/modals/public-link/password-editor-row.tsx
+5 -5
View File
@@ -75,7 +75,7 @@ export const PasswordEditorRow = (props: {
return <>
<BaseBlock
className={"m-4" + (disabled ? Styles.Disabled.Yes : "")}
className={"m-4" + (disabled ? Styles.Disabled.Yes : "") + ' testid:password-editor-row'}
disabled={disabled}
avatar={<ShieldCheckIcon className={Styles.SmallIconClasses} />}
title={
@@ -83,7 +83,7 @@ return <>
<label htmlFor={chkPasswordId}>{Languages.t('components.public-link-security_password')}</label>
{!!props.password?.length && !isEditingPassword &&
<a
className={disabled ? Styles.Disabled.Yes : "!text-zinc-800"}
className={(disabled ? Styles.Disabled.Yes : "!text-zinc-800") + ' testid:button-edit'}
onClick={() => {
if (!disabled) {
setCurrentEditedPassword(props.password!);
@@ -112,7 +112,7 @@ return <>
else if (e.key == 'Enter')
confirmSavePassword(currentEditedPassword);
}}
testClassId="pasword-editor-row-editting-password"
testClassId="input-edit-password"
/>
<Button
disabled={disabled}
@@ -120,7 +120,7 @@ return <>
size="sm"
className="max-w-xs mr-2 mt-1"
onClick={() => confirmSavePassword(currentEditedPassword)}
testClassId="password-editor-row-button-confirm"
testClassId="button-confirm"
>
{Languages.t('components.public-link-security_field_confirm_edit')}
</Button>
@@ -137,7 +137,7 @@ return <>
} else
confirmSavePassword("");
}}
testClassId="password-editor-row-checkbox"
testClassId="checkbox"
/>
}
/>
tdrive/frontend/src/app/views/client/body/drive/modals/selector/index.tsx
+32 -30
View File
@@ -32,7 +32,7 @@ export const SelectorModal = () => {
const [state, setState] = useRecoilState(SelectorModalAtom);
return (
<Modal open={state.open} onClose={() => setState({ ...state, open: false })}>
<Modal className="testid:modal-selector" open={state.open} onClose={() => setState({ ...state, open: false })}>
<SelectorModalContent key={state.parent_id} showfiles={false}/>
</Modal>
);
@@ -78,7 +78,8 @@ const SelectorModalContent = (key: any) => {
key={folder.id}
className={
'flex flex-row items-center border-t -mt-px px-4 py-2 cursor-pointer ' +
'hover:bg-zinc-500 hover:bg-opacity-10 '
'hover:bg-zinc-500 hover:bg-opacity-10 ' +
'testid:folder'
}
onClick={() => {
setParentId(folder.id);
@@ -93,35 +94,36 @@ const SelectorModalContent = (key: any) => {
{key.showfiles && (
<>
{files.map(file => (
<div
key={file.id}
className={
'flex flex-row items-center border-t -mt-px px-4 py-2 cursor-pointer ' +
'hover:bg-zinc-500 hover:bg-opacity-10 '
}
onClick={() => {
if (state.mode === 'select-files') {
if (!selected.some(i => i.id === file.id)) {
setSelected([...selected, file]);
} else {
setSelected(selected.filter(i => i.id !== file.id));
{files.map(file => (
<div
key={file.id}
className={
'flex flex-row items-center border-t -mt-px px-4 py-2 cursor-pointer ' +
'hover:bg-zinc-500 hover:bg-opacity-10 ' +
'testid:file'
}
} else if (state.mode === 'select-file') {
setSelected([file]);
}
}}
>
<div className="grow flex flex-row items-center dark:text-white">
<DocumentIcon className="h-5 w-5 shrink-0 text-gray-400 mr-2" />
{file.name}
</div>
{(state.mode === 'select-file' || state.mode === 'select-files') && (
<div className="shrink-0" onClick={e => e.stopPropagation()}>
<Checkbox value={selected.some(i => i.id === file.id)} />
onClick={() => {
if (state.mode === 'select-files') {
if (!selected.some(i => i.id === file.id)) {
setSelected([...selected, file]);
} else {
setSelected(selected.filter(i => i.id !== file.id));
}
} else if (state.mode === 'select-file') {
setSelected([file]);
}
}}
>
<div className="grow flex flex-row items-center dark:text-white">
<DocumentIcon className="h-5 w-5 shrink-0 text-gray-400 mr-2" />
{file.name}
</div>
{(state.mode === 'select-file' || state.mode === 'select-files') && (
<div className="shrink-0" onClick={e => e.stopPropagation()}>
<Checkbox value={selected.some(i => i.id === file.id)} testClassId="checkbox-select-file" />
</div>
)}
</div>
)}
</div>
))}
</>
)}
@@ -138,7 +140,7 @@ const SelectorModalContent = (key: any) => {
setState({ ...state, open: false });
setLoading(false);
}}
testClassId="selector-modal-button"
testClassId="button-select"
>
{selected.length === 0 ? (
<>{Languages.t('components.SelectorModalContent_no_items')}</>
tdrive/frontend/src/app/views/client/body/drive/modals/update-access/internal-users-access.tsx
+5 -5
View File
@@ -145,7 +145,7 @@ export const InternalUsersAccessManager = ({
onAddSearchResult={(userId) => {
item && update(changeUserAccess(item, userId, level));
}}
/>
/>
)}
{!loading && resultFooterText && <>
<div className={(result.length == 0 ? 'rounded-md' : 'rounded-b-md') + ' grow text-center text-zinc-700 dark:text-white dark:opacity-75 py-2 dark:border-zinc-700 border-t bg-zinc-100 dark:bg-zinc-900'}>
@@ -163,8 +163,8 @@ export const InternalUsersAccessManager = ({
userId={user?.id}
disabled={disabled}
className={(showResults ? '!rounded-none' : '') + (index === usersWithAccess.length - 1 ? ' !rounded-b-md border-y' : ' border-t')}
/>
)}
/>
)}
{(usersWithAccess?.length ?? 0) < minUserHeight &&
[...Array(minUserHeight - (usersWithAccess?.length ?? 0))].map((_, i) =>
<div key={i} className="p-4 flex flex-row">
@@ -181,7 +181,7 @@ export const InternalUsersAccessManager = ({
size="sm"
className='text-center'
onClick={onCloseModal}
testClassId="public-link-button-confirm-edit"
testClassId="button-confirm-edit"
>
{Languages.t('components.public-link-security_field_confirm_edit')}
</Button>
@@ -212,7 +212,7 @@ const UserAccessLevel = (props: {
? <Button
disabled={loading || props.disabled || user?.id === currentUser?.id}
size="sm"
testClassId={`user-access-button-${props.isSearchResultAdd}`}
testClassId="button-grant-access"
>
{Languages.t('components.user_picker.modal.result_add.' + props.isSearchResultAdd)}
</Button>
tdrive/frontend/src/app/views/client/body/drive/modals/upload/index.tsx
+14 -14
View File
@@ -69,20 +69,20 @@ export const UploadModal = ({
as="div"
{...(!state.type ? slideXTransitionReverted : slideXTransition)}
>
<div className="-m-2" >
<CreateModalOption
icon={<DocumentDownloadIcon className="w-5 h-5" />}
text={Languages.t('components.create_modal.upload_files')}
onClick={() => selectFromDevice()}
testClassId="upload-file-from-device"
/>
<CreateModalOption
icon={<FolderDownloadIcon className="w-5 h-5" />}
text={Languages.t('components.create_modal.upload_folders')}
onClick={() => selectFolderFromDevice()}
testClassId="upload-folder-from-device"
/>
</div>
<div className="-m-2" >
<CreateModalOption
icon={<DocumentDownloadIcon className="w-5 h-5" />}
text={Languages.t('components.create_modal.upload_files')}
onClick={() => selectFromDevice()}
testClassId="upload-file-from-device"
/>
<CreateModalOption
icon={<FolderDownloadIcon className="w-5 h-5" />}
text={Languages.t('components.create_modal.upload_folders')}
onClick={() => selectFolderFromDevice()}
testClassId="upload-folder-from-device"
/>
</div>
</Transition>
</div>
</ModalContent>
tdrive/frontend/src/app/views/client/body/drive/modals/versions/index.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ const VersionModalContent = ({ id }: { id: string }) => {
await uploadVersion(file);
await refresh(id);
}}
testClassId="version-modal-upload-zone"
testClassId="upload-zone"
>
{access !== 'read' && (
<div
tdrive/frontend/src/app/views/client/body/drive/shared-files-table.tsx
+12 -3
View File
@@ -29,7 +29,7 @@ export const SharedFilesTable = () => {
return formattedDate;
};
return (
<div className="testid:shared-file-table">
<div className="testid:shared-file">
<Title className="mb-4 block">{Languages.t('scenes.app.shared_with_me.shared_with_me')}</Title>
{/* Filters */}
<div className="flex items-center space-x-4 mb-6">
@@ -42,8 +42,11 @@ export const SharedFilesTable = () => {
buildFileTypeContextMenu(),
{ x: evt.clientX, y: evt.clientY },
'center',
undefined,
'shared-file-menu-file-types'
);
}}
testClassId="button-open-menu-file-types"
>
<span>{filter.mimeType ? filter.mimeType : Languages.t('scenes.app.shared_with_me.file_type')}</span>
<ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />
@@ -58,8 +61,11 @@ export const SharedFilesTable = () => {
buildPeopleContextMen(),
{ x: evt.clientX, y: evt.clientY },
'center',
undefined,
'shared-file-menu-people'
);
}}
testClassId="button-open-menu-people"
>
<span>{Languages.t('scenes.app.shared_with_me.people')}</span>
<ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />
@@ -75,8 +81,11 @@ export const SharedFilesTable = () => {
buildDateContextMenu(),
{ x: evt.clientX, y: evt.clientY },
'center',
undefined,
'shared-file-menu-last-modified'
);
}}
testClassId="button-open-menu-last-modified"
>
<span>{Languages.t('scenes.app.shared_with_me.last_modified')}</span>
<ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />
@@ -85,7 +94,7 @@ export const SharedFilesTable = () => {
</div>
<Title className="mb-4 block">{Languages.t('scenes.app.drive.documents')}:</Title>
<div className="relative overflow-x-auto shadow-md sm:rounded-lg">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 testid:shared-file-table">
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-blue-500 dark:text-white">
<tr>
<th scope="col" className="px-6 py-3">
@@ -107,7 +116,7 @@ export const SharedFilesTable = () => {
driveItems.map((file: any, index: any) => (
<tr
key={index}
className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 testid:table-row"
>
<th
scope="row"
tdrive/frontend/src/app/views/client/body/drive/shared.tsx
+6 -6
View File
@@ -65,18 +65,18 @@ export default () => {
return (
<FeatureToggles features={activeFeatureNames}>
<>
<div className="flex flex-col h-full w-full dark:bg-zinc-900">
<div className="flex flex-col h-full w-full dark:bg-zinc-900 testid:shared-view">
<div className="flex flex-row items-center justify-center bg-blue-500 px-4 py-2">
<div className="grow flex flex-row items-center">
{group.logo && (
<Avatar avatar={group.logo} className="inline-block mr-3" size="sm" type="square" testClassId="shared-view-avatar" />
<Avatar avatar={group.logo} className="inline-block mr-3" size="sm" type="square" testClassId="avatar" />
)}
<span className="text-white font-semibold" style={{ lineHeight: '32px' }}>
Twake Drive
</span>
</div>
<div className="shrink-0">
<a href="https://twake.app" target="_BLANK" rel="noreferrer" className="!text-white">
<a href="https://twake.app" target="_BLANK" rel="noreferrer" className="!text-white testid:create-account-link">
<span className="nomobile text-white">
{Languages.t('scenes.app.mainview.create_account')}
</span>
@@ -145,7 +145,7 @@ const AccessChecker = ({
if ((!details?.item?.id && !loading) || accessGranted === false) {
return (
<div className="text-center">
<div className="text-center testid:access-checker">
<div style={{ height: '20vh' }} />
<div className="inline-block text-left max-w-sm margin-auto bg-zinc-50 dark:bg-zinc-900 rounded-md p-4">
<Title>You don't have access to this document or folder.</Title>
@@ -162,7 +162,7 @@ const AccessChecker = ({
className="-mr-px rounded-r-none border-r-none"
value={password}
onChange={e => setPassword(e.target.value)}
testClassId="access-checker-input-password"
testClassId="input-password"
/>
<Button
className="rounded-l-none"
@@ -171,7 +171,7 @@ const AccessChecker = ({
await setPublicToken(token || '', password);
await refresh(folderId);
}}
testClassId="access-checker-button-submit"
testClassId="button-submit"
>
Submit
</Button>
tdrive/frontend/src/app/views/client/common/account.tsx
+1
View File
@@ -59,6 +59,7 @@ export default (): JSX.Element => {
},
},
]}
testClassId="menu-account"
>
<Avatar
size="md"
tdrive/frontend/src/app/views/client/common/app-grid.tsx
+1
View File
@@ -41,6 +41,7 @@ export default ({ className }: { className?: string }): JSX.Element => {
),
},
]}
testClassId="menu-apps"
>
<Button
theme="default"
tdrive/frontend/src/app/views/client/common/search.tsx
+4 -4
View File
@@ -25,16 +25,16 @@ export default (): JSX.Element => {
return (
<>
<div className="w-full max-w-lg">
<div className="w-full max-w-lg testid:header-search">
<InputDecorationIcon
prefix={() => (
<SearchIcon className={'h-5 w-5 absolute m-auto top-0 bottom-0 left-3 text-blue-500'} />
)}
suffix={() =>
<XIcon
className={'h-4 w-4 absolute m-auto top-0 bottom-0 right-3 cursor-pointer text-zinc-500 ' + (searchState.query?.length ? '' : 'hidden')}
className={'h-4 w-4 absolute m-auto top-0 bottom-0 right-3 cursor-pointer text-zinc-500 ' + (searchState.query?.length ? '' : 'hidden') + ' testid:button-clear'}
onClick={() => setSearchState({ ...searchState, query: '' }) }
/>
/>
}
input={({ className }) => (
<Input
@@ -44,7 +44,7 @@ export default (): JSX.Element => {
readOnly
placeholder={Languages.t('scenes.client.main_view.main_header.search_input')}
onClick={() => setOpen()}
testClassId="header-search-input"
testClassId="input-search"
/>
)}
/>
tdrive/frontend/src/app/views/client/header/index.tsx
+3 -3
View File
@@ -8,7 +8,7 @@ import version from '../../../environment/version';
export default ({ openSideMenu }: { openSideMenu: () => void }) => {
return (
<div
className="bg-white dark:bg-zinc-900 h-16 sm:h-20 p-4 sm:p-6 flex space-between items-center"
className="bg-white dark:bg-zinc-900 h-16 sm:h-20 p-4 sm:p-6 flex space-between items-center testid:header"
style={{
paddingLeft: '1.875rem',
paddingRight: '1.875rem',
@@ -28,14 +28,14 @@ export default ({ openSideMenu }: { openSideMenu: () => void }) => {
/>
</div>
<div className="sm:inline-grid pl-3">
<Info className="font-bold overflow-hidden text-ellipsis whitespace-nowrap w-full block -mb-1">
<Info className="font-bold overflow-hidden text-ellipsis whitespace-nowrap w-full block -mb-1 testid:version">
&nbsp;v{version.version}
</Info>
</div>
</div>
<div
onClick={() => openSideMenu()}
className="sm:hidden block shrink-0 w-10 hover:text-zinc-600 text-zinc-500 cursor-pointer -mx-2 px-2"
className="sm:hidden block shrink-0 w-10 hover:text-zinc-600 text-zinc-500 cursor-pointer -mx-2 px-2 testid:button-open-side-menu"
>
<MenuIcon className="w-6 h-6" />
</div>
tdrive/frontend/src/app/views/client/index.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export default React.memo((): JSX.Element => {
if (user?.id) {
page = (
<DesktopRedirect>
<div className="fade_in bg-zinc-100 dark:bg-black flex flex-col gap-2 h-full">
<div className="fade_in bg-zinc-100 dark:bg-black flex flex-col gap-2 h-full testid:header">
<DownloadAppBanner/>
<NewVersionComponent />
tdrive/frontend/src/app/views/client/side-bar/actions.tsx
+11 -11
View File
@@ -79,18 +79,18 @@ export const CreateModalWithUploadZones = ({ initialParentId }: { initialParentI
parentId,
});
}}
/>
<UploadModal
/>
<UploadModal
selectFolderFromDevice={() => uploadFolderZoneRef.current?.open()}
selectFromDevice={() => uploadZoneRef.current?.open()}
addFromUrl={(url, name) => {
setUploadModalState({ parent_id: '', open: false });
uploadFromUrl(url, name, {
companyId,
parentId,
});
setUploadModalState({ parent_id: '', open: false });
uploadFromUrl(url, name, {
companyId,
parentId,
});
}}
/>
/>
</>
);
};
@@ -119,7 +119,7 @@ export default () => {
}, [item?.id, setUploadModalState]);
return (
<div className="-m-4 overflow-hidden">
<div className="-m-4 overflow-hidden testid:sidebar-actions">
<AnimatedHeight>
<div className="p-4">
<CreateModalWithUploadZones initialParentId={parentId} />
@@ -170,7 +170,7 @@ export default () => {
theme="primary"
className="w-full mb-2 justify-center"
style={{ boxShadow: '0 0 10px 0 rgba(0, 122, 255, 0.5)' }}
testClassId="sidebar-action-button-upload"
testClassId="button-upload"
>
<UploadIcon className="w-5 h-5 mr-2" /> {Languages.t('components.side_menu.buttons.upload')}
</Button>
@@ -179,7 +179,7 @@ export default () => {
size="lg"
theme="secondary"
className="w-full mb-2 justify-center"
testClassId="sidebar-action-button-open-create-modal"
testClassId="button-open-create-modal"
>
<PlusIcon className="w-5 h-5 mr-2" /> {Languages.t('components.side_menu.buttons.create')}
</Button>
tdrive/frontend/src/app/views/client/side-bar/index.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export default () => {
dirId && viewId && setParentId(dirId);
}, [viewId, itemId, dirId]);
return (
<div className="grow flex flex-col overflow-auto -m-4 p-4 relative">
<div className="grow flex flex-col overflow-auto -m-4 p-4 relative testid:sidebar">
<div className="grow">
<div className="sm:hidden block mb-2">
<div className="flex flex-row space-between w-full">
tdrive/frontend/src/app/views/client/viewer/archive/display.tsx
+2 -2
View File
@@ -4,12 +4,12 @@ import Languages from '@features/global/services/languages-service';
export default (props: { download: string; name: string }) => {
return (
<>
<div className="text-white m-auto w-full text-center block h-full flex items-center">
<div className="text-white m-auto w-full text-center block h-full flex items-center testid:archive-display">
<span className="block w-full text-center mt-16">
{props.name}
<br />
<br />
<Button theme="dark">{Languages.t('scenes.apps.drive.download_button')}</Button>
<Button theme="dark" testClassId="button-download">{Languages.t('scenes.apps.drive.download_button')}</Button>
</span>
</div>
</>
tdrive/frontend/src/app/views/client/viewer/code/display.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ export default (props: { download: string; name: string }) => {
return (
<>
<iframe
className="w-full h-full left-0 right-0 absolute bottom-0 top-0"
className="w-full h-full left-0 right-0 absolute bottom-0 top-0 testid:code-display"
title={props.name}
src={url}
/>
tdrive/frontend/src/app/views/client/viewer/display.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export default () => {
}
return (
<div className="text-white m-auto w-full text-center block h-full flex items-center">
<div className="text-white m-auto w-full text-center block h-full flex items-center testid:cannot-display">
<span className="block w-full text-center">We can't display this document.</span>
</div>
);
tdrive/frontend/src/app/views/client/viewer/images/display.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export default ({ download, loading, setLoading}: PropsType) => {
return (
<TransformComponent wrapperClass="absolute w-full h-full top-0 left-0 right-0 bottom-0">
<img
className="object-contain"
className="object-contain testid:image-display"
style={{
transform: `rotate(${rotated}deg)`,
transition: 'transform 200ms',
tdrive/frontend/src/app/views/client/viewer/other/display.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ export default (props: { download: string; name: string; id: string }) => {
if (!(props.id && previewUrl)) {
return (
<>
<div className="text-white m-auto w-full text-center block h-full flex items-center">
<div className="text-white m-auto w-full text-center block h-full flex items-center testid:cannot-display">
<span className="block w-full text-center">We can't display this document.</span>
</div>
</>
@@ -24,7 +24,7 @@ export default (props: { download: string; name: string; id: string }) => {
<>
{props.id && previewUrl && (
<iframe
className="w-full h-full left-0 right-0 absolute bottom-0 top-0"
className="w-full h-full left-0 right-0 absolute bottom-0 top-0 testid:preview-url"
title={props.name}
src={previewUrl}
/>
tdrive/frontend/src/app/views/client/viewer/pdf/display.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ export default (props: { download: string; name: string }) => {
return (
<>
<iframe
className="w-full h-full left-0 right-0 absolute bottom-0 top-0"
className="w-full h-full left-0 right-0 absolute bottom-0 top-0 testid:pdf-display"
title={props.name}
src={url}
/>
tdrive/frontend/src/app/views/client/viewer/videos/display.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ export default (props: { download: string }) => {
return (
<ReactPlayer
url={props.download}
className="max-w-full max-h-full m-auto absolute left-0 top-0 bottom-0 right-0"
className="max-w-full max-h-full m-auto absolute left-0 top-0 bottom-0 right-0 testid:video-display"
controls
/>
);
tdrive/frontend/src/app/views/client/viewer/viewer.tsx
+9 -7
View File
@@ -42,7 +42,7 @@ export default () => {
<Modal
open={isOpen}
closable={false}
className="bg-black bg-opacity-50 !sm:max-w-none !w-full !rounded-none !p-0"
className="bg-black bg-opacity-50 !sm:max-w-none !w-full !rounded-none !p-0 testid:modal-viewer"
style={{ maxWidth: 'none', margin: 0, left: 0, top: 0, height: '100vh' }}
positioned={false}
>
@@ -92,7 +92,7 @@ const Navigation = () => {
return (
<>
<XIcon
className="z-10 cursor-pointer absolute right-5 top-5 w-12 h-12 text-zinc-300 hover:text-white rounded-full p-1 hover:bg-black hover:bg-opacity-25"
className="z-10 cursor-pointer absolute right-5 top-5 w-12 h-12 text-zinc-300 hover:text-white rounded-full p-1 hover:bg-black hover:bg-opacity-25 testid:button-close"
onClick={() => close()}
/>
@@ -103,7 +103,7 @@ const Navigation = () => {
{...fadeZoomTransition}
>
<ChevronLeftIcon
className="cursor-pointer w-10 h-10 text-zinc-300 hover:text-white"
className="cursor-pointer w-10 h-10 text-zinc-300 hover:text-white testid:button-previous"
onClick={() => previous()}
/>
</Transition>
@@ -115,7 +115,7 @@ const Navigation = () => {
{...fadeZoomTransition}
>
<ChevronRightIcon
className="cursor-pointer w-10 h-10 text-zinc-300 hover:text-white"
className="cursor-pointer w-10 h-10 text-zinc-300 hover:text-white testid:button-next"
onClick={() => next()}
/>
</Transition>
@@ -133,18 +133,19 @@ const Footer = () => {
return (
<>
<div className="z-10 p-5 bg-black w-full flex text-white">
<div className="z-10 p-5 bg-black w-full flex text-white testid:footer">
<div className="mr-4 w-12">
<Avatar
title={currentUserService.getFullName(user)}
src={currentUserService.getThumbnail(user)}
testClassId="avatar"
/>
</div>
<div className="grow overflow-hidden text-ellipsis">
<Text.Base noColor className="w-full block text-white whitespace-nowrap">
<Text.Base noColor className="w-full block text-white whitespace-nowrap testid:text-name">
{name}
</Text.Base>
<Text.Info className="whitespace-nowrap">
<Text.Info className="whitespace-nowrap testid:file-info">
{currentUserService.getFullName(user)} • {extension?.toLocaleUpperCase()},{' '}
{formatSize(status.details?.metadata?.size)}
</Text.Info>
@@ -162,6 +163,7 @@ const Footer = () => {
onClick={() => {
download && (window.location.href = download);
}}
testClassId="button-download"
/>
</div>
</div>