chore(share-access-select): Migrate ShareAccessSelect (#4013)

* chore(share-access-select): Migrate ShareAccessSelect

* chore(share-access-select): Migrate ShareAccessSelect

Author: greg-in-a-box

…share-access-select/ShareAccessSelect.js …-access-select/ShareAccessSelect.js.flowsrc/elements/common/share-access-select/ShareAccessSelect.js renamed to src/elements/common/share-access-select/ShareAccessSelect.js.flow src/elements/common/share-access-select/ShareAccessSelect.js renamed to src/elements/common/share-access-select/ShareAccessSelect.js.flow

@@ -1,6 +1,5 @@
 /**
- * @flow
- * @file Content Explorer Delete Confirmation Dialog
+ * @file Share Access Select component
  * @author Box
  */
 

src/elements/common/share-access-select/ShareAccessSelect.tsx

@@ -0,0 +1,58 @@
+/**
+ * @file Share Access Select component
+ * @author Box
+ */
+
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { ACCESS_NONE, ACCESS_OPEN, ACCESS_COLLAB, ACCESS_COMPANY } from '../../../constants';
+import type { BoxItem } from '../../../common/types/core';
+
+import './ShareAccessSelect.scss';
+
+import messages from '../messages';
+
+export interface ShareAccessSelectProps {
+    canSetShareAccess: boolean;
+    className: string;
+    item: BoxItem;
+    onChange: (value: string, item: BoxItem) => void;
+}
+
+const ShareAccessSelect = ({ className, canSetShareAccess, onChange, item }: ShareAccessSelectProps) => {
+    const { formatMessage } = useIntl();
+    const { allowed_shared_link_access_levels: allowedSharedAccessLevels, permissions, shared_link: sharedLink } = item;
+
+    if (!allowedSharedAccessLevels) {
+        return <span />;
+    }
+
+    const { access = ACCESS_NONE } = sharedLink || {};
+    const { can_set_share_access: allowShareAccessChange } = permissions || {};
+
+    const changeHandler = ({ target }: React.ChangeEvent<HTMLSelectElement>) => onChange(target.value, item);
+    const allowOpen = allowedSharedAccessLevels.indexOf(ACCESS_OPEN) > -1;
+    const allowCollab = allowedSharedAccessLevels.indexOf(ACCESS_COLLAB) > -1;
+    const allowCompany = allowedSharedAccessLevels.indexOf(ACCESS_COMPANY) > -1;
+    const allowed = canSetShareAccess && allowShareAccessChange && (allowOpen || allowCompany || allowCollab);
+
+    if (!allowed) {
+        return <span />;
+    }
+
+    /* eslint-disable jsx-a11y/no-onchange */
+    return (
+        <select className={`be-share-access-select ${className}`} onChange={changeHandler} value={access}>
+            {allowOpen ? <option value={ACCESS_OPEN}>{formatMessage(messages.shareAccessOpen)}</option> : null}
+            {allowCollab ? <option value={ACCESS_COLLAB}>{formatMessage(messages.shareAccessCollab)}</option> : null}
+            {allowCompany ? <option value={ACCESS_COMPANY}>{formatMessage(messages.shareAccessCompany)}</option> : null}
+            <option value={ACCESS_NONE}>
+                {access === ACCESS_NONE
+                    ? formatMessage(messages.shareAccessNone)
+                    : formatMessage(messages.shareAccessRemove)}
+            </option>
+        </select>
+    );
+};
+
+export default ShareAccessSelect;

src/elements/common/share-access-select/__tests__/ShareAccessSelect.test.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { screen, render, fireEvent } from '../../../../test-utils/testing-library';
+import ShareAccessSelect from '../ShareAccessSelect';
+import { ACCESS_NONE, ACCESS_OPEN, ACCESS_COLLAB, ACCESS_COMPANY } from '../../../../constants';
+
+describe('elements/common/share-access-select/ShareAccessSelect', () => {
+    const getDefaultItem = (overrides = {}) => ({
+        allowed_shared_link_access_levels: [ACCESS_OPEN, ACCESS_COLLAB, ACCESS_COMPANY],
+        permissions: {
+            can_set_share_access: true,
+        },
+        shared_link: {
+            access: ACCESS_NONE,
+        },
+        ...overrides,
+    });
+
+    const defaultProps = {
+        canSetShareAccess: true,
+        className: 'test-share-access',
+        item: getDefaultItem(),
+        onChange: jest.fn(),
+    };
+
+    const renderComponent = (props = {}) => {
+        return render(<ShareAccessSelect {...defaultProps} {...props} />);
+    };
+
+    test('should render select with all options when all access levels are allowed', () => {
+        renderComponent();
+
+        const select = screen.getByRole('combobox');
+        expect(select).toHaveClass('be-share-access-select test-share-access');
+
+        const options = screen.getAllByRole('option');
+        expect(options).toHaveLength(4); // Open, Collab, Company, and None
+        expect(options[0]).toHaveValue(ACCESS_OPEN);
+        expect(screen.getByText('Access: People with the link')).toBeInTheDocument();
+        expect(options[1]).toHaveValue(ACCESS_COLLAB);
+        expect(screen.getByText('Access: People in this folder')).toBeInTheDocument();
+        expect(options[2]).toHaveValue(ACCESS_COMPANY);
+        expect(screen.getByText('People in this company')).toBeInTheDocument();
+        expect(options[3]).toHaveValue(ACCESS_NONE);
+        expect(screen.getByText('No shared link')).toBeInTheDocument();
+    });
+
+    test('should render only allowed access level options', () => {
+        const item = getDefaultItem({
+            allowed_shared_link_access_levels: [ACCESS_OPEN, ACCESS_COMPANY],
+        });
+        renderComponent({ item });
+
+        const options = screen.getAllByRole('option');
+        expect(options).toHaveLength(3); // Open, Company, and None
+        expect(options[0]).toHaveValue(ACCESS_OPEN);
+        expect(screen.getByText('Access: People with the link')).toBeInTheDocument();
+        expect(options[1]).toHaveValue(ACCESS_COMPANY);
+        expect(screen.getByText('People in this company')).toBeInTheDocument();
+        expect(options[2]).toHaveValue(ACCESS_NONE);
+        expect(screen.getByText('No shared link')).toBeInTheDocument();
+    });
+
+    test('should not render select when canSetShareAccess is false', () => {
+        renderComponent({ canSetShareAccess: false });
+        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    });
+
+    test('should not render select when can_set_share_access permission is false', () => {
+        const item = getDefaultItem({
+            permissions: { can_set_share_access: false },
+        });
+        renderComponent({ item });
+        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    });
+
+    test('should not render select when no allowed_shared_link_access_levels', () => {
+        const item = getDefaultItem({
+            allowed_shared_link_access_levels: null,
+        });
+        renderComponent({ item });
+        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    });
+
+    test('should call onChange with selected value and item when selection changes', () => {
+        const onChange = jest.fn();
+        renderComponent({ onChange });
+
+        const select = screen.getByRole('combobox');
+        fireEvent.change(select, { target: { value: ACCESS_OPEN } });
+
+        expect(onChange).toHaveBeenCalledWith(ACCESS_OPEN, defaultProps.item);
+    });
+
+    test('should show "Remove" text for ACCESS_NONE option when current access is not ACCESS_NONE', () => {
+        const item = getDefaultItem({
+            shared_link: { access: ACCESS_OPEN },
+        });
+        renderComponent({ item });
+
+        const noneOption = screen.getByRole('option', { name: 'Remove shared link' });
+        expect(noneOption).toBeInTheDocument();
+    });
+
+    test('should show "None" text for ACCESS_NONE option when current access is ACCESS_NONE', () => {
+        renderComponent();
+
+        const noneOption = screen.getByRole('option', { name: 'No shared link' });
+        expect(noneOption).toBeInTheDocument();
+    });
+});