Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(content-uploader): Migrated ItemAction #3600

Merged
merged 1 commit into from
Aug 6, 2024
Merged

chore(content-uploader): Migrated ItemAction #3600

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 43 additions & 40 deletions src/elements/content-uploader/ContentUploader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import getProp from 'lodash/get';
import noop from 'lodash/noop';
import uniqueid from 'lodash/uniqueId';
import cloneDeep from 'lodash/cloneDeep';
import { TooltipProvider } from '@box/blueprint-web';
import { getTypedFileId, getTypedFolderId } from '../../utils/file';
import Browser from '../../utils/Browser';

Expand Down Expand Up @@ -1269,46 +1270,48 @@ class ContentUploader extends Component<Props, State> {

return (
<Internationalize language={language} messages={messages}>
{useUploadsManager ? (
<div ref={measureRef} className={styleClassName} id={this.id}>
<UploadsManager
isDragging={isDraggingItemsToUploadsManager}
isExpanded={isUploadsManagerExpanded}
isResumableUploadsEnabled={isResumableUploadsEnabled}
isVisible={isVisible}
items={items}
onItemActionClick={this.onClick}
onRemoveActionClick={this.removeFileFromUploadQueue}
onUpgradeCTAClick={onUpgradeCTAClick}
onUploadsManagerActionClick={this.clickAllWithStatus}
toggleUploadsManager={this.toggleUploadsManager}
view={view}
/>
</div>
) : (
<div ref={measureRef} className={styleClassName} id={this.id}>
<DroppableContent
addDataTransferItemsToUploadQueue={this.addDroppedItemsToUploadQueue}
addFiles={this.addFilesToUploadQueue}
allowedTypes={['Files']}
isFolderUploadEnabled={isFolderUploadEnabled}
isTouch={isTouch}
items={items}
onClick={this.onClick}
view={view}
/>
<Footer
errorCode={errorCode}
fileLimit={fileLimit}
hasFiles={hasFiles}
isLoading={isLoading}
onCancel={this.cancel}
onClose={onClose}
onUpload={this.upload}
isDone={isDone}
/>
</div>
)}
<TooltipProvider>
{useUploadsManager ? (
<div ref={measureRef} className={styleClassName} id={this.id}>
<UploadsManager
isDragging={isDraggingItemsToUploadsManager}
isExpanded={isUploadsManagerExpanded}
isResumableUploadsEnabled={isResumableUploadsEnabled}
isVisible={isVisible}
items={items}
onItemActionClick={this.onClick}
onRemoveActionClick={this.removeFileFromUploadQueue}
onUpgradeCTAClick={onUpgradeCTAClick}
onUploadsManagerActionClick={this.clickAllWithStatus}
toggleUploadsManager={this.toggleUploadsManager}
view={view}
/>
</div>
) : (
<div ref={measureRef} className={styleClassName} id={this.id}>
<DroppableContent
addDataTransferItemsToUploadQueue={this.addDroppedItemsToUploadQueue}
addFiles={this.addFilesToUploadQueue}
allowedTypes={['Files']}
isFolderUploadEnabled={isFolderUploadEnabled}
isTouch={isTouch}
items={items}
onClick={this.onClick}
view={view}
/>
<Footer
errorCode={errorCode}
fileLimit={fileLimit}
hasFiles={hasFiles}
isLoading={isLoading}
onCancel={this.cancel}
onClose={onClose}
onUpload={this.upload}
isDone={isDone}
/>
</div>
)}
</TooltipProvider>
</Internationalize>
);
}
Expand Down
96 changes: 52 additions & 44 deletions src/elements/content-uploader/ItemAction.js → ...ments/content-uploader/ItemAction.js.flow
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,11 @@
/**
* @flow
* @file Item action component displayed on the upload toast, e.g. cancel/resume
*/

import * as React from 'react';
import { FormattedMessage, injectIntl } from 'react-intl';
import { injectIntl } from 'react-intl';
import type { IntlShape } from 'react-intl';
import IconCheck from '../../icons/general/IconCheck';
import IconClose from '../../icons/general/IconClose';
import IconInProgress from './IconInProgress';
import IconRetry from '../../icons/general/IconRetry';
import LoadingIndicator from '../../components/loading-indicator';
import PlainButton from '../../components/plain-button/PlainButton';
import PrimaryButton from '../../components/primary-button/PrimaryButton';
import Tooltip from '../../components/tooltip';
import messages from '../common/messages';
import { Button, IconButton, LoadingIndicator } from '@box/blueprint-web';
import { ArrowCurveForward, Checkmark } from '@box/blueprint-web-assets/icons/Line';
import { EllipsisBadge, XMark } from '@box/blueprint-web-assets/icons/Fill';

import Tooltip, { TooltipPosition } from '../../components/tooltip';
import {
ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED,
STATUS_PENDING,
Expand All @@ -23,34 +14,60 @@ import {
STATUS_COMPLETE,
STATUS_ERROR,
} from '../../constants';

import messages from '../common/messages';

import type { UploadStatus } from '../../common/types/upload';

import './ItemAction.scss';
import { Size5, SurfaceStatusSurfaceSuccess } from '@box/blueprint-web-assets/tokens/tokens';

const ICON_CHECK_COLOR = '#26C281';

type Props = {
error?: Object,
type ItemActionProps = {
error?: any,
intl: IntlShape,
isFolder?: boolean,
isResumableUploadsEnabled: boolean,
onClick: Function,
onUpgradeCTAClick?: Function,
onClick: any,
onUpgradeCTAClick?: any,
status: UploadStatus,
};

const getIconWithTooltip = (
icon: React.ReactNode,
isDisabled: boolean,
isLoading: boolean,
onClick: any,
tooltip: boolean,
tooltipText: string,
) => {
if (isLoading) {
return <LoadingIndicator aria-label="loading" />;
}

if (tooltip) {
return (
<Tooltip position={TooltipPosition.TOP_LEFT} text={tooltipText}>
<IconButton aria-label={tooltipText} disabled={isDisabled} onClick={onClick} icon={() => icon} />
</Tooltip>
);
}

return <>{icon}</>;
};

const ItemAction = ({
error = {},
error,
intl,
isFolder = false,
isResumableUploadsEnabled,
onClick,
onUpgradeCTAClick,
status,
}: Props) => {
let icon = <IconClose />;
}: ItemActionProps) => {
let icon: React.ReactNode = <XMark color="black" height={Size5} width={Size5} />;
let tooltip;
const { code } = error;
let isLoading = false;
const { code } = error || {};
const { formatMessage } = intl;

if (isFolder && status !== STATUS_PENDING) {
Expand All @@ -59,28 +76,28 @@ const ItemAction = ({

switch (status) {
case STATUS_COMPLETE:
icon = <IconCheck color={ICON_CHECK_COLOR} />;
icon = <Checkmark aria-label="complete" color={SurfaceStatusSurfaceSuccess} height={Size5} width={Size5} />;
if (!isResumableUploadsEnabled) {
tooltip = messages.remove;
}
break;
case STATUS_ERROR:
icon = <IconRetry height={24} width={24} />;
icon = <ArrowCurveForward aria-label="error" color="black" height={Size5} width={Size5} />;
tooltip = isResumableUploadsEnabled ? messages.resume : messages.retry;
break;
case STATUS_IN_PROGRESS:
case STATUS_STAGED:
if (isResumableUploadsEnabled) {
icon = <LoadingIndicator />;
isLoading = true;
} else {
icon = <IconInProgress />;
icon = <EllipsisBadge aria-label="staged" color="black" height={Size5} width={Size5} />;
tooltip = messages.uploadsCancelButtonTooltip;
}
break;
case STATUS_PENDING:
default:
if (isResumableUploadsEnabled) {
icon = <LoadingIndicator />;
isLoading = true;
} else {
tooltip = messages.uploadsCancelButtonTooltip;
}
Expand All @@ -89,32 +106,23 @@ const ItemAction = ({

if (status === STATUS_ERROR && code === ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED && !!onUpgradeCTAClick) {
return (
<PrimaryButton
<Button
onClick={onUpgradeCTAClick}
data-resin-target="large_version_error_inline_upgrade_cta"
type="button"
variant="primary"
>
<FormattedMessage {...messages.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta} />
</PrimaryButton>
{intl.formatMessage(messages.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta)}
</Button>
);
}
const isDisabled = status === STATUS_STAGED;
const tooltipText = tooltip && formatMessage(tooltip);

return (
<div className="bcu-item-action">
{tooltip ? (
<Tooltip position="top-left" text={tooltipText}>
<PlainButton aria-label={tooltipText} isDisabled={isDisabled} onClick={onClick} type="button">
{icon}
</PlainButton>
</Tooltip>
) : (
icon
)}
{getIconWithTooltip(icon, isDisabled, isLoading, onClick, tooltip, tooltipText)}
</div>
);
};

export { ItemAction as ItemActionForTesting };
export default injectIntl(ItemAction);
3 changes: 0 additions & 3 deletions src/elements/content-uploader/ItemAction.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
.bcu-item-action {
width: 24px;
height: 24px;

.crawler {
display: flex;
align-items: center;
Expand Down
Loading
Loading