@imposium-hub/components 2.11.6-0 → 2.12.0

package/src/components/app-wrapper/AppWrapper.tsx

@@ -9,6 +9,7 @@ import { replaceRoute } from '../../utils/routing';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/pro-light-svg-icons';
 import { initPendo } from '../../utils/pendo';
+import { TOKEN_TYPE, FlagsProvider } from '@innovid/feature-flags-react';
 
 export interface IAppWrapperProps {
     appLabel: string;
@@ -63,6 +64,15 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
     const { isAuthenticated, isLoading, getAccessTokenSilently, loginWithRedirect, logout, user } =
         useAuth0();
     const [errorState, setErrorState] = React.useState(null);
+    const [auth0Token, setAuth0Token] = React.useState(null);
+
+    React.useEffect(() => {
+        void getAccessTokenSilently().then((token) => {
+            if (token) {
+                setAuth0Token(token);
+            }
+        });
+    }, []);
 
     React.useEffect(() => {
         if (user) {
@@ -275,14 +285,24 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
         innerContent = (
             <AppWrapperErrors
                 error={errorState}
-                email={user.userEmail}
+                email={user?.userEmail}
             />
         );
     } else if (!blockRender) {
         innerContent = children;
     }
 
-    return (
+    const featureFlagsConfig = {
+        gatewayUrl: baseUrl,
+        gatewayToken: auth0Token,
+        projectId: 'prj_40599w13mko56suv',
+        tokenType: TOKEN_TYPE.AUTH0_BEARER,
+        initialContext: {
+            email: user?.userEmail
+        }
+    };
+
+    const content = (
         <div
             id='app'
             className='app'>
@@ -307,6 +327,14 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             <ConfirmModal />
         </div>
     );
+
+    const render = auth0Token ? (
+        <FlagsProvider config={featureFlagsConfig}>{content}</FlagsProvider>
+    ) : (
+        content
+    );
+
+    return render;
 };
 
 export const ERROR_HEADINGS = {

package/src/components/button-group-field/ButtonGroupField.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig, renderTooltip, renderTooltipProps } from '../Tooltip';
-import { getOverrideHandler } from '../../constants/variables';
-import Button from '../button/Button';
-import { ICON_TIMES } from '../../constants/icons';
 
 interface IButtonGroupOption {
     value: string | boolean;
@@ -25,15 +22,6 @@ interface IButtonGroupFieldProps {
     labelPosition?: string;
     labelWidth?: string | number;
     disabled?: boolean;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
 }
 
 class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
@@ -62,114 +50,55 @@ class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
         }
     };
 
-    public renderRemoveButton() {
-        const { removeOverride } = this.props;
-        return (
-            <div className='item'>
-                <div className='buttons'>
-                    <Button
-                        style='subtle'
-                        color='danger'
-                        onClick={() => removeOverride()}>
-                        {ICON_TIMES}
-                    </Button>
-                </div>
-            </div>
-        );
-    }
-
     public render = (): JSX.Element => {
-        const {
-            options,
-            width,
-            tooltip,
-            info,
-            labelPosition,
-            labelWidth,
-            disabled,
-            propKey,
-            showCopyPropIds,
-            inventory,
-            override,
-            setOverride,
-            onClose,
-            onChange,
-            activeOverride,
-            removeOverride
-        } = this.props;
-
+        const { value, label, options, width, tooltip, info, labelPosition, labelWidth, disabled } =
+            this.props;
         const optionStyle: any = { width: `${100 / options.length}%` };
 
-        const inputField = () => {
-            const { hasOverride, previewItem } = getOverrideHandler(propKey, override, inventory);
-            const value = hasOverride ? previewItem : this.props.value;
-            return (
-                <div className={`${hasOverride ? 'override_variable text' : ''}`}>
-                    <div className='button-group'>
-                        {options.map((option, i) => {
-                            const optionKey = option.value;
-                            const optionLabel = option.label;
-                            const icon = option.icon ? option.icon : null;
-                            const tooltipId = `${optionKey}-${i}`;
-                            const activeOption = optionKey === value;
-                            const activeClass = activeOption
-                                ? 'active'
-                                : disabled
-                                ? 'disabled'
-                                : '';
-                            const onClick = !activeOption
-                                ? () => {
-                                      onChange(optionKey);
-                                  }
-                                : null;
-
-                            return (
-                                <div
-                                    key={`option-${optionKey}`}
-                                    style={optionStyle}
-                                    className={`button-group-option ${activeClass} ${
-                                        hasOverride ? 'disabled' : ''
-                                    }`}
-                                    {...renderTooltipProps(tooltipId, option.tooltip)}
-                                    onClick={
-                                        typeof option.onDoubleClick === 'function'
-                                            ? () =>
-                                                  this.handleMultipleClicks(
-                                                      onClick,
-                                                      option.onDoubleClick
-                                                  )
-                                            : onClick
-                                    }>
-                                    {!icon ? optionLabel : icon}
-                                    {renderTooltip(tooltipId, option.tooltip)}
-                                </div>
-                            );
-                        })}
-                    </div>
-                </div>
-            );
-        };
-
         return (
             <FieldWrapper
                 customClass='button-group-field'
-                label={this.props.label}
+                label={label}
                 tooltip={tooltip}
                 info={info}
                 labelPosition={labelPosition}
                 width={width}
-                labelWidth={labelWidth}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='text'
-                buttonGroup={true}>
-                {inputField()}
+                labelWidth={labelWidth}>
+                <div className='button-group'>
+                    {options.map((option, i) => {
+                        const optionKey = option.value;
+                        const optionLabel = option.label;
+                        const icon = option.icon ? option.icon : null;
+                        const tooltipId = `${optionKey}-${i}`;
+                        const activeOption = optionKey === value;
+                        const activeClass = activeOption ? 'active' : disabled ? 'disabled' : '';
+                        const onClick = !activeOption
+                            ? () => {
+                                  this.props.onChange(optionKey);
+                              }
+                            : null;
+
+                        return (
+                            <div
+                                key={`option-${optionKey}`}
+                                style={optionStyle}
+                                className={`button-group-option ${activeClass}`}
+                                {...renderTooltipProps(tooltipId, option.tooltip)}
+                                onClick={
+                                    typeof option.onDoubleClick === 'function'
+                                        ? () =>
+                                              this.handleMultipleClicks(
+                                                  onClick,
+                                                  option.onDoubleClick
+                                              )
+                                        : onClick
+                                }>
+                                {!icon ? optionLabel : icon}
+                                {renderTooltip(tooltipId, option.tooltip)}
+                            </div>
+                        );
+                    })}
+                </div>
             </FieldWrapper>
         );
     };

package/src/components/checkbox-field/CheckboxField.tsx

@@ -13,15 +13,6 @@ interface ICheckboxFieldProps {
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
 }
 
 class CheckboxField extends React.PureComponent<ICheckboxFieldProps> {
@@ -37,42 +28,18 @@ class CheckboxField extends React.PureComponent<ICheckboxFieldProps> {
     }
 
     public render() {
-        const {
-            value,
-            width,
-            tooltip,
-            info,
-            labelPosition,
-            labelWidth,
-            showCopyPropIds,
-            propKey,
-            override,
-            inventory,
-            setOverride,
-            removeOverride,
-            onClose,
-            activeOverride
-        } = this.props;
+        const { value, label, width, tooltip, info, labelPosition, labelWidth } = this.props;
         const icon = value === true ? ICON_CHECK : null;
 
         return (
             <FieldWrapper
                 customClass='checkbox-field'
-                label={this.props.label}
+                label={label}
                 tooltip={tooltip}
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='boolean'>
+                width={width}>
                 <div
                     className='checkbox'
                     onClick={(e) => this.toggle(e)}>

package/src/components/color-field/ColorField.tsx

@@ -19,15 +19,6 @@ interface IColorFieldProps {
     pickerPosition?: string;
     labelWidth?: string | number;
     disabled?: boolean;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
 }
 
 interface IColorFieldState {
@@ -112,6 +103,7 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
 
     public render() {
         const {
+            label,
             width,
             buttons,
             tooltip,
@@ -122,15 +114,7 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
             labelPosition,
             pickerPosition,
             labelWidth,
-            disabled,
-            override,
-            showCopyPropIds,
-            propKey,
-            inventory,
-            setOverride,
-            removeOverride,
-            onClose,
-            activeOverride
+            disabled
         } = this.props;
         const { pickerOpen } = this.state;
         const disableAlpha = !enableAlpha;
@@ -157,22 +141,13 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
         return (
             <FieldWrapper
                 customClass='color-field'
-                label={this.props.label}
+                label={label}
                 tooltip={tooltip}
                 buttons={buttons}
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='color'>
+                width={width}>
                 <div style={transparentBg}>
                     <div
                         className='swatch'

package/src/components/controlled-list/ControlledList.tsx

@@ -1,23 +1,17 @@
 import * as React from 'react';
 import Button from '../button/Button';
-import { ICON_BRACKET_CURLY, ICON_CHECK, ICON_TIMES } from '../../constants/icons';
-
-export type ControlListType = 'text' | 'number' | 'color' | 'textarea' | 'boolean' | 'icon';
+import { ICON_TIMES } from '../../constants/icons';
 
 interface IControlledListProps {
     items?: any[];
     removable?: boolean;
     onRemove?(index): void;
-    type?: ControlListType;
-    content?: any;
-    propKey?: string;
-    previewMultiplier?: number;
 }
 
 class ControlledList extends React.PureComponent<IControlledListProps> {
-    constructor(props: IControlledListProps) {
-        super(props);
-    }
+    private inputRef: any;
+
+    private submitHandler: any;
 
     public renderRemoveButton(index) {
         const { removable } = this.props;
@@ -37,61 +31,19 @@ class ControlledList extends React.PureComponent<IControlledListProps> {
     }
 
     public render() {
-        const { items, type, content, previewMultiplier } = this.props;
+        const { items } = this.props;
         let buttons: JSX.Element[];
+
         if (items) {
             buttons = items.map((item, i) => {
-                switch (type) {
-                    case 'text':
-                    case 'number':
-                        const previewValue =
-                            typeof item === 'number' ? `${item * previewMultiplier}` : item;
-                        return (
-                            <div
-                                className='item'
-                                key={`item-${i}`}>
-                                <p>{previewValue ? `{{ ${previewValue} }}` : 'PREVIEW NOT SET'}</p>
-                            </div>
-                        );
-                    case 'textarea':
-                        return (
-                            <div
-                                className='item textarea rta'
-                                key={`item-${i}`}>
-                                <textarea
-                                    className='rta__textarea'
-                                    value={item}
-                                    disabled={true}
-                                />
-                            </div>
-                        );
-                    case 'boolean':
-                        const icon = content ? ICON_BRACKET_CURLY : item ? ICON_CHECK : null;
-                        return (
-                            <div
-                                className={`item ${content ? 'icon-toggle' : 'checkbox'}`}
-                                key={`item-${i}`}>
-                                {icon}
-                            </div>
-                        );
-                    case 'color':
-                        return (
-                            <div
-                                className='item color'
-                                key={`item-${i}`}
-                                style={{ backgroundColor: item }}
-                            />
-                        );
-                    default:
-                        return (
-                            <div
-                                className='item'
-                                key={`item-${i}`}>
-                                {item}
-                                {this.renderRemoveButton(i)}
-                            </div>
-                        );
-                }
+                return (
+                    <div
+                        className='item'
+                        key={`item-${i}`}>
+                        {item}
+                        {this.renderRemoveButton(i)}
+                    </div>
+                );
             });
         }
 

package/src/components/data-table/DataTable.tsx

@@ -79,6 +79,8 @@ interface IDataTableProps {
     // controlled sorting props, use internal sorting if not set
     sortBy?: any[];
     onSort?: (sortBy: any[]) => void;
+    maxItemsPerPage?: number;
+    minItemsPerPage?: number;
 
     // controlled selection props
     highlightBy?: any;
@@ -92,6 +94,9 @@ interface IDataTableProps {
     expandTags?: boolean;
 
     keyboardNav?: boolean;
+
+    useSimplePagination?: boolean;
+    hasMore?: boolean;
 }
 
 const processColumnData = (freshColumns): any[] => {
@@ -537,7 +542,11 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                             ? () => props.onPage(props.currentPage - 1, pageSize)
                             : previousPage,
                         itemsPerPage: props.itemsPerPage,
-                        onItemsPerPage: (i) => props.onItemsPerPage(i)
+                        onItemsPerPage: (i) => props.onItemsPerPage(i),
+                        maxItemsPerPage: props.maxItemsPerPage,
+                        minItemsPerPage: props.minItemsPerPage,
+                        useSimplePagination: props.useSimplePagination,
+                        hasMore: props.hasMore
                     }}
                 />
             )}

package/src/components/data-table/Paginator.tsx

@@ -25,6 +25,10 @@ interface IPaginatorProps {
     setPageSize: (size: number) => void;
     itemsPerPage: number;
     onItemsPerPage: (size: number) => void;
+    maxItemsPerPage?: number;
+    minItemsPerPage?: number;
+    useSimplePagination?: boolean;
+    hasMore?: boolean;
 }
 
 const Paginator: React.FC<IPaginatorProps> = ({
@@ -38,7 +42,11 @@ const Paginator: React.FC<IPaginatorProps> = ({
     previousPage,
     nextPage,
     itemsPerPage,
-    onItemsPerPage
+    onItemsPerPage,
+    maxItemsPerPage,
+    minItemsPerPage,
+    useSimplePagination,
+    hasMore
 }) => {
     const [getPageIndex, setPageIndex] = React.useState<number>(pageIndex);
     const [getItemsPerPage, setItemsPerPage] = React.useState<number>(itemsPerPage);
@@ -98,43 +106,60 @@ const Paginator: React.FC<IPaginatorProps> = ({
     return (
         <section className='ip-table-pagination'>
             <span>
-                <Button
-                    style='subtle'
-                    size='small'
-                    tooltip='Go to first page'
-                    disabled={!canPreviousPage}
-                    onClick={() => gotoPage(1, pageSize)}>
-                    {ICON_ANGLE_DOUBLE_LEFT}
-                </Button>
+                {!useSimplePagination && (
+                    <Button
+                        style='subtle'
+                        size='small'
+                        tooltip='Go to first page'
+                        disabled={!canPreviousPage}
+                        onClick={() => gotoPage(1, pageSize)}>
+                        {ICON_ANGLE_DOUBLE_LEFT}
+                    </Button>
+                )}
                 <Button
                     style='subtle'
                     size='small'
                     tooltip='Go to previous page'
-                    disabled={!canPreviousPage}
-                    onClick={() => previousPage()}>
+                    disabled={(!canPreviousPage || !useSimplePagination) && getPageIndex === 1}
+                    onClick={() => {
+                        if (!useSimplePagination) {
+                            previousPage();
+                        } else {
+                            gotoPage(getPageIndex - 1, pageSize);
+                        }
+                    }}>
                     {ICON_ANGLE_LEFT}
                 </Button>
                 <Button
                     style='subtle'
                     size='small'
                     tooltip='Go to next page'
-                    disabled={!canNextPage}
-                    onClick={() => nextPage()}>
+                    disabled={(!canNextPage || !useSimplePagination) && !hasMore}
+                    onClick={() => {
+                        if (!useSimplePagination && !hasMore) {
+                            nextPage();
+                        } else {
+                            gotoPage(getPageIndex + 1, pageSize);
+                        }
+                    }}>
                     {ICON_ANGLE_RIGHT}
                 </Button>
-                <Button
-                    style='subtle'
-                    size='small'
-                    tooltip='Go to last page'
-                    disabled={!canNextPage}
-                    onClick={() => gotoPage(getPageCount, pageSize)}>
-                    {ICON_ANGLE_DOUBLE_RIGHT}
-                </Button>
+                {!useSimplePagination && (
+                    <Button
+                        style='subtle'
+                        size='small'
+                        tooltip='Go to last page'
+                        disabled={!canNextPage}
+                        onClick={() => gotoPage(getPageCount, pageSize)}>
+                        {ICON_ANGLE_DOUBLE_RIGHT}
+                    </Button>
+                )}
                 &nbsp;&nbsp;
                 <span>
                     {copy.table.page}&nbsp;&nbsp;
                     <strong>
-                        {getPageIndex} of {getPageCount}
+                        {getPageIndex} {useSimplePagination ? '' : 'of'}{' '}
+                        {!useSimplePagination ? getPageCount : ''}
                     </strong>
                     &nbsp;&nbsp;
                 </span>
@@ -196,13 +221,17 @@ const Paginator: React.FC<IPaginatorProps> = ({
                         }}
                         onBlur={() => onItemsPerPageBlur()}
                         onKeyDown={(e) => onItemsPerPageKeyDown(e)}
+                        max={maxItemsPerPage}
+                        min={minItemsPerPage}
                     />
                 </span>
             </span>
 
-            <span className='total-assets'>
-                {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
-            </span>
+            {!useSimplePagination && (
+                <span className='total-assets'>
+                    {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
+                </span>
+            )}
         </section>
     );
 };