box-ui-elements
Version:
Box UI Elements
391 lines (377 loc) • 12.9 kB
JavaScript
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { http, HttpResponse } from 'msw';
import { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';
import { Sign } from '@box/blueprint-web-assets/icons/Line';
import { expect, fn, userEvent, waitFor, within, screen } from 'storybook/test';
import noop from 'lodash/noop';
import orderBy from 'lodash/orderBy';
import ContentExplorer from '../../ContentExplorer';
import { DEFAULT_HOSTNAME_API } from '../../../../constants';
import { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';
import { mockRootFolder } from '../../../common/__mocks__/mockRootFolder';
// The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.
const {
scope: templateScope,
templateKey
} = mockSchema;
const metadataScopeAndKey = `${templateScope}.${templateKey}`;
const metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;
// This is the body of the metadata query API call.
// https://developer.box.com/guides/metadata/queries/syntax/
const metadataQuery = {
from: metadataScopeAndKey,
ancestor_folder_id: '0',
order_by: [{
field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`,
// Default to sorting by the first field in the schema
direction: 'asc'
}],
fields: [
// Default to returning all fields in the metadata template schema, and name as a standalone (non-metadata) field
...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`)]
};
// Used for metadata view v1
const fieldsToShow = [{
key: `${metadataFieldNamePrefix}.industry`,
canEdit: true
}, {
key: `${metadataFieldNamePrefix}.last_contacted_at`,
canEdit: true
}, {
key: `${metadataFieldNamePrefix}.role`,
canEdit: true
}];
// Used for metadata view v2
const columns = [...mockSchema.fields.map(field => ({
textValue: field.displayName,
id: `${metadataFieldNamePrefix}.${field.key}`,
type: field.type,
allowsSorting: true,
minWidth: 150,
maxWidth: 150
}))];
// Switches ContentExplorer to use Metadata View over standard, folder-based view.
const defaultView = 'metadata';
export const metadataView = {
args: {
metadataQuery,
fieldsToShow,
defaultView
}
};
const metadataViewV2ElementProps = {
metadataViewProps: {
columns
},
metadataQuery,
fieldsToShow,
defaultView,
features: {
contentExplorer: {
metadataViewV2: true
}
}
};
const metadataViewV2WithInlineCustomActionsElementProps = _objectSpread(_objectSpread({}, metadataViewV2ElementProps), {}, {
metadataViewProps: {
columns,
isSelectionEnabled: true,
itemActionMenuProps: {
actions: [{
label: 'Download',
onClick: noop,
icon: Download
}],
subMenuTrigger: {
label: 'Sign',
icon: Sign
},
subMenuActions: [{
label: 'Request Signature',
onClick: noop,
icon: SignMeOthers
}]
}
}
});
const metadataViewV2WithBulkItemActions = _objectSpread(_objectSpread({}, metadataViewV2ElementProps), {}, {
bulkItemActions: [{
label: 'Download',
onClick: fn()
}],
metadataViewProps: {
columns,
isSelectionEnabled: true
}
});
export const metadataViewV2 = {
args: metadataViewV2ElementProps
};
export const metadataViewV2SortsFromHeader = {
args: metadataViewV2ElementProps,
play: async ({
canvas
}) => {
const industryHeader = await canvas.findByRole('columnheader', {
name: 'Industry'
});
expect(industryHeader).toBeInTheDocument();
const firstRow = await canvas.findByRole('row', {
name: /Child 2/i
});
expect(firstRow).toBeInTheDocument();
await userEvent.click(industryHeader);
}
};
export const metadataViewV2WithCustomActions = {
args: metadataViewV2WithInlineCustomActionsElementProps,
play: async ({
canvas
}) => {
await waitFor(() => {
expect(canvas.getByRole('row', {
name: /Child 2/i
})).toBeInTheDocument();
});
const firstRow = canvas.getByRole('row', {
name: /Child 2/i
});
const ellipsesButton = within(firstRow).getByRole('button', {
name: 'Action menu'
});
userEvent.click(ellipsesButton);
}
};
const initialFilterActionBarProps = {
initialFilterValues: {
industry: {
value: ['Legal']
},
'mimetype-filter': {
value: ['boxnoteType', 'documentType', 'threedType']
},
role: {
value: ['Developer', 'Business Owner', 'Marketing']
}
}
};
export const metadataViewV2WithInitialFilterValues = {
args: _objectSpread(_objectSpread({}, metadataViewV2ElementProps), {}, {
metadataViewProps: {
columns,
actionBarProps: initialFilterActionBarProps
}
}),
play: async ({
canvas
}) => {
// Wait for chips to update with initial values
await waitFor(() => {
expect(canvas.getByRole('button', {
name: /Industry/i
})).toHaveTextContent(/\(1\)/);
});
// Other chips should reflect initialized values
const contactRoleChip = canvas.getByRole('button', {
name: /Contact Role/i
});
expect(contactRoleChip).toHaveTextContent(/\(3\)/);
const fileTypeChip = canvas.getByRole('button', {
name: /Box Note/i
});
expect(fileTypeChip).toHaveTextContent(/\+2/);
}
};
export const sidePanelOpenWithSingleItemSelected = {
args: _objectSpread(_objectSpread({}, metadataViewV2ElementProps), {}, {
metadataViewProps: {
columns,
isSelectionEnabled: true
}
}),
play: async ({
canvas
}) => {
await waitFor(() => {
expect(canvas.getByRole('row', {
name: /Child 2/i
})).toBeInTheDocument();
});
// Select the first row by clicking its checkbox
const firstRow = canvas.getByRole('row', {
name: /Child 2/i
});
const checkbox = within(firstRow).getByRole('checkbox');
await userEvent.click(checkbox);
const metadataButton = canvas.getByRole('button', {
name: 'Metadata'
});
await userEvent.click(metadataButton);
}
};
export const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu = {
args: metadataViewV2WithBulkItemActions,
play: async ({
canvas
}) => {
const firstRow = await canvas.findByRole('row', {
name: /Child 2/i
});
expect(firstRow).toBeInTheDocument();
const checkbox = within(firstRow).getByRole('checkbox');
await userEvent.click(checkbox);
const ellipsisButton = canvas.getByRole('button', {
name: 'Bulk actions'
});
expect(ellipsisButton).toBeInTheDocument();
await userEvent.click(ellipsisButton);
const downloadAction = screen.getByRole('menuitem', {
name: 'Download'
});
expect(downloadAction).toBeInTheDocument();
}
};
export const sidePanelOpenWithMultipleItemsSelected = {
args: _objectSpread(_objectSpread({}, metadataViewV2ElementProps), {}, {
metadataViewProps: {
columns,
isSelectionEnabled: true
}
}),
play: async ({
canvas
}) => {
await waitFor(() => {
expect(canvas.getByRole('row', {
name: /Child 2/i
})).toBeInTheDocument();
});
// Select the first row by clicking its checkbox
const firstItem = canvas.getByRole('row', {
name: /Child 2/i
});
const checkbox = within(firstItem).getByRole('checkbox');
await userEvent.click(checkbox);
// Select the second row by clicking its checkbox
const secondItem = canvas.getAllByRole('row', {
name: /Child 1/i
})[0];
const secondCheckbox = within(secondItem).getByRole('checkbox');
await userEvent.click(secondCheckbox);
const metadataButton = canvas.getByRole('button', {
name: 'Metadata'
});
await userEvent.click(metadataButton);
}
};
export const disableSelectionInEditMode = {
args: _objectSpread(_objectSpread({}, metadataViewV2ElementProps), {}, {
metadataViewProps: {
columns,
isSelectionEnabled: true
}
}),
play: async ({
canvas
}) => {
await waitFor(() => {
expect(canvas.getByRole('row', {
name: /Child 2/i
})).toBeInTheDocument();
});
// Start editing
await userEvent.click(canvas.getByLabelText('Select all'));
await userEvent.click(canvas.getByRole('button', {
name: 'Metadata'
}));
await userEvent.click(canvas.getByLabelText('Edit templateName'));
expect(canvas.getByRole('button', {
name: 'Cancel'
})).toBeInTheDocument();
expect(canvas.getByRole('button', {
name: 'Save'
})).toBeInTheDocument();
// Verify checkboxes are disabled
expect(canvas.getByLabelText('Select all')).toBeDisabled();
expect(within(canvas.getByRole('row', {
name: /Child 2/i
})).getByRole('checkbox')).toBeDisabled();
}
};
export const clearSelectionInEditMode = {
args: _objectSpread(_objectSpread({}, metadataViewV2ElementProps), {}, {
metadataViewProps: {
columns,
isSelectionEnabled: true
}
}),
play: async ({
canvas
}) => {
await waitFor(() => {
expect(canvas.getByRole('row', {
name: /Child 2/i
})).toBeInTheDocument();
});
// Start editing
await userEvent.click(canvas.getByLabelText('Select all'));
await userEvent.click(canvas.getByRole('button', {
name: 'Metadata'
}));
await userEvent.click(canvas.getByLabelText('Edit templateName'));
// Clear selection in subheader
await userEvent.click(canvas.getByLabelText('Clear selection'));
// Verify sidebar is closed and no items are selected
expect(canvas.queryByRole('button', {
name: 'Cancel'
})).not.toBeInTheDocument();
expect(canvas.queryByRole('button', {
name: 'Save'
})).not.toBeInTheDocument();
expect(canvas.queryByText('Mock Template')).not.toBeInTheDocument();
expect(canvas.getByLabelText('Select all')).not.toBeChecked();
expect(within(canvas.getByRole('row', {
name: /Child 2/i
})).getByRole('checkbox')).not.toBeChecked();
}
};
const meta = {
title: 'Elements/ContentExplorer/tests/MetadataView/visual',
component: ContentExplorer,
args: {
features: global.FEATURE_FLAGS,
rootFolderId: global.FOLDER_ID,
token: global.TOKEN
},
parameters: {
msw: {
handlers: [
// Note that the Metadata API backend normally handles the sorting. The mocks below simulate the sorting for specific cases, but may not 100% accurately reflect the backend behavior.
http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, async ({
request
}) => {
const body = await request.clone().json();
const orderByDirection = body.order_by[0].direction;
const orderByFieldKey = body.order_by[0].field_key;
// Hardcoded case for sorting by industry
if (orderByFieldKey === `industry` && orderByDirection === 'ASC') {
const sortedMetadata = orderBy(mockMetadata.entries, 'metadata.enterprise_0.templateName.industry', 'asc');
return HttpResponse.json(_objectSpread(_objectSpread({}, mockMetadata), {}, {
entries: sortedMetadata
}));
}
return HttpResponse.json(mockMetadata);
}), http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {
return HttpResponse.json(mockSchema);
}), http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/:id`, () => {
return HttpResponse.json(mockRootFolder);
})]
}
}
};
export default meta;
//# sourceMappingURL=MetadataView-visual.stories.js.map