Add native auth users list & refactoring ServiceSettings

src/shared/schema/auth/types/users.ts

@@ -91,11 +91,11 @@ export interface GetUsersListArgs {
     roles?: `${UserRole}`[];
 }
 
-export interface GetUserList extends UserProfile {
+export interface ListUser extends UserProfile {
     providerId: string | null;
 }
 
 export interface GetUsersListResponse {
     nextPageToken?: string;
-    users: GetUserList[];
+    users: ListUser[];
 }

src/ui/datalens/index.tsx

@@ -59,6 +59,8 @@ const DatalensPageView = () => {
     return (
         <React.Suspense fallback={<FallbackPage />}>
             <Switch>
+                {DL.AUTH_ENABLED && <Route path="/auth" component={AuthPage} />}
+
                 <Route
                     path={['/workbooks/:workbookId/datasets/new', '/datasets/:id']}
                     component={DatasetPage}
@@ -84,8 +86,6 @@ const DatalensPageView = () => {
                     component={CollectionsNavigtaionPage}
                 />
 
-                {DL.AUTH_ENABLED && <Route path="/auth" component={AuthPage} />}
-
                 <Route path="/">
                     <Redirect to={`/collections${location.search}`} />
                 </Route>

src/ui/datalens/pages/ServiceSettingsPage/ServiceSettingsPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {ServiceSettings} from 'units/main/containers/ServiceSettings/ServiceSettings';
+import {App as ServiceSettingsApp} from 'ui/units/service-settings/containers/App/App';
 
-const ServiceSettingsPage = () => <ServiceSettings />;
+const ServiceSettingsPage = () => <ServiceSettingsApp />;
 
 export default ServiceSettingsPage;

src/ui/index.ts

@@ -22,6 +22,7 @@ import type {WizardGlobalState} from 'units/wizard/reducers';
 import type {WorkbooksState} from 'units/workbooks/store/reducers';
 
 import type {CollectionsNavigationState} from './units/collections-navigation/store/reducers';
+import type {ServiceSettingsState} from './units/service-settings/store/typings/serviceSettings';
 
 export {default as ActionPanel} from './components/ActionPanel/ActionPanel';
 export {default as Utils} from './utils';
@@ -77,4 +78,5 @@ export type DatalensGlobalState = {
     editHistory: EditHistoryState;
     iamAccessDialog: IamAccessDialogState;
     auth: AuthState;
+    serviceSettings: ServiceSettingsState;
 };

src/ui/units/auth/components/UserRoleLabel/UserRoleLabel.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import type {LabelProps} from '@gravity-ui/uikit';
 import {Label} from '@gravity-ui/uikit';
 import {UserRole} from 'shared/components/auth/constants/role';
-import {getCapitalizedStr} from 'ui/utils/stringUtils';
+
+import {getRoleByKey} from '../../utils/userProfile';
 
 const labelThemeByUserRole: Record<`${UserRole}`, LabelProps['theme']> = {
     [UserRole.Editor]: 'info',
@@ -20,7 +21,3 @@ interface UserRoleLabelProps {
 export function UserRoleLabel({role}: UserRoleLabelProps) {
     return <Label theme={labelThemeByUserRole[role]}>{getRoleByKey(role)}</Label>;
 }
-
-function getRoleByKey(role: `${UserRole}`) {
-    return getCapitalizedStr(role.replace('datalens.', ''));
-}

src/ui/units/auth/utils/userProfile.ts

@@ -0,0 +1,6 @@
+import type {UserRole} from 'shared/components/auth/constants/role';
+import {getCapitalizedStr} from 'ui/utils/stringUtils';
+
+export function getRoleByKey(role: `${UserRole}`) {
+    return getCapitalizedStr(role.replace('datalens.', ''));
+}

src/ui/units/service-settings/components/SectionColorPalettes/SectionColorPalettes.scss

@@ -0,0 +1,17 @@
+.service-settings-color-palettes {
+    &__header {
+        margin: 0;
+    }
+
+    &__content {
+        flex-direction: column;
+
+        &_tab {
+            margin-top: var(--g-spacing-6);
+        }
+    }
+
+    &__description {
+        margin: var(--g-spacing-3) 0 var(--g-spacing-4);
+    }
+}

src/ui/units/service-settings/components/SectionColorPalettes/SectionColorPalettes.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {Text} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import ColorPaletteEditorContainer from 'components/ColorPaletteEditorContainer/ColorPaletteEditorContainer';
+import {I18n} from 'i18n';
+import {DL} from 'ui/constants';
+
+import './SectionColorPalettes.scss';
+
+const b = block('service-settings-color-palettes');
+// const i18n = I18n.keyset('service-settings.main.view');
+const i18n = I18n.keyset('main.service-settings.view');
+
+const SectionColorPalettes = () => {
+    const isTabContent = DL.AUTH_ENABLED && DL.IS_NATIVE_AUTH_ADMIN;
+
+    return (
+        <section className={b()}>
+            {!isTabContent && (
+                <Text as={'h4' as const} className={b('header')} variant="subheader-2">
+                    {i18n('section_color-palettes')}
+                </Text>
+            )}
+            <div className={b('content', {tab: isTabContent})}>
+                <div className={b('description')}>
+                    <ColorPaletteEditorContainer />
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default SectionColorPalettes;

src/ui/units/service-settings/components/UsersList/LabelsList/LabelsList.scss

@@ -0,0 +1,32 @@
+.users-list-labels-list {
+    $class: &;
+
+    &__item {
+        margin-right: var(--g-spacing-2);
+    }
+
+    &__button {
+        flex-shrink: 0;
+        margin-right: var(--g-spacing-2);
+    }
+
+    &__popup {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: var(--g-spacing-2) var(--g-spacing-1) var(--g-spacing-2) var(--g-spacing-2);
+
+        #{$class}__item {
+            margin: var(--g-spacing-2) 0;
+        }
+    }
+
+    &__popup-content {
+        max-height: 200px;
+        overflow-y: auto;
+        display: flex;
+        gap: var(--g-spacing-2);
+        flex-direction: column;
+        padding-right: var(--g-spacing-1);
+    }
+}

src/ui/units/service-settings/components/UsersList/LabelsList/LabelsList.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import type {LabelProps} from '@gravity-ui/uikit';
+import {Flex, Label, Popup} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import type {UserRole} from 'shared/components/auth/constants/role';
+import {UserRoleLabel} from 'ui/units/auth/components/UserRoleLabel/UserRoleLabel';
+
+import './LabelsList.scss';
+
+const b = block('users-list-labels-list');
+
+export type LabelsListProps = {
+    items: `${UserRole}`[];
+    countVisibleElements: number;
+    buttonTheme?: LabelProps['theme'];
+};
+
+export const LabelsList = ({
+    items,
+    countVisibleElements = 1,
+    buttonTheme = 'normal',
+}: LabelsListProps) => {
+    const [open, setOpen] = React.useState(false);
+    const anchorRef = React.useRef<HTMLDivElement>(null);
+
+    const toggleRolesPopup = React.useCallback(
+        (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            event.stopPropagation();
+            setOpen(!open);
+        },
+        [open],
+    );
+
+    const handlePopupClose = React.useCallback(() => {
+        setOpen(false);
+    }, []);
+
+    const renderList = () => {
+        const visibleItems = items.slice(0, countVisibleElements);
+        const hiddenItems = items.slice(countVisibleElements);
+
+        const buttonText = `+${items.length - countVisibleElements}`;
+
+        return (
+            <React.Fragment>
+                {visibleItems.map((item) => (
+                    <UserRoleLabel key={item} role={item} />
+                ))}
+                <Label
+                    ref={anchorRef}
+                    theme={buttonTheme}
+                    onClick={toggleRolesPopup}
+                    className={b('button')}
+                >
+                    {buttonText}
+                </Label>
+                <Popup
+                    anchorRef={anchorRef}
+                    open={open}
+                    placement={['bottom-end', 'bottom', 'top-end', 'top']}
+                    onClose={handlePopupClose}
+                >
+                    <div className={b('popup')}>
+                        <div className={b('popup-content')}>
+                            {hiddenItems.map((item) => (
+                                <UserRoleLabel key={item} role={item} />
+                            ))}
+                        </div>
+                    </div>
+                </Popup>
+            </React.Fragment>
+        );
+    };
+
+    return (
+        <Flex className={b()} alignItems="center" gap={2}>
+            {items.length > countVisibleElements
+                ? renderList()
+                : items.map((item) => <UserRoleLabel key={item} role={item} />)}
+        </Flex>
+    );
+};