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

Adjust field name and test id for more clear

Browse Source
This commit is contained in:
lethemanh
2024-12-11 11:06:34 +07:00
parent 86e3661508
commit 6d3be1fa28
11 changed files with 55 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tdrive/frontend/src/app/components/menus/menu-component.jsx
+2 -2
View File
@@ -87,7 +87,7 @@ export default class MenuComponent extends React.Component {
{typeof item.icon === 'string' ? <Icon type={item.icon} /> : item.icon} {typeof item.icon === 'string' ? <Icon type={item.icon} /> : item.icon}
</div> </div>
)} )}
<div className={`text testid:menu-item-${item.id}`}>{item.text}</div> <div className={`text testid:menu-item-${item.testClassId}`}>{item.text}</div>
</div> </div>
); );
} else if (item.type == 'react-element') { } else if (item.type == 'react-element') {
@@ -135,7 +135,7 @@ export default class MenuComponent extends React.Component {
<Emojione type={item.emoji} /> <Emojione type={item.emoji} />
</div> </div>
)} )}
<div className={`text testid:menu-item-${item.id}`}>{item.text}</div> <div className={`text testid:menu-item-${item.testClassId}`}>{item.text}</div>
<div className="more"> <div className="more">
{item.rightIcon && <Icon type={item.rightIcon} />} {item.rightIcon && <Icon type={item.rightIcon} />}
{item.submenu && !item.submenu_replace && <Icon type="angle-right" />} {item.submenu && !item.submenu_replace && <Icon type="angle-right" />}
tdrive/frontend/src/app/components/menus/menu.jsx
+1 -1
View File
@@ -63,7 +63,7 @@ export default class Menu extends React.Component {
this.props.menu, this.props.menu,
elementRect, elementRect,
this.props.position, this.props.position,
{}, undefined,
this.props.testClassId this.props.testClassId
); );
this.setState({ isMenuOpen: true }, () => this.open = true); this.setState({ isMenuOpen: true }, () => this.open = true);
tdrive/frontend/src/app/components/menus/menus-body-layer.jsx
+1 -1
View File
@@ -210,7 +210,7 @@ export default class MenusBodyLayer extends React.Component {
: 'skew_in_right_nobounce' : 'skew_in_right_nobounce'
: 'fade_in' : 'fade_in'
} }
testClassId={item.dataMenuId} testClassId={item.menuTestClassId}
/> />
</div> </div>
</OutsideClickHandler> </OutsideClickHandler>
tdrive/frontend/src/app/components/menus/menus-manager.jsx
+2 -2
View File
@@ -57,7 +57,7 @@ class MenusManager extends Observable {
this.notify(); this.notify();
} }
async openMenu(menu, domRect, positionType, options, dataMenuId) { async openMenu(menu, domRect, positionType, options, menuTestClassId) {
this.isOpen = 1; this.isOpen = 1;
if(typeof menu === 'function') { if(typeof menu === 'function') {
menu = await menu(); menu = await menu();
@@ -85,7 +85,7 @@ class MenusManager extends Observable {
level: 0, level: 0,
id: Number.unid(), id: Number.unid(),
allowClickOut: options.allowClickOut !== undefined ? options.allowClickOut : true, allowClickOut: options.allowClickOut !== undefined ? options.allowClickOut : true,
dataMenuId, menuTestClassId,
}); });
this.last_opened_id = Number.unid(); this.last_opened_id = Number.unid();
this.notify(); this.notify();
tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx
+2 -2
View File
@@ -38,7 +38,7 @@ export default (props: { driveItem: DriveItem & { user?: UserType }}) => {
return ( return (
<div <div
className="flex items-center p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md cursor-pointer" className="flex items-center p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md cursor-pointer testid:drive-item-result"
onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, itemId: file.id})); openDoc(file)}} onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, itemId: file.id})); openDoc(file)}}
> >
<FileResultMedia file={file} className="w-16 h-16 mr-3" /> <FileResultMedia file={file} className="w-16 h-16 mr-3" />
@@ -55,7 +55,7 @@ export default (props: { driveItem: DriveItem & { user?: UserType }}) => {
{extension?.toLocaleUpperCase()} • {formatDate(parseInt(file?.last_modified))} •{' '} {extension?.toLocaleUpperCase()} • {formatDate(parseInt(file?.last_modified))} •{' '}
{formatSize(file?.size)} {formatSize(file?.size)}
</Text.Info> </Text.Info>
<ResultContext user={file.user} /> <ResultContext user={file.user} testClassId="search-result-context" />
</div> </div>
{!file.is_directory && ( {!file.is_directory && (
<div <div
tdrive/frontend/src/app/components/search-popup/parts/result-context.tsx
+3 -2
View File
@@ -2,9 +2,10 @@
import UsersService from '@features/users/services/current-user-service'; import UsersService from '@features/users/services/current-user-service';
import { UserType } from '@features/users/types/user'; import { UserType } from '@features/users/types/user';
export default ({ user }: { user?: UserType }) => { export default ({ user, testClassId }: { user?: UserType; testClassId?: string }) => {
const testId = testClassId ? `testid:${testClassId}` : ''
return ( return (
<div className="flex overflow-hidden whitespace-nowrap text-ellipsis testid:result-context"> <div className={`flex overflow-hidden whitespace-nowrap text-ellipsis ${testId}`}>
{!!user && <>{UsersService.getFullName(user)}</>} {!!user && <>{UsersService.getFullName(user)}</>}
</div> </div>
); );
tdrive/frontend/src/app/views/client/body/drive/browser.tsx
+5 -5
View File
@@ -375,7 +375,7 @@ export default memo(
buildFileTypeContextMenu(), buildFileTypeContextMenu(),
{ x: evt.clientX, y: evt.clientY }, { x: evt.clientX, y: evt.clientY },
'center', 'center',
{}, undefined,
"browser-share-with-me-menu-file-type" "browser-share-with-me-menu-file-type"
); );
}} }}
@@ -398,7 +398,7 @@ export default memo(
buildPeopleContextMen(), buildPeopleContextMen(),
{ x: evt.clientX, y: evt.clientY }, { x: evt.clientX, y: evt.clientY },
'center', 'center',
{}, undefined,
"browser-share-with-me-menu-people" "browser-share-with-me-menu-people"
); );
}} }}
@@ -418,7 +418,7 @@ export default memo(
buildDateContextMenu(), buildDateContextMenu(),
{ x: evt.clientX, y: evt.clientY }, { x: evt.clientX, y: evt.clientY },
'center', 'center',
{}, undefined,
"browser-share-with-me-menu-last-modified" "browser-share-with-me-menu-last-modified"
); );
}} }}
@@ -465,9 +465,9 @@ export default memo(
</Button> </Button>
</Menu> </Menu>
{viewId !== 'shared_with_me' && ( {viewId !== 'shared_with_me' && (
<Menu menu={() => onBuildContextMenu(details)} testClassId="browser-menu-context"> <Menu menu={() => onBuildContextMenu(details)} testClassId="browser-menu-more">
{' '} {' '}
<Button theme="secondary" className="ml-4 flex flex-row items-center" testClassId="browser-button-context"> <Button theme="secondary" className="ml-4 flex flex-row items-center" testClassId="browser-button-more">
<span> <span>
{selectedCount > 1 {selectedCount > 1
? `${selectedCount} items` ? `${selectedCount} items`
tdrive/frontend/src/app/views/client/body/drive/context-menu.tsx
+33 -33
View File
@@ -85,7 +85,7 @@ export const useOnBuildContextMenu = (
!FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_MANAGE_ACCESS); !FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_MANAGE_ACCESS);
const newMenuActions = [ const newMenuActions = [
{ {
id: 'share', testClassId: 'share',
type: 'menu', type: 'menu',
icon: 'share-alt', icon: 'share-alt',
text: Languages.t('components.item_context_menu.share'), text: Languages.t('components.item_context_menu.share'),
@@ -93,7 +93,7 @@ export const useOnBuildContextMenu = (
onClick: () => setPublicLinkModalState({ open: true, id: item.id }), onClick: () => setPublicLinkModalState({ open: true, id: item.id }),
}, },
{ {
id: 'manage-access', testClassId: 'manage-access',
type: 'menu', type: 'menu',
icon: 'users-alt', icon: 'users-alt',
text: Languages.t('components.item_context_menu.manage_access'), text: Languages.t('components.item_context_menu.manage_access'),
@@ -101,7 +101,7 @@ export const useOnBuildContextMenu = (
onClick: () => setAccessModalState({ open: true, id: item.id }), onClick: () => setAccessModalState({ open: true, id: item.id }),
}, },
{ {
id: 'rescan-document', testClassId: 'rescan-document',
type: 'menu', type: 'menu',
icon: 'shield-check', icon: 'shield-check',
text: Languages.t('components.item_context_menu.rescan_document'), text: Languages.t('components.item_context_menu.rescan_document'),
@@ -118,7 +118,7 @@ export const useOnBuildContextMenu = (
(notSafe && !(item.av_status === 'scan_failed')), (notSafe && !(item.av_status === 'scan_failed')),
}, },
{ {
id: 'download', testClassId: 'download',
type: 'menu', type: 'menu',
icon: 'download-alt', icon: 'download-alt',
text: Languages.t('components.item_context_menu.download'), text: Languages.t('components.item_context_menu.download'),
@@ -145,7 +145,7 @@ export const useOnBuildContextMenu = (
}, // */ }, // */
{ type: 'separator', hide: notSafe }, { type: 'separator', hide: notSafe },
{ {
id: 'move', testClassId: 'move',
type: 'menu', type: 'menu',
icon: 'folder-question', icon: 'folder-question',
text: Languages.t('components.item_context_menu.move'), text: Languages.t('components.item_context_menu.move'),
@@ -171,7 +171,7 @@ export const useOnBuildContextMenu = (
}), }),
}, },
{ {
id: 'rename', testClassId: 'rename',
type: 'menu', type: 'menu',
icon: 'file-edit-alt', icon: 'file-edit-alt',
text: Languages.t('components.item_context_menu.rename'), text: Languages.t('components.item_context_menu.rename'),
@@ -179,7 +179,7 @@ export const useOnBuildContextMenu = (
onClick: () => setPropertiesModalState({ open: true, id: item.id, inPublicSharing }), onClick: () => setPropertiesModalState({ open: true, id: item.id, inPublicSharing }),
}, },
{ {
id: 'copy-link', testClassId: 'copy-link',
type: 'menu', type: 'menu',
icon: 'link', icon: 'link',
text: Languages.t('components.item_context_menu.copy_link'), text: Languages.t('components.item_context_menu.copy_link'),
@@ -196,7 +196,7 @@ export const useOnBuildContextMenu = (
}, },
}, },
{ {
id: 'version', testClassId: 'version',
type: 'menu', type: 'menu',
icon: 'history', icon: 'history',
text: Languages.t('components.item_context_menu.versions'), text: Languages.t('components.item_context_menu.versions'),
@@ -205,7 +205,7 @@ export const useOnBuildContextMenu = (
}, },
{ type: 'separator', hide: access !== 'manage' || inTrash || notSafe }, { type: 'separator', hide: access !== 'manage' || inTrash || notSafe },
{ {
id: 'move-to-trash', testClassId: 'move-to-trash',
type: 'menu', type: 'menu',
icon: 'trash', icon: 'trash',
text: Languages.t('components.item_context_menu.move_to_trash'), text: Languages.t('components.item_context_menu.move_to_trash'),
@@ -214,7 +214,7 @@ export const useOnBuildContextMenu = (
onClick: () => setConfirmTrashModalState({ open: true, items: [item] }), onClick: () => setConfirmTrashModalState({ open: true, items: [item] }),
}, },
{ {
id: 'restore', testClassId: 'restore',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.restore'), text: Languages.t('components.item_context_menu.restore'),
className: 'error', className: 'error',
@@ -225,7 +225,7 @@ export const useOnBuildContextMenu = (
}, },
}, },
{ {
id: 'delete', testClassId: 'delete',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.delete'), text: Languages.t('components.item_context_menu.delete'),
className: 'error', className: 'error',
@@ -242,7 +242,7 @@ export const useOnBuildContextMenu = (
// Add selected items related menus // Add selected items related menus
const newMenuActions: any[] = [ const newMenuActions: any[] = [
{ {
id: 'move-multiple', testClassId: 'move-multiple',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.move_multiple'), text: Languages.t('components.item_context_menu.move_multiple'),
hide: parent.access === 'read' || inTrash, hide: parent.access === 'read' || inTrash,
@@ -267,7 +267,7 @@ export const useOnBuildContextMenu = (
}), }),
}, },
{ {
id: 'download-multiple', testClassId: 'download-multiple',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.download_multiple'), text: Languages.t('components.item_context_menu.download_multiple'),
hide: inTrash, hide: inTrash,
@@ -285,14 +285,14 @@ export const useOnBuildContextMenu = (
}, },
}, },
{ {
id: 'clear-selection', testClassId: 'clear-selection',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.clear_selection'), text: Languages.t('components.item_context_menu.clear_selection'),
onClick: () => setChecked({}), onClick: () => setChecked({}),
}, },
{ type: 'separator', hide: parent.access === 'read' || notSafe }, { type: 'separator', hide: parent.access === 'read' || notSafe },
{ {
id: 'delete-multiple', testClassId: 'delete-multiple',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.delete_multiple'), text: Languages.t('components.item_context_menu.delete_multiple'),
hide: !inTrash || parent.access !== 'manage', hide: !inTrash || parent.access !== 'manage',
@@ -305,7 +305,7 @@ export const useOnBuildContextMenu = (
}, },
}, },
{ {
id: 'move-to-trash-multiple', testClassId: 'move-to-trash-multiple',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.to_trash_multiple'), text: Languages.t('components.item_context_menu.to_trash_multiple'),
hide: inTrash || parent.access !== 'manage', hide: inTrash || parent.access !== 'manage',
@@ -326,7 +326,7 @@ export const useOnBuildContextMenu = (
const newMenuActions: any[] = inTrash const newMenuActions: any[] = inTrash
? [ ? [
{ {
id: 'empty-trash', testClassId: 'empty-trash',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.trash.empty'), text: Languages.t('components.item_context_menu.trash.empty'),
className: 'error', className: 'error',
@@ -341,7 +341,7 @@ export const useOnBuildContextMenu = (
] ]
: [ : [
{ {
id: 'add-documents', testClassId: 'add-documents',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.add_documents'), text: Languages.t('components.item_context_menu.add_documents'),
hide: inTrash || parent.access === 'read', hide: inTrash || parent.access === 'read',
@@ -350,7 +350,7 @@ export const useOnBuildContextMenu = (
setUploadModalState({ open: true, parent_id: parent?.item?.id }), setUploadModalState({ open: true, parent_id: parent?.item?.id }),
}, },
{ {
id: 'download-folder', testClassId: 'download-folder',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.download_folder'), text: Languages.t('components.item_context_menu.download_folder'),
hide: inTrash, hide: inTrash,
@@ -368,7 +368,7 @@ export const useOnBuildContextMenu = (
}, },
}, },
{ {
id: 'copy-link', testClassId: 'copy-link',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.copy_link'), text: Languages.t('components.item_context_menu.copy_link'),
hide: !hasAnyPublicLinkAccess(item), hide: !hasAnyPublicLinkAccess(item),
@@ -381,7 +381,7 @@ export const useOnBuildContextMenu = (
}, },
{ type: 'separator', hide: parent.item!.id != 'root' }, { type: 'separator', hide: parent.item!.id != 'root' },
{ {
id: 'manage-users', testClassId: 'manage-users',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.manage_users'), text: Languages.t('components.item_context_menu.manage_users'),
hide: parent.item!.id != 'root', hide: parent.item!.id != 'root',
@@ -440,7 +440,7 @@ export const useOnBuildFileTypeContextMenu = () => {
return useCallback(() => { return useCallback(() => {
const menuItems = mimeTypes.map(item => { const menuItems = mimeTypes.map(item => {
return { return {
id: item.key, testClassId: item.key,
type: 'menu', type: 'menu',
text: item.key, text: item.key,
onClick: () => { onClick: () => {
@@ -489,7 +489,7 @@ export const useOnBuildDateContextMenu = () => {
return useCallback(() => { return useCallback(() => {
const menuItems = [ const menuItems = [
{ {
id: 'all-date', testClassId: 'all-date',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.all'), text: Languages.t('components.item_context_menu.all'),
onClick: () => { onClick: () => {
@@ -506,7 +506,7 @@ export const useOnBuildDateContextMenu = () => {
}, },
}, },
{ {
id: 'today', testClassId: 'today',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.today'), text: Languages.t('components.item_context_menu.today'),
onClick: () => { onClick: () => {
@@ -523,7 +523,7 @@ export const useOnBuildDateContextMenu = () => {
}, },
}, },
{ {
id: 'last-week', testClassId: 'last-week',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.last_week'), text: Languages.t('components.item_context_menu.last_week'),
onClick: () => { onClick: () => {
@@ -540,7 +540,7 @@ export const useOnBuildDateContextMenu = () => {
}, },
}, },
{ {
id: 'last-month', testClassId: 'last-month',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.last_month'), text: Languages.t('components.item_context_menu.last_month'),
onClick: () => { onClick: () => {
@@ -567,13 +567,13 @@ export const useOnBuildFileContextMenu = () => {
(item: DriveItem) => { (item: DriveItem) => {
const menuItems = [ const menuItems = [
{ {
id: 'preview', testClassId: 'preview',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.preview'), text: Languages.t('components.item_context_menu.preview'),
onClick: () => preview(item), onClick: () => preview(item),
}, },
{ {
id: 'download', testClassId: 'download',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.download'), text: Languages.t('components.item_context_menu.download'),
onClick: () => { onClick: () => {
@@ -592,7 +592,7 @@ export const useOnBuildSortContextMenu = () => {
return useCallback(() => { return useCallback(() => {
const menuItems = [ const menuItems = [
{ {
id: 'sorting-by-date', testClassId: 'sorting-by-date',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.sorting.by.date'), text: Languages.t('components.item_context_menu.sorting.by.date'),
icon: sortItem.by === 'date' ? 'check' : 'sort-check', icon: sortItem.by === 'date' ? 'check' : 'sort-check',
@@ -608,7 +608,7 @@ export const useOnBuildSortContextMenu = () => {
}, },
}, },
{ {
id: 'sorting-by-name', testClassId: 'sorting-by-name',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.sorting.by.name'), text: Languages.t('components.item_context_menu.sorting.by.name'),
icon: sortItem.by === 'name' ? 'check' : 'sort-check', icon: sortItem.by === 'name' ? 'check' : 'sort-check',
@@ -623,7 +623,7 @@ export const useOnBuildSortContextMenu = () => {
}, },
}, },
{ {
id: 'sorting-by-size', testClassId: 'sorting-by-size',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.sorting.by.size'), text: Languages.t('components.item_context_menu.sorting.by.size'),
icon: sortItem.by === 'size' ? 'check' : 'sort-check', icon: sortItem.by === 'size' ? 'check' : 'sort-check',
@@ -639,7 +639,7 @@ export const useOnBuildSortContextMenu = () => {
}, },
{type:"separator"}, {type:"separator"},
{ {
id: 'sorting-order-asc', testClassId: 'sorting-order-asc',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.sorting.order.asc'), text: Languages.t('components.item_context_menu.sorting.order.asc'),
icon: sortItem.order === 'asc' ? 'check' : 'sort-check', icon: sortItem.order === 'asc' ? 'check' : 'sort-check',
@@ -654,7 +654,7 @@ export const useOnBuildSortContextMenu = () => {
}, },
}, },
{ {
id: 'sorting-order-desc', testClassId: 'sorting-order-desc',
type: 'menu', type: 'menu',
text: Languages.t('components.item_context_menu.sorting.order.desc'), text: Languages.t('components.item_context_menu.sorting.order.desc'),
icon: sortItem.order === 'desc' ? 'check' : 'sort-check', icon: sortItem.order === 'desc' ? 'check' : 'sort-check',
tdrive/frontend/src/app/views/client/body/drive/modals/confirm-trash/index.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export const ConfirmTrashModal = () => {
const [state, setState] = useRecoilState(ConfirmTrashModalAtom); const [state, setState] = useRecoilState(ConfirmTrashModalAtom);
return ( return (
<Modal className="confirm-trash-modal" open={state.open} onClose={() => setState({ ...state, open: false })}> <Modal className="testid:confirm-trash-modal" open={state.open} onClose={() => setState({ ...state, open: false })}>
{!!state.items.length && <ConfirmTrashModalContent items={state.items} />} {!!state.items.length && <ConfirmTrashModalContent items={state.items} />}
</Modal> </Modal>
); );
tdrive/frontend/src/app/views/client/common/account.tsx
+4 -4
View File
@@ -23,13 +23,13 @@ export default (): JSX.Element => {
menu={[ menu={[
// user name / email // user name / email
{ {
id: 'username', testClassId: 'username',
type: 'text', type: 'text',
className: "username", className: "username",
text: currentUserService.getFullName(user), text: currentUserService.getFullName(user),
}, },
{ {
id: 'email', testClassId: 'email',
type: 'text', type: 'text',
text: user.email, text: user.email,
className: 'email', className: 'email',
@@ -38,7 +38,7 @@ export default (): JSX.Element => {
}, },
{ type: 'separator' }, { type: 'separator' },
{ {
id: 'account-setting', testClassId: 'account-setting',
type: 'menu', type: 'menu',
className: 'account-menu', className: 'account-menu',
icon: <Icon type="user-circle" className="text-black dark:text-white" />, icon: <Icon type="user-circle" className="text-black dark:text-white" />,
@@ -49,7 +49,7 @@ export default (): JSX.Element => {
}, },
}, },
{ {
id: 'logout', testClassId: 'logout',
type: 'menu', type: 'menu',
className: 'account-menu', className: 'account-menu',
icon: <Icon type="sign-out-alt" className="text-black dark:text-white" />, icon: <Icon type="sign-out-alt" className="text-black dark:text-white" />,
tdrive/frontend/src/app/views/client/common/disk-usage.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ const DiskUsage = () => {
<div style={{ width: used + '%',}} className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500 testid:disk-usage-80-to-90"></div> <div style={{ width: used + '%',}} className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500 testid:disk-usage-80-to-90"></div>
)} )}
<div style={{ width: (100 - used) + '%' }} className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-grey-500 testid:disk-usage-100"></div> <div style={{ width: (100 - used) + '%' }} className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-grey-500 testid:disk-usage-free-space"></div>
</div> </div>
{/*<div className="bg-blue-600 h-1.5 rounded-full dark:bg-blue-500" style={usedStyle}></div>*/} {/*<div className="bg-blue-600 h-1.5 rounded-full dark:bg-blue-500" style={usedStyle}></div>*/}
<Base className="testid:disk-usage-text"> <Base className="testid:disk-usage-text">