select visible columns in settings side panel

apps/data-studio/src/components/ExplorerSettingsSidePanel/ExplorerSettingsSidePanel.tsx

@@ -0,0 +1,28 @@
+import {FunctionComponent} from 'react';
+import {KitSidePanel} from 'aristid-ds';
+import {Explorer} from '@leav/ui';
+
+export const ExplorerSettingsSidePanel: FunctionComponent = () => {
+    // TODO: handle conflict with app side panel
+    const {activeSettings, onClose} = Explorer.useEditSettings();
+
+    if (!activeSettings) {
+        return null;
+    }
+
+    // TODO: handle transition opening/closing on floating prop true
+
+    return (
+        <KitSidePanel
+            style={{zIndex: '10000'}}
+            initialOpen
+            floating
+            closable
+            idCardProps={{title: activeSettings.title}}
+            leftActionProps={activeSettings.onClickLeftButton ? {onClick: activeSettings.onClickLeftButton} : undefined}
+            onClose={onClose}
+        >
+            {activeSettings.content}
+        </KitSidePanel>
+    );
+};

apps/data-studio/src/components/ExplorerSettingsSidePanel/index.ts

@@ -0,0 +1 @@
+export {ExplorerSettingsSidePanel} from './ExplorerSettingsSidePanel';

apps/data-studio/src/components/Router/Router.tsx

@@ -10,6 +10,7 @@ import {BrowserRouter} from 'react-router-dom';
 import NotifsPanel from '../NotifsPanel';
 import UserPanel from '../UserPanel';
 import Routes from './Routes';
+import {ExplorerSettingsSidePanel} from 'components/ExplorerSettingsSidePanel';
 
 const {Header, Content, Sider} = Layout;
 

libs/ui/src/components/Explorer/DataView.tsx

@@ -16,6 +16,7 @@ import {
     PropertyValueValueFragment
 } from '_ui/_gqlTypes';
 import {IItemAction, IItemData, ItemWhoAmI} from './_types';
+import styled from 'styled-components';
 
 const USELESS = '';
 

libs/ui/src/components/Explorer/Explorer.tsx

@@ -58,7 +58,7 @@ export const Explorer: FunctionComponent<IExplorerProps> = ({
         refetch
     });
 
-    const settingsButton = useOpenSettings();
+    const settingsButton = useOpenSettings(library);
 
     return (
         <>

libs/ui/src/components/Explorer/edit-settings/ColumnItem.tsx

@@ -0,0 +1,89 @@
+import {KitTypography} from 'aristid-ds';
+import {FunctionComponent, ReactNode} from 'react';
+import {FaChevronRight, FaEye, FaEyeSlash, FaGripLines} from 'react-icons/fa';
+import styled from 'styled-components';
+
+const StyledValue = styled(KitTypography.Text)`
+    color: var(--general-utilities-disabled);
+`;
+
+const StyledConfigurationItem = styled.li`
+    list-style: none;
+    color: var(--general-utilities-text-primary);
+    display: flex;
+    width: 100%;
+    height: 40px;
+    padding: 0 calc(var(--general-spacing-xs) * 1px);
+    align-items: center;
+    gap: calc(var(--general-spacing-xs) * 1px);
+    border-radius: calc(var(--general-spacing-xs) * 1px);
+    text-align: left;
+
+    &:first-child {
+        margin-top: calc(var(--general-spacing-xs) * 1px);
+    }
+
+    &:hover {
+        background: var(--general-utilities-main-light);
+
+        ${StyledValue} {
+            color: var(--general-utilities-text-primary);
+        }
+    }
+
+    .title {
+        flex: 1 1 auto;
+    }
+
+    > svg {
+        flex: 0 0 calc(var(--general-spacing-s) * 1px);
+    }
+
+    > button {
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        padding: 0;
+    }
+`;
+
+const StyledFaEye = styled(FaEye).attrs<{$disabled: boolean}>({$disabled: false})`
+    color: ${({$disabled}) => ($disabled ? 'var(--general-utilities-disabled)' : 'currentColor')};
+    cursor: ${({$disabled}) => ($disabled ? 'default' : 'pointer')};
+`;
+
+const StyledEyeSlash = styled(FaEyeSlash)`
+    color: var(--general-utilities-disabled);
+    cursor: pointer;
+`;
+
+const StyledEmptyIcon = styled.div`
+    width: calc(var(--general-spacing-s) * 1px);
+`;
+
+interface IColumnItemProps {
+    dragHandler?: ReactNode;
+    visible: boolean;
+    title: string;
+    onVisibilityClick?: () => void;
+    disabled?: boolean;
+    value?: string;
+}
+
+export const ColumnItem: FunctionComponent<IColumnItemProps> = ({
+    dragHandler,
+    title,
+    disabled,
+    visible,
+    onVisibilityClick
+}) => (
+    <StyledConfigurationItem className={`${disabled ? 'disabled' : ''}`}>
+        {dragHandler || <StyledEmptyIcon />}
+        <KitTypography.Text size="fontSize5" ellipsis className="title">
+            {title}
+        </KitTypography.Text>
+        <button className={`${disabled ? 'disabled' : ''}`} onClick={onVisibilityClick}>
+            {visible ? <StyledFaEye /> : <StyledEyeSlash />}
+        </button>
+    </StyledConfigurationItem>
+);

libs/ui/src/components/Explorer/edit-settings/DisplayMode.tsx

@@ -1,11 +1,47 @@
-// Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {useGetAttributesByLibQuery} from '_ui/_gqlTypes';
 import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {FunctionComponent} from 'react';
+import {KitRadio, KitSpace, KitTypography} from 'aristid-ds';
+import {RadioChangeEvent} from 'aristid-ds/dist/Kit/DataEntry/Radio';
+import {FunctionComponent, useState} from 'react';
+import styled from 'styled-components';
+import {DisplayModeTable} from './DisplayModeTable';
 
-export const DisplayMode: FunctionComponent = () => {
+const StyledWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--general-spacing-l) * 1px);
+
+    .ant-radio-wrapper {
+        padding: calc(var(--general-spacing-xs) * 1px);
+    }
+`;
+
+interface IDisplayModeProps {
+    library: string;
+}
+
+export const DisplayMode: FunctionComponent<IDisplayModeProps> = ({library = 'users'}) => {
     const {t} = useSharedTranslation();
+    const [currrentDisplayMode, setCurrentDisplayMode] = useState<string>('table');
+
+    const _handleDisplayModeChange = (event: RadioChangeEvent) => {
+        setCurrentDisplayMode(event.target.value);
+    };
 
-    return <div>TODO</div>;
+    return (
+        <StyledWrapper>
+            <KitRadio.Group value={currrentDisplayMode} onChange={_handleDisplayModeChange}>
+                <KitSpace direction="vertical" size={0}>
+                    <KitRadio value="list">{t('explorer.display-mode-list')}</KitRadio>
+                    <KitRadio value="table">{t('explorer.display-mode-table')}</KitRadio>
+                    <KitRadio value="mosaic">{t('explorer.display-mode-mosaic')}</KitRadio>
+                    <KitRadio value="planning">{t('explorer.display-mode-planning')}</KitRadio>
+                </KitSpace>
+            </KitRadio.Group>
+            {currrentDisplayMode === 'table' && <DisplayModeTable library={library} />}
+            {currrentDisplayMode !== 'table' && (
+                <KitTypography.Text>{t(`explorer.display-mode-${currrentDisplayMode}`)}</KitTypography.Text>
+            )}
+        </StyledWrapper>
+    );
 };

libs/ui/src/components/Explorer/edit-settings/DisplayModeTable.tsx

@@ -0,0 +1,111 @@
+import {useGetAttributesByLibQuery} from '_ui/_gqlTypes';
+import {useDebouncedValue} from '_ui/hooks/useDebouncedValue/useDebouncedValue';
+import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
+import {KitInput, KitTypography} from 'aristid-ds';
+import {FunctionComponent, useMemo, useState} from 'react';
+import styled from 'styled-components';
+import {localizedTranslation} from '@leav/utils';
+import {useLang} from '../../../hooks';
+import {FaGripLines} from 'react-icons/fa';
+import {ColumnItem} from './ColumnItem';
+
+const StyledList = styled.ul`
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    color: var(--general-utilities-text-primary);
+`;
+
+const StyledDivider = styled.li`
+    list-style: none;
+    border-bottom: 1px solid var(--general-utilities-main-light);
+    margin: 0 calc(var(--general-spacing-s) * 1px);
+`;
+
+interface IDisplayModeTableProps {
+    library: string;
+}
+
+export const DisplayModeTable: FunctionComponent<IDisplayModeTableProps> = ({library}) => {
+    const {t} = useSharedTranslation();
+    const {lang: availableLangs} = useLang();
+    // TOTO Where to stock visible columns list
+    // TODO when are changes saved (and thus, when is the table updated) ?
+    const [visibleColumns, setVisibleColumns] = useState<Record<string, boolean>>({
+        id: true
+    });
+    const [searchInput, setSearchInput] = useState('');
+    const debouncedSearchInput = useDebouncedValue(searchInput, 300);
+    const {data} = useGetAttributesByLibQuery({
+        variables: {
+            library
+        }
+    });
+
+    const filteredColumns = useMemo(() => {
+        if (!data) {
+            return [];
+        }
+        if (searchInput === '') {
+            return data?.attributes?.list ?? [];
+        }
+
+        return data?.attributes?.list?.filter(attribute => attribute.id.includes(debouncedSearchInput)) ?? [];
+    }, [debouncedSearchInput, data]);
+
+    const _onSearchChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.value.length > 2 || event.target.value.length === 0) {
+            setSearchInput(event.target.value);
+        }
+    };
+
+    const _toggleColumnVisibility = (columnId: string) => () => {
+        setVisibleColumns(prev => ({
+            ...prev,
+            [columnId]: !prev[columnId]
+        }));
+    };
+
+    return (
+        <div>
+            <KitTypography.Title level="h4">{t('items_list.columns')}</KitTypography.Title>
+            <KitInput placeholder={String(t('global.search'))} onChange={_onSearchChanged}></KitInput>
+            <div>
+                <StyledList>
+                    <ColumnItem title={t('record_edition.whoAmI')} visible={false} disabled />
+                    {Object.keys(visibleColumns).map(column => {
+                        const attribute = filteredColumns.find(({id}) => id === column);
+                        if (attribute && visibleColumns[attribute.id]) {
+                            return (
+                                <ColumnItem
+                                    key={column}
+                                    title={localizedTranslation(attribute.label, availableLangs)}
+                                    visible
+                                    onVisibilityClick={_toggleColumnVisibility(column)}
+                                    dragHandler={<FaGripLines />}
+                                />
+                            );
+                        }
+                        return null;
+                    })}
+                </StyledList>
+                <StyledDivider />
+                <StyledList>
+                    {filteredColumns.map(attribute => {
+                        if (visibleColumns[attribute.id]) {
+                            return null;
+                        }
+                        return (
+                            <ColumnItem
+                                key={attribute.id}
+                                visible={false}
+                                title={localizedTranslation(attribute.label, availableLangs)}
+                                onVisibilityClick={_toggleColumnVisibility(attribute.id)}
+                            />
+                        );
+                    })}
+                </StyledList>
+            </div>
+        </div>
+    );
+};

libs/ui/src/components/Explorer/edit-settings/SettingItem.tsx

@@ -54,12 +54,14 @@ const StyledConfigurationItem = styled.li`
     }
 `;
 
-export const SettingItem: FunctionComponent<{
+interface ISettingItemProps {
     icon: ReactNode;
     title: string;
     onClick: () => void;
     value?: string;
-}> = ({icon, title, value = '', onClick}) => (
+}
+
+export const SettingItem: FunctionComponent<ISettingItemProps> = ({icon, title, value = '', onClick}) => (
     <StyledConfigurationItem>
         <button onClick={onClick}>
             {icon}

libs/ui/src/components/Explorer/edit-settings/SettingsPanel.test.tsx

@@ -0,0 +1,55 @@
+import {render} from '_ui/_tests/testUtils';
+import {SettingsPanel} from './SettingsPanel';
+import {act, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const setActiveSettingsMock = jest.fn();
+
+jest.mock('./useEditSettings', () => ({
+    useEditSettings: () => ({
+        setActiveSettings: setActiveSettingsMock,
+        activeSettings: {
+            content: null,
+            title: 'title'
+        }
+    })
+}));
+
+const [DisplayModeLabel] = ['DisplayMode Component'];
+
+jest.mock('./DisplayMode', () => ({
+    DisplayMode: () => <div>{DisplayModeLabel}</div>
+}));
+
+describe('SettingsPanel', () => {
+    beforeEach(() => {
+        setActiveSettingsMock.mockClear();
+    });
+
+    test('should be able to move to advanced setting and come back', async () => {
+        render(<SettingsPanel library="users" />);
+        expect(screen.getByRole('heading', {name: 'explorer.view-configuration'})).toBeVisible();
+
+        await userEvent.click(screen.getByRole('button', {name: 'explorer.display-mode'}));
+
+        expect(screen.getByText(DisplayModeLabel)).toBeVisible();
+        expect(setActiveSettingsMock).toHaveBeenCalledTimes(1);
+        expect(setActiveSettingsMock).toHaveBeenCalledWith({
+            content: null,
+            onClickLeftButton: expect.any(Function),
+            title: 'explorer.display-mode'
+        });
+
+        const leftSidePanelButtonCallback = setActiveSettingsMock.mock.calls[0][0].onClickLeftButton;
+        setActiveSettingsMock.mockClear();
+        await act(() => leftSidePanelButtonCallback());
+
+        expect(screen.getByRole('heading', {name: 'explorer.view-configuration'})).toBeVisible();
+        expect(setActiveSettingsMock).toHaveBeenCalledTimes(1);
+        expect(setActiveSettingsMock).toHaveBeenCalledWith({
+            content: null,
+            onClickLeftButton: undefined,
+            title: 'explorer.settings'
+        });
+    });
+});