@scality/core-ui 0.115.0

package/dist/next.d.ts

@@ -0,0 +1,15 @@
+import '@fortawesome/fontawesome-free/css/all.css';
+import './index.css';
+export { Button } from './components/buttonv2/Buttonv2.component';
+export { CopyButton } from './components/buttonv2/CopyButton.component';
+export { Tabs, Tab } from './components/tabsv2/Tabsv2.component';
+export { Table } from './components/tablev2/Tablev2.component';
+export { LineTemporalChart } from './components/linetemporalchart/LineTemporalChart.component';
+export { MetricsTimeSpanProvider, useMetricsTimeSpan, } from './components/linetemporalchart/MetricTimespanProvider';
+export { SyncedCursorCharts } from './components/vegachartv2/SyncedCursorCharts';
+export { Select } from './components/selectv2/Selectv2.component';
+export { HealthSelector } from './components/healthselectorv2/HealthSelector.component';
+export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThemeProvider';
+export { Box } from './components/box/Box';
+export { Input } from './components/inputv2/inputv2';
+//# sourceMappingURL=next.d.ts.map

package/dist/next.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/next.js

@@ -0,0 +1,14 @@
+import '@fortawesome/fontawesome-free/css/all.css';
+import './index.css';
+export { Button } from './components/buttonv2/Buttonv2.component';
+export { CopyButton } from './components/buttonv2/CopyButton.component';
+export { Tabs, Tab } from './components/tabsv2/Tabsv2.component';
+export { Table } from './components/tablev2/Tablev2.component';
+export { LineTemporalChart } from './components/linetemporalchart/LineTemporalChart.component';
+export { MetricsTimeSpanProvider, useMetricsTimeSpan, } from './components/linetemporalchart/MetricTimespanProvider';
+export { SyncedCursorCharts } from './components/vegachartv2/SyncedCursorCharts';
+export { Select } from './components/selectv2/Selectv2.component';
+export { HealthSelector } from './components/healthselectorv2/HealthSelector.component';
+export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThemeProvider';
+export { Box } from './components/box/Box';
+export { Input } from './components/inputv2/inputv2';

package/dist/organisms/attachments/AttachmentConfirmationModal.d.ts

@@ -0,0 +1,22 @@
+import { ComponentType } from 'react';
+import { UseMutationOptions } from 'react-query';
+import { AttachmentOperation, AttachmentAction } from './AttachmentTypes';
+export declare function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({ attachmentOperations, getAttachmentMutationOptions, resourceType, resourceName, redirectUrl, EntityIcon, cancelButtonDisabled, onCancel, onExit, }: {
+    attachmentOperations: AttachmentOperation<ENTITY_TYPE>[];
+    getAttachmentMutationOptions: () => UseMutationOptions<unknown, unknown, {
+        action: AttachmentAction;
+        type: ENTITY_TYPE;
+        entityName: string;
+        id: string;
+    }>;
+    resourceName: string;
+    resourceType: RESOURCE_TYPE;
+    redirectUrl: string;
+    EntityIcon: ComponentType<{
+        type: ENTITY_TYPE | RESOURCE_TYPE;
+    }>;
+    cancelButtonDisabled?: boolean;
+    onCancel?: () => void;
+    onExit?: (successfullOperations: AttachmentOperation<ENTITY_TYPE>[], failedOperations: AttachmentOperation<ENTITY_TYPE>[]) => void;
+}): JSX.Element;
+//# sourceMappingURL=AttachmentConfirmationModal.d.ts.map

package/dist/organisms/attachments/AttachmentConfirmationModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentConfirmationModal.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAe,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAQ1E,wBAAgB,2BAA2B,CAAC,WAAW,EAAE,aAAa,EAAE,EACtE,oBAAoB,EACpB,4BAA4B,EAC5B,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,oBAAoB,EACpB,QAAQ,EACR,MAAM,GACP,EAAE;IACD,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;IACzD,4BAA4B,EAAE,MAAM,kBAAkB,CACpD,OAAO,EACP,OAAO,EACP;QACE,MAAM,EAAE,gBAAgB,CAAC;QACzB,IAAI,EAAE,WAAW,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,EAAE,EAAE,MAAM,CAAC;KACZ,CACF,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,aAAa,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;QAAE,IAAI,EAAE,WAAW,GAAG,aAAa,CAAA;KAAE,CAAC,CAAC;IACjE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,CACP,qBAAqB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,EACzD,gBAAgB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KACjD,IAAI,CAAC;CACX,eA0QA"}

package/dist/organisms/attachments/AttachmentConfirmationModal.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Table } from '../../components/tablev2/Tablev2.component';
+import { Box, Button } from '../../next';
+import { useMutation } from 'react-query';
+import { AttachmentAction } from './AttachmentTypes';
+import { useTheme } from 'styled-components';
+import { useHistory } from 'react-router';
+import { Icon, LargerText, Modal, SecondaryText, Stack, Wrap } from '../..';
+//The entity is the "thing" you want to attach to the resource, sorry about the naming :(
+export function AttachmentConfirmationModal({ attachmentOperations, getAttachmentMutationOptions, resourceType, resourceName, redirectUrl, EntityIcon, cancelButtonDisabled, onCancel, onExit, }) {
+    const history = useHistory();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const handleClose = () => {
+        setIsModalOpen(false);
+    };
+    const [attachmentOperationsStatuses, setAttachmentOperationsStatuses] = useState({});
+    const attachmentMutation = useMutation({
+        ...getAttachmentMutationOptions(),
+        onSettled: (_, error, flatEntity) => {
+            setAttachmentOperationsStatuses((statuses) => ({
+                ...statuses,
+                [flatEntity.id]: error ? 'Error' : 'Success',
+            }));
+        },
+    });
+    const attachmentOperationsFlat = attachmentOperations.map((attachmentOperation) => {
+        return {
+            action: attachmentOperation.action,
+            type: attachmentOperation.entity.type,
+            entityName: attachmentOperation.entity.name,
+            id: attachmentOperation.entity.id,
+        };
+    });
+    const attach = () => {
+        attachmentOperationsFlat.forEach((attachmentOperationFlat) => {
+            if (attachmentOperationsStatuses[attachmentOperationFlat.id] ===
+                'Waiting for confirmation' ||
+                attachmentOperationsStatuses[attachmentOperationFlat.id] === 'Error' ||
+                !attachmentOperationsStatuses[attachmentOperationFlat.id]) {
+                setAttachmentOperationsStatuses((attachmentOperationsStatuses) => {
+                    return {
+                        ...attachmentOperationsStatuses,
+                        [attachmentOperationFlat.id]: 'Waiting for confirmation',
+                    };
+                });
+                attachmentMutation.mutate({
+                    ...attachmentOperationFlat,
+                });
+            }
+        });
+    };
+    const isAttachNotDone = attachmentOperationsFlat.find((attachmentOperation) => !attachmentOperationsStatuses[attachmentOperation.id]);
+    const handleExit = () => {
+        if (onExit) {
+            const successfulOperations = Object.entries(attachmentOperationsStatuses)
+                .filter(([_, status]) => status === 'Success')
+                .flatMap(([operationId]) => {
+                const op = attachmentOperations.find((op) => op.entity.id === operationId);
+                if (op)
+                    return [op];
+                return [];
+            });
+            const failedOperations = Object.entries(attachmentOperationsStatuses)
+                .filter(([_, status]) => status === 'Error')
+                .flatMap(([operationId]) => {
+                const op = attachmentOperations.find((op) => op.entity.id === operationId);
+                if (op)
+                    return [op];
+                return [];
+            });
+            onExit(successfulOperations, failedOperations);
+        }
+        handleClose();
+        history.push(redirectUrl);
+    };
+    const modalFooter = () => {
+        return (_jsxs(Wrap, { children: [_jsx("p", {}), _jsx(_Fragment, { children: isAttachNotDone ? (_jsxs(Stack, { children: [_jsx(Button, { variant: "outline", onClick: handleClose, label: "Cancel" }), _jsx(Button, { icon: _jsx(Icon, { name: "Arrow-right" }), variant: "primary", onClick: attach, label: "Confirm", disabled: attachmentMutation.isLoading })] })) : (_jsx(Button, { icon: _jsx(Icon, { name: "Arrow-right" }), variant: "primary", onClick: () => {
+                            handleExit();
+                        }, label: "Exit" })) })] }));
+    };
+    function AttachmentList() {
+        const theme = useTheme();
+        const columns = [
+            {
+                Header: 'Action',
+                accessor: 'action',
+                cellStyle: {
+                    width: '12.5%',
+                },
+                Cell: ({ value }) => {
+                    return value === AttachmentAction.ADD ? (_jsxs("span", { children: [_jsx(Icon, { name: "Link" }), " Attach"] })) : (_jsxs(Box, { color: theme.statusCritical, children: [_jsx(Icon, { name: "Unlink" }), " Detach"] }));
+                },
+            },
+            {
+                Header: 'Type',
+                accessor: 'type',
+                cellStyle: {
+                    width: '12.5%',
+                },
+                Cell: ({ value }) => {
+                    return _jsx(EntityIcon, { type: value });
+                },
+            },
+            {
+                Header: 'Entity name',
+                accessor: 'entityName',
+                cellStyle: {
+                    width: '42.5%',
+                },
+            },
+            {
+                Header: 'Attachment status',
+                accessor: 'id',
+                cellStyle: {
+                    width: '32.5%',
+                },
+                Cell: ({ value: resourceId }) => {
+                    if (attachmentOperationsStatuses[resourceId] === 'Error') {
+                        return (_jsxs(Box, { display: "flex", gap: 8, alignItems: "center", children: [_jsx(Icon, { color: "statusCritical", name: "Times-circle" }), attachmentOperationsStatuses[resourceId], ' ', _jsx(Button, { size: "inline", onClick: attach, variant: "outline", label: "Retry" })] }));
+                    }
+                    if (attachmentOperationsStatuses[resourceId] === 'Success') {
+                        return (_jsxs(Box, { display: "flex", gap: 8, alignItems: "center", children: [_jsx(Icon, { color: "statusHealthy", name: "Check-circle" }), attachmentOperationsStatuses[resourceId]] }));
+                    }
+                    return (_jsx(_Fragment, { children: attachmentOperationsStatuses[resourceId] ||
+                            'Waiting for confirmation' }));
+                },
+            },
+        ];
+        return (_jsxs("div", { style: { height: '25rem', width: '50rem' }, children: [_jsx("div", { children: "The following entities will be attached or detached: " }), _jsxs(Box, { display: "flex", gap: 24, alignItems: "center", children: [_jsx(SecondaryText, { children: _jsx(EntityIcon, { type: resourceType }) }), _jsx("p", { children: resourceName })] }), _jsx(Table, { columns: columns, data: attachmentOperationsFlat, defaultSortingKey: 'entityName', children: _jsx(Table.SingleSelectableContent, { rowHeight: "h32", separationLineVariant: "backgroundLevel3", backgroundVariant: "backgroundLevel1", children: (Rows) => {
+                            return _jsx(_Fragment, { children: Rows });
+                        } }) })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Cancel", variant: "outline", disabled: cancelButtonDisabled, onClick: () => {
+                    if (onCancel)
+                        onCancel();
+                    history.push(redirectUrl);
+                } }), _jsx(Button, { icon: _jsx(Icon, { name: "Save" }), label: "Save", onClick: () => {
+                    setAttachmentOperationsStatuses({});
+                    setIsModalOpen(true);
+                }, variant: "primary", disabled: attachmentOperations.length === 0 }), _jsx(Modal, { close: isAttachNotDone ? handleClose : handleExit, footer: modalFooter(), isOpen: isModalOpen, title: _jsxs(Box, { display: "flex", gap: 8, children: [_jsx(LargerText, { children: _jsx(Icon, { name: "Link" }) }), _jsx(LargerText, { children: "Attachment" })] }), children: _jsx(AttachmentList, {}) })] }));
+}

package/dist/organisms/attachments/AttachmentTable.d.ts

@@ -0,0 +1,37 @@
+import { PropsWithChildren } from 'react';
+import { AttachableEntity, AttachmentOperation } from './AttachmentTypes';
+import { UseQueryOptions } from 'react-query';
+export type AttachmentTableProps<ENTITY_TYPE> = {
+    initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE>[];
+    initiallyAttachedEntitiesStatus: 'idle' | 'loading' | 'success' | 'error';
+    initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE>[];
+    entityName: {
+        plural: string;
+        singular: string;
+    };
+    getNameQuery?: (entity: AttachableEntity<ENTITY_TYPE>) => UseQueryOptions<unknown, unknown, string>;
+    searchEntityPlaceholder: string;
+    onAttachmentsOperationsChanged: (attachmentOperations: AttachmentOperation<ENTITY_TYPE>[]) => void;
+    filteredEntities: {
+        status: 'idle';
+    } | {
+        status: 'loading' | 'error';
+        data?: {
+            number: number;
+            entities: AttachableEntity<ENTITY_TYPE>[];
+        };
+    } | {
+        status: 'success';
+        data: {
+            number: number;
+            entities: AttachableEntity<ENTITY_TYPE>[];
+        };
+    };
+    onEntitySearchChange: (search?: string) => void;
+};
+export declare const AttachmentProvider: <ENTITY_TYPE extends unknown>({ children, }: PropsWithChildren<{}>) => JSX.Element;
+export declare const useAttachmentOperations: () => {
+    resetAttachmentTable: (initiallyAttachedEntities: AttachableEntity<any>[], initialAttachmentOperations: AttachmentOperation<any>[]) => void;
+};
+export declare const AttachmentTable: <ENTITY_TYPE>({ initiallyAttachedEntities, initiallyAttachedEntitiesStatus, initialAttachmentOperations, onAttachmentsOperationsChanged, entityName, searchEntityPlaceholder, getNameQuery, filteredEntities, onEntitySearchChange, }: AttachmentTableProps<ENTITY_TYPE>) => JSX.Element;
+//# sourceMappingURL=AttachmentTable.d.ts.map

package/dist/organisms/attachments/AttachmentTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentTable.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAef,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAY,eAAe,EAAE,MAAM,aAAa,CAAC;AAOxD,MAAM,MAAM,oBAAoB,CAAC,WAAW,IAAI;IAC9C,yBAAyB,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC;IAC3D,+BAA+B,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1E,2BAA2B,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;IAChE,UAAU,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAClC,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAC/C,uBAAuB,EAAE,MAAM,CAAC;IAChC,8BAA8B,EAAE,CAC9B,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KACrD,IAAI,CAAC;IACV,gBAAgB,EACZ;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,GAClB;QACE,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACtE,GACD;QACE,MAAM,EAAE,SAAS,CAAC;QAClB,IAAI,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACrE,CAAC;IACN,oBAAoB,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AA6FF,eAAO,MAAM,kBAAkB,+CAE5B,kBAAkB,EAAE,CAAC,gBAmBvB,CAAC;AAEF,eAAO,MAAM,uBAAuB;sDA5BL,iBAAiB,GAAG,CAAC,EAAE,+BACrB,oBAAoB,GAAG,CAAC,EAAE,KACpD,IAAI;CAkCV,CAAC;AAEF,eAAO,MAAM,eAAe,0RA2hB3B,CAAC"}

package/dist/organisms/attachments/AttachmentTable.js

@@ -0,0 +1,375 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState, } from 'react';
+import { useCombobox } from 'downshift';
+import { Box, Button, Table } from '../../next';
+import { ConstrainedText, Icon, Loader, SearchInput, SecondaryText, Text, Tooltip, } from '../../index';
+import styled from 'styled-components';
+import { spacing, Stack, Wrap } from '../../spacing';
+import { AttachmentAction, } from './AttachmentTypes';
+import { useQuery } from 'react-query';
+import { EmptyCell } from '../../components/tablev2/Tablev2.component';
+const rowHeight = 'h48';
+const MenuContainer = styled.ul `
+  background-color: ${(props) => props.theme.backgroundLevel1};
+  background-clip: content-box;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  width: ${(props) => props.width};
+  z-index: 1;
+  margin-top: -1.7rem;
+  margin-left: 0;
+  margin-bottom: 0;
+  margin-right: 0;
+  ${(props) => props.isOpen
+    ? `
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+      border: 1px solid ${props.theme.selectedActive};
+  `
+    : props.searchInputIsFocused
+        ? `border-bottom: 1px solid ${props.theme.selectedActive};`
+        : ''}
+  border-top: 0;
+  li {
+    padding: ${spacing.r8};
+    cursor: pointer;
+    border-top: 1px solid ${(props) => props.theme.backgroundLevel2};
+    &[aria-selected='true'] {
+      background: ${(props) => props.theme.highlight};
+    }
+  }
+`;
+const SearchBoxContainer = styled.div `
+  margin-bottom: ${spacing.r24};
+  width: 78%;
+  .sc-tooltip {
+    width: 100%;
+  }
+`;
+const StyledSearchInput = styled(SearchInput) `
+  flex-grow: 1;
+  .sc-input-type:focus {
+    border-bottom: 0;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+`;
+const AttachmentTableContainer = styled.div `
+  height: 100%;
+`;
+const StyledTable = styled.div `
+  background: ${(props) => props.theme.backgroundLevel4};
+  height: 100%;
+`;
+const CenterredSecondaryText = styled(SecondaryText) `
+  display: block;
+  text-align: center;
+`;
+const PrivateAttachmentContext = createContext(null);
+const AttachmentContext = createContext(null);
+export const AttachmentProvider = ({ children, }) => {
+    const [resetAttachmentTable, setResetAttachementTable] = useState((_, __) => { });
+    return (_jsx(PrivateAttachmentContext.Provider, { value: { setResetAttachementTable }, children: _jsx(AttachmentContext.Provider, { value: { resetAttachmentTable }, children: children }) }));
+};
+export const useAttachmentOperations = () => {
+    const ctx = useContext(AttachmentContext);
+    if (ctx === null) {
+        throw new Error("useAttachmentOperations can't be used outside AttachmentProvider");
+    }
+    return ctx;
+};
+export const AttachmentTable = ({ initiallyAttachedEntities, initiallyAttachedEntitiesStatus, initialAttachmentOperations, onAttachmentsOperationsChanged, entityName, searchEntityPlaceholder, getNameQuery, filteredEntities, onEntitySearchChange, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const privateAttachmentContext = useContext(PrivateAttachmentContext);
+    const exposedAttachmentContext = useContext(AttachmentContext);
+    if (!privateAttachmentContext || !exposedAttachmentContext) {
+        throw new Error('Cannot use AttachmentTable outside AttachmentProvider');
+    }
+    //Desired attached entities and onAttachmentsOperationsChanged handling
+    const convertInitiallyAttachedEntitiesToDesiredAttachedEntities = useCallback((initiallyAttachedEntities, operations = initialAttachmentOperations) => {
+        return initiallyAttachedEntities
+            .filter((attachedEntities) => !operations.find((op) => op.entity.id === attachedEntities.id))
+            .map((entity) => ({
+            ...entity,
+            isPending: false,
+            action: null,
+        }));
+    }, [initialAttachmentOperations]);
+    const convertInitiallyAttachementOperationsToDesiredAttachedEntities = useCallback((initialAttachmentOperations) => {
+        return initialAttachmentOperations
+            .filter((op) => op.action !== AttachmentAction.REMOVE)
+            .map((op) => ({
+            ...op.entity,
+            isPending: true,
+            action: op.action,
+        }));
+    }, []);
+    const [{ desiredAttachedEntities, attachmentsOperations }, dispatch] = useReducer((state, action) => {
+        switch (action.action) {
+            case 'RESET_DESIRED_ATTACHED_ENTITIES':
+                return {
+                    desiredAttachedEntities: action.entities,
+                    attachmentsOperations: action.operations,
+                };
+            case AttachmentAction.ADD:
+                if (!state.desiredAttachedEntities.find((entity) => entity.id === action.entity.id)) {
+                    const newAttachmentsOperations = [...state.attachmentsOperations];
+                    const existingOperationIndexOnThisEntity = state.attachmentsOperations.findIndex((operation) => operation.entity.id === action.entity.id);
+                    //When ADD, we check if it's already exist in operations. If so, we delete the previous operation and not proceed to the ADD.
+                    if (existingOperationIndexOnThisEntity !== -1 &&
+                        state.attachmentsOperations[existingOperationIndexOnThisEntity]
+                            .action === AttachmentAction.REMOVE) {
+                        newAttachmentsOperations.splice(existingOperationIndexOnThisEntity, 1);
+                        const newState = {
+                            ...state,
+                            desiredAttachedEntities: [
+                                { ...action.entity },
+                                ...state.desiredAttachedEntities,
+                            ],
+                            attachmentsOperations: [...newAttachmentsOperations],
+                        };
+                        return newState;
+                    }
+                    else {
+                        const newState = {
+                            ...state,
+                            desiredAttachedEntities: [
+                                { ...action.entity, isPending: true },
+                                ...state.desiredAttachedEntities,
+                            ],
+                            attachmentsOperations: [...newAttachmentsOperations, action],
+                        };
+                        return newState;
+                    }
+                }
+                break;
+            case AttachmentAction.REMOVE:
+                if (state.desiredAttachedEntities.find((entity) => entity.id === action.entity.id)) {
+                    const newDesiredAttachedEntities = [
+                        ...state.desiredAttachedEntities,
+                    ];
+                    newDesiredAttachedEntities.splice(state.desiredAttachedEntities.findIndex((entity) => entity.id === action.entity.id), 1);
+                    const newAttachmentsOperations = [...state.attachmentsOperations];
+                    const existingOperationIndexOnThisEntity = state.attachmentsOperations.findIndex((operation) => operation.entity.id === action.entity.id);
+                    if (existingOperationIndexOnThisEntity !== -1 &&
+                        state.attachmentsOperations[existingOperationIndexOnThisEntity]
+                            .action === AttachmentAction.ADD) {
+                        newAttachmentsOperations.splice(existingOperationIndexOnThisEntity, 1);
+                    }
+                    else if (existingOperationIndexOnThisEntity !== -1 &&
+                        state.attachmentsOperations[existingOperationIndexOnThisEntity]
+                            .action === AttachmentAction.REMOVE) {
+                        return state;
+                    }
+                    else {
+                        newAttachmentsOperations.push(action);
+                    }
+                    const newState = {
+                        ...state,
+                        desiredAttachedEntities: newDesiredAttachedEntities,
+                        attachmentsOperations: newAttachmentsOperations,
+                    };
+                    return newState;
+                }
+                break;
+        }
+        return state;
+    }, {
+        desiredAttachedEntities: [
+            ...convertInitiallyAttachedEntitiesToDesiredAttachedEntities(initiallyAttachedEntities),
+            ...convertInitiallyAttachementOperationsToDesiredAttachedEntities(initialAttachmentOperations),
+        ],
+        attachmentsOperations: initialAttachmentOperations,
+    });
+    useEffect(() => {
+        onAttachmentsOperationsChanged(attachmentsOperations);
+    }, [onAttachmentsOperationsChanged, attachmentsOperations]);
+    const previousInitiallyAttachedEntitiesStatus = useRef(initiallyAttachedEntitiesStatus);
+    useMemo(() => {
+        if (initiallyAttachedEntitiesStatus === 'success' &&
+            previousInitiallyAttachedEntitiesStatus.current !==
+                initiallyAttachedEntitiesStatus) {
+            previousInitiallyAttachedEntitiesStatus.current = 'success';
+            dispatch({
+                action: 'RESET_DESIRED_ATTACHED_ENTITIES',
+                entities: [
+                    ...convertInitiallyAttachedEntitiesToDesiredAttachedEntities(initiallyAttachedEntities),
+                    ...convertInitiallyAttachementOperationsToDesiredAttachedEntities(initialAttachmentOperations),
+                ],
+                operations: initialAttachmentOperations,
+            });
+        }
+        else {
+            previousInitiallyAttachedEntitiesStatus.current =
+                initiallyAttachedEntitiesStatus;
+        }
+    }, [
+        initiallyAttachedEntitiesStatus,
+        initiallyAttachedEntities,
+        initialAttachmentOperations,
+        convertInitiallyAttachedEntitiesToDesiredAttachedEntities,
+        convertInitiallyAttachementOperationsToDesiredAttachedEntities,
+    ]);
+    useEffect(() => {
+        privateAttachmentContext.setResetAttachementTable(() => {
+            return (newlyAttachedEntities, newAttachmentOperations) => {
+                dispatch({
+                    action: 'RESET_DESIRED_ATTACHED_ENTITIES',
+                    entities: [
+                        ...convertInitiallyAttachedEntitiesToDesiredAttachedEntities(newlyAttachedEntities, newAttachmentOperations),
+                        ...convertInitiallyAttachementOperationsToDesiredAttachedEntities(newAttachmentOperations),
+                    ],
+                    operations: newAttachmentOperations,
+                });
+            };
+        });
+    }, [
+        convertInitiallyAttachedEntitiesToDesiredAttachedEntities,
+        convertInitiallyAttachementOperationsToDesiredAttachedEntities,
+        dispatch,
+    ]);
+    const resetRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const onSelectedItemChange = useCallback((onChangeParams) => {
+        if (onChangeParams.selectedItem) {
+            dispatch({
+                action: AttachmentAction.ADD,
+                entity: onChangeParams.selectedItem,
+            });
+            if (resetRef.current)
+                resetRef.current();
+            if (searchInputRef.current)
+                searchInputRef.current.blur();
+        }
+    }, [resetRef]);
+    const { isOpen, getMenuProps, getInputProps, openMenu, getItemProps, reset } = useCombobox({
+        items: filteredEntities.status === 'success'
+            ? filteredEntities.data.entities
+            : [],
+        onSelectedItemChange,
+        onInputValueChange: ({ inputValue }) => {
+            onEntitySearchChange(inputValue);
+        },
+    });
+    useMemo(() => {
+        //@ts-expect-error assigning to the ref is expected here
+        resetRef.current = reset;
+    }, [reset]);
+    // UI styling states
+    const [searchWidth, setSearchWidth] = useState('0px');
+    const [searchInputIsFocused, setSearchInputIsFocused] = useState(false);
+    return (_jsxs(AttachmentTableContainer, { children: [_jsx(SearchBoxContainer, { ref: (element) => {
+                    if (element) {
+                        setSearchWidth(element.getBoundingClientRect().width - 2 + 'px');
+                    }
+                }, children: filteredEntities.status === 'error' ? (_jsx(Tooltip, { overlay: _jsx(_Fragment, { children: "We failed to load the entities, hence search is disabled" }), children: _jsxs(Box, { display: "flex", alignItems: "center", width: "100%", gap: 8, children: [_jsx(StyledSearchInput, { placeholder: searchEntityPlaceholder, ...getInputProps({
+                                    ref: (element) => {
+                                        if (element)
+                                            searchInputRef.current = element;
+                                    },
+                                }), onFocus: () => {
+                                    openMenu();
+                                    setSearchInputIsFocused(true);
+                                }, onBlur: () => {
+                                    setSearchInputIsFocused(false);
+                                }, disableToggle: true, disabled: filteredEntities.status === 'error' }), _jsx(Loader, {})] }) })) : (_jsx(StyledSearchInput, { placeholder: searchEntityPlaceholder, ...getInputProps({
+                        ref: (element) => {
+                            if (element)
+                                searchInputRef.current = element;
+                        },
+                    }), onFocus: () => {
+                        openMenu();
+                        setSearchInputIsFocused(true);
+                    }, onBlur: () => {
+                        setSearchInputIsFocused(false);
+                    }, disableToggle: true })) }), _jsxs(MenuContainer, { ...getMenuProps(), width: searchWidth, isOpen: isOpen, searchInputIsFocused: searchInputIsFocused, children: [isOpen &&
+                        filteredEntities.status === 'success' &&
+                        ((_a = filteredEntities.data) === null || _a === void 0 ? void 0 : _a.entities.map((item, index) => (_jsx("li", { ...getItemProps({ item, index }), children: _jsx(Text, { children: item.name }) }, `${item.id}${index}`)))), isOpen && filteredEntities.status === 'loading' && (_jsx("li", { children: _jsx(Text, { children: "Searching..." }) })), isOpen && filteredEntities.status === 'error' && (_jsx("li", { children: _jsx(Text, { color: "statusCritical", children: "An error occured while searching" }) })), isOpen &&
+                        filteredEntities.status === 'success' &&
+                        (((_b = filteredEntities.data) === null || _b === void 0 ? void 0 : _b.number) || 0) >
+                            ((_c = filteredEntities.data) === null || _c === void 0 ? void 0 : _c.entities.length) && (_jsx("li", { children: _jsxs(Text, { isGentleEmphazed: true, color: "textSecondary", style: { textAlign: 'right' }, children: ["There", ' ', (((_d = filteredEntities.data) === null || _d === void 0 ? void 0 : _d.number) || 0) -
+                                    ((_e = filteredEntities.data) === null || _e === void 0 ? void 0 : _e.entities.length) ===
+                                    1
+                                    ? 'is'
+                                    : 'are', ' ', (((_f = filteredEntities.data) === null || _f === void 0 ? void 0 : _f.number) || 0) -
+                                    ((_g = filteredEntities.data) === null || _g === void 0 ? void 0 : _g.entities.length), ' ', "more", ' ', (((_h = filteredEntities.data) === null || _h === void 0 ? void 0 : _h.number) || 0) -
+                                    ((_j = filteredEntities.data) === null || _j === void 0 ? void 0 : _j.entities.length) ===
+                                    1
+                                    ? entityName.singular
+                                    : entityName.plural, ' ', "matching your search. Suggestion: try more specific search expression."] }) })), isOpen &&
+                        filteredEntities.status === 'success' &&
+                        ((_k = filteredEntities.data) === null || _k === void 0 ? void 0 : _k.entities.length) === 0 && (_jsx("li", { children: _jsxs(Text, { isGentleEmphazed: true, color: "textSecondary", children: ["No ", entityName.plural, " found matching your search."] }) }))] }), _jsx(StyledTable, { children: _jsx(Table, { columns: [
+                        {
+                            Header: _jsx(Box, { flex: 1.5, children: "Name" }),
+                            accessor: 'name',
+                            cellStyle: {
+                                flex: 1.5,
+                                marginRight: '1.5rem',
+                            },
+                            Cell: ({ value, row: { original: entity }, }) => {
+                                const { data: asyncName, status } = useQuery({
+                                    ...(getNameQuery
+                                        ? getNameQuery(entity)
+                                        : { queryKey: ['fakeQuery'], queryFn: () => value }),
+                                    enabled: !value,
+                                });
+                                if (value) {
+                                    return _jsx(ConstrainedText, { text: value, lineClamp: 2 });
+                                }
+                                if (status === 'error') {
+                                    return (_jsxs(_Fragment, { children: ["An error occured while loading ", entityName.singular, " name"] }));
+                                }
+                                if (status === 'loading' || status === 'idle') {
+                                    return _jsx(_Fragment, { children: "Loading..." });
+                                }
+                                if (status === 'success') {
+                                    if (!asyncName) {
+                                        return _jsx(EmptyCell, {});
+                                    }
+                                    return _jsx(ConstrainedText, { text: asyncName, lineClamp: 2 });
+                                }
+                                return _jsx(EmptyCell, {});
+                            },
+                        },
+                        {
+                            Header: _jsx(Box, { flex: 0.5, children: "Attachment status" }),
+                            accessor: 'isPending',
+                            cellStyle: {
+                                flex: 0.5,
+                            },
+                            Cell: ({ value }) => {
+                                return value ? _jsx(_Fragment, { children: "Pending" }) : _jsx(_Fragment, { children: "Attached" });
+                            },
+                        },
+                        {
+                            Header: _jsx(Box, { flex: 0.5 }),
+                            accessor: 'action',
+                            cellStyle: {
+                                textAlign: 'right',
+                                flex: 0.5,
+                                marginLeft: 'auto',
+                                marginRight: '0.5rem',
+                            },
+                            Cell: ({ row: { original: entity }, }) => (_jsx(Button, { size: "inline", onClick: () => {
+                                    dispatch({
+                                        action: AttachmentAction.REMOVE,
+                                        entity: {
+                                            name: entity.name,
+                                            id: entity.id,
+                                            type: entity.type,
+                                        },
+                                    });
+                                }, icon: _jsx(Icon, { name: "Close" }), label: "Remove", variant: "danger", disabled: !!entity.disableDetach })),
+                        },
+                    ], data: desiredAttachedEntities.map((entity) => ({
+                        ...entity,
+                        isPending: entity.isPending || false,
+                        action: null,
+                    })), defaultSortingKey: "name", children: _jsx(Table.SingleSelectableContent, { backgroundVariant: "backgroundLevel4", rowHeight: rowHeight, separationLineVariant: "backgroundLevel2", children: (rows) => (_jsxs(_Fragment, { children: [initiallyAttachedEntitiesStatus === 'idle' ||
+                                    initiallyAttachedEntitiesStatus === 'loading' ? (_jsxs(Wrap, { children: [_jsx("p", {}), _jsxs(Stack, { children: [_jsx(Loader, {}), _jsxs(Text, { children: ["Loading ", entityName.plural, "..."] })] }), _jsx("p", {})] })) : initiallyAttachedEntitiesStatus === 'error' ? (_jsxs(CenterredSecondaryText, { children: ["Failed to load ", entityName.plural] })) : (desiredAttachedEntities.length === 0 && (_jsxs(CenterredSecondaryText, { children: ["No ", entityName.plural, " attached"] }))), desiredAttachedEntities.length > 0 && rows] })) }) }) })] }));
+};

package/dist/organisms/attachments/AttachmentTypes.d.ts

@@ -0,0 +1,15 @@
+export type AttachableEntity<ENTITY_TYPE> = {
+    name: string;
+    id: string;
+    type: ENTITY_TYPE;
+    disableDetach?: boolean;
+};
+export declare enum AttachmentAction {
+    ADD = 0,
+    REMOVE = 1
+}
+export type AttachmentOperation<ENTITY_TYPE> = {
+    action: AttachmentAction;
+    entity: AttachableEntity<ENTITY_TYPE>;
+};
+//# sourceMappingURL=AttachmentTypes.d.ts.map

package/dist/organisms/attachments/AttachmentTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentTypes.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentTypes.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,CAAC,WAAW,IAAI;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,oBAAY,gBAAgB;IAC1B,GAAG,IAAA;IACH,MAAM,IAAA;CACP;AAED,MAAM,MAAM,mBAAmB,CAAC,WAAW,IAAI;IAC7C,MAAM,EAAE,gBAAgB,CAAC;IACzB,MAAM,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;CACvC,CAAC"}

package/dist/organisms/attachments/AttachmentTypes.js

@@ -0,0 +1,5 @@
+export var AttachmentAction;
+(function (AttachmentAction) {
+    AttachmentAction[AttachmentAction["ADD"] = 0] = "ADD";
+    AttachmentAction[AttachmentAction["REMOVE"] = 1] = "REMOVE";
+})(AttachmentAction || (AttachmentAction = {}));