chore(ui): move persona as top level settings (#18171)

* chore(ui): pull persona as top level settings

* fix tests

* update breadcrumbs

* add missing type

* fix ui tests

* fix settings router tests
This commit is contained in:
Chirag Madlani 2024-10-09 14:25:11 +05:30 committed by GitHub
parent 6098a34687
commit 737c076999
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 90 additions and 79 deletions

View File

@ -147,10 +147,7 @@ export const SETTINGS_OPTIONS_PATH = {
GlobalSettingsMenuCategory.MEMBERS,
`${GlobalSettingsMenuCategory.MEMBERS}.${GlobalSettingOptions.ADMINS}`,
],
[GlobalSettingOptions.PERSONA]: [
GlobalSettingsMenuCategory.MEMBERS,
`${GlobalSettingsMenuCategory.MEMBERS}.${GlobalSettingOptions.PERSONA}`,
],
[GlobalSettingOptions.PERSONA]: [GlobalSettingOptions.PERSONA],
// Access Control
@ -165,10 +162,6 @@ export const SETTINGS_OPTIONS_PATH = {
// Open-metadata
[GlobalSettingOptions.CUSTOMIZE_LANDING_PAGE]: [
GlobalSettingsMenuCategory.PREFERENCES,
`${GlobalSettingsMenuCategory.PREFERENCES}.${GlobalSettingOptions.CUSTOMIZE_LANDING_PAGE}`,
],
[GlobalSettingOptions.EMAIL]: [
GlobalSettingsMenuCategory.PREFERENCES,
`${GlobalSettingsMenuCategory.PREFERENCES}.${GlobalSettingOptions.EMAIL}`,

View File

@ -102,15 +102,7 @@ test.describe.serial('Persona operations', () => {
// Verify created persona details
await expect(
page
.getByTestId('persona-details-card')
.getByText(PERSONA_DETAILS.displayName)
).toBeVisible();
await expect(
page
.getByTestId('persona-details-card')
.getByText(PERSONA_DETAILS.description)
page.getByTestId(`persona-details-card-${PERSONA_DETAILS.name}`)
).toBeVisible();
const personaResponse = page.waitForResponse(
@ -120,8 +112,7 @@ test.describe.serial('Persona operations', () => {
);
await page
.locator('[data-testid="persona-details-card"]')
.getByText(PERSONA_DETAILS.displayName)
.getByTestId(`persona-details-card-${PERSONA_DETAILS.name}`)
.click();
await personaResponse;
@ -153,8 +144,7 @@ test.describe.serial('Persona operations', () => {
page,
}) => {
await page
.locator('[data-testid="persona-details-card"]')
.getByText(PERSONA_DETAILS.displayName)
.getByTestId(`persona-details-card-${PERSONA_DETAILS.name}`)
.click();
await page.getByTestId('edit-description').click();
@ -180,9 +170,7 @@ test.describe.serial('Persona operations', () => {
test('Persona rename flow should work properly', async ({ page }) => {
await page
.locator('[data-testid="persona-details-card"]')
.getByText(PERSONA_DETAILS.displayName)
.getByTestId(`persona-details-card-${PERSONA_DETAILS.name}`)
.click();
await updatePersonaDisplayName({ page, displayName: 'Test Persona' });
@ -203,8 +191,7 @@ test.describe.serial('Persona operations', () => {
test('Remove users in persona should work properly', async ({ page }) => {
await page
.locator('[data-testid="persona-details-card"]')
.getByText(PERSONA_DETAILS.displayName)
.getByTestId(`persona-details-card-${PERSONA_DETAILS.name}`)
.click();
await page
@ -231,8 +218,7 @@ test.describe.serial('Persona operations', () => {
test('Delete persona should work properly', async ({ page }) => {
await page
.locator('[data-testid="persona-details-card"]')
.getByText(PERSONA_DETAILS.displayName)
.getByTestId(`persona-details-card-${PERSONA_DETAILS.name}`)
.click();
await page.click('[data-testid="manage-button"]');

View File

@ -21,7 +21,7 @@ export const navigateToCustomizeLandingPage = async (
) => {
const getPersonas = page.waitForResponse('/api/v1/personas*');
await settingClick(page, GlobalSettingOptions.CUSTOMIZE_LANDING_PAGE);
await settingClick(page, GlobalSettingOptions.PERSONA);
await getPersonas;
@ -32,9 +32,11 @@ export const navigateToCustomizeLandingPage = async (
);
// Navigate to the customize landing page
await page.click(
`[data-testid="persona-details-card-${personaName}"] [data-testid="customize-page-button"]`
);
await page.getByTestId(`persona-details-card-${personaName}`).click();
await page.getByRole('tab', { name: 'Customize UI' }).click();
await page.getByTestId('LandingPage').click();
expect((await getCustomPageDataResponse).status()).toBe(
customPageDataResponse

View File

@ -412,7 +412,7 @@ describe('SettingsRouter', () => {
it('should render PersonaPage component for persona list route', async () => {
render(
<MemoryRouter initialEntries={[`/settings/members/persona`]}>
<MemoryRouter initialEntries={[`/settings/persona`]}>
<SettingsRouter />
</MemoryRouter>
);
@ -422,7 +422,7 @@ describe('SettingsRouter', () => {
it('should render PersonaDetailsPage component for persona details route', async () => {
render(
<MemoryRouter initialEntries={[`/settings/members/persona/testPersona`]}>
<MemoryRouter initialEntries={[`/settings/persona/testPersona`]}>
<SettingsRouter />
</MemoryRouter>
);

View File

@ -160,6 +160,12 @@ const SettingsRouter = () => {
{/* Setting Page Routes with categories */}
<AdminProtectedRoute
exact
component={PersonaPage}
path={getSettingPath(GlobalSettingOptions.PERSONA)}
/>
<Route
exact
component={GlobalSettingCategoryPage}
@ -203,22 +209,10 @@ const SettingsRouter = () => {
)}>
<Redirect to={getTeamsWithFqnPath(TeamType.Organization)} />
</Route>
<AdminProtectedRoute
exact
component={PersonaPage}
path={getSettingPath(
GlobalSettingsMenuCategory.MEMBERS,
GlobalSettingOptions.PERSONA
)}
/>
<AdminProtectedRoute
exact
component={PersonaDetailsPage}
path={getSettingPath(
GlobalSettingsMenuCategory.MEMBERS,
GlobalSettingOptions.PERSONA,
true
)}
path={getSettingPath(GlobalSettingOptions.PERSONA, '', true)}
/>
{/* Roles route start
* Do not change the order of these route

View File

@ -48,7 +48,9 @@ describe('PersonaDetailsCard Component', () => {
});
expect(
await screen.findByTestId('persona-details-card')
await screen.findByTestId(
`persona-details-card-${personaWithDescription.name}`
)
).toBeInTheDocument();
});
@ -81,7 +83,7 @@ describe('PersonaDetailsCard Component', () => {
userEvent.click(personaCardTitle);
});
expect(mockPush).toHaveBeenCalledWith('/settings/members/persona/john-doe');
expect(mockPush).toHaveBeenCalledWith('/settings/persona/john-doe');
});
it('should not navigate when persona.fullyQualifiedName is missing', async () => {

View File

@ -37,7 +37,7 @@ export const PersonaDetailsCard = ({ persona }: PersonaDetailsCardProps) => {
<Card
bodyStyle={{ height: '100%' }}
className="h-full cursor-pointer"
data-testid="persona-details-card"
data-testid={`persona-details-card-${persona.name}`}
onClick={handleCardClick}>
<Space className="justify-between h-full" direction="vertical">
<Card.Meta

View File

@ -22,6 +22,7 @@ export enum GlobalSettingsMenuCategory {
SERVICES = 'services',
BOTS = 'bots',
APPLICATIONS = 'apps',
PERSONA = 'persona',
}
export enum GlobalSettingOptions {

View File

@ -247,6 +247,7 @@
"custom-theme": "Custom Theme",
"customise": "Customise",
"customize-entity": "Customize {{entity}}",
"customize-ui": "Customize UI",
"dag": "DAG",
"dag-view": "DAG-Ansicht",
"daily-active-users-on-the-platform": "Täglich aktive Benutzer auf der Plattform",

View File

@ -247,6 +247,7 @@
"custom-theme": "Custom Theme",
"customise": "Customise",
"customize-entity": "Customize {{entity}}",
"customize-ui": "Customize UI",
"dag": "Dag",
"dag-view": "DAG view",
"daily-active-users-on-the-platform": "Daily Active Users on the Platform",

View File

@ -247,6 +247,7 @@
"custom-theme": "Custom Theme",
"customise": "Personalizar",
"customize-entity": "Personalizar {{entity}}",
"customize-ui": "Customize UI",
"dag": "DAG",
"dag-view": "Vista DAG",
"daily-active-users-on-the-platform": "Usuarios activos diarios en la plataforma",

View File

@ -247,6 +247,7 @@
"custom-theme": "Thème personnalisé",
"customise": "Personnaliser",
"customize-entity": "Personnaliser {{entity}}",
"customize-ui": "Customize UI",
"dag": "DAG",
"dag-view": "Vue DAG",
"daily-active-users-on-the-platform": "Utilisateurs Actifs Quotidiens sur la Plateforme",

View File

@ -247,6 +247,7 @@
"custom-theme": "Custom Theme",
"customise": "התאמה אישית",
"customize-entity": "התאם אישית את {{entity}}",
"customize-ui": "Customize UI",
"dag": "גרף מופע",
"dag-view": "תצוגת גרף מופע",
"daily-active-users-on-the-platform": "משתמשים פעילים יומיים בפלטפורמה",

View File

@ -247,6 +247,7 @@
"custom-theme": "Custom Theme",
"customise": "Customise",
"customize-entity": "Customize {{entity}}",
"customize-ui": "Customize UI",
"dag": "Dag",
"dag-view": "DAGビュー",
"daily-active-users-on-the-platform": "このプラットフォームのアクティブなユーザー",

View File

@ -247,6 +247,7 @@
"custom-theme": "Custom Theme",
"customise": "Aanpassen",
"customize-entity": "{{entity}} aanpassen",
"customize-ui": "Customize UI",
"dag": "Dag",
"dag-view": "DAG-weergave",
"daily-active-users-on-the-platform": "Dagelijks actieve gebruikers op het platform",

View File

@ -247,6 +247,7 @@
"custom-theme": "تم سفارشی",
"customise": "سفارشی‌سازی",
"customize-entity": "سفارشی‌سازی {{entity}}",
"customize-ui": "Customize UI",
"dag": "دگ",
"dag-view": "نمای دگ",
"daily-active-users-on-the-platform": "کاربران فعال روزانه در پلتفرم",

View File

@ -247,6 +247,7 @@
"custom-theme": "Custom Theme",
"customise": "Personalizar",
"customize-entity": "Personalizar {{entity}}",
"customize-ui": "Customize UI",
"dag": "DAG",
"dag-view": "Visualização DAG",
"daily-active-users-on-the-platform": "Usuários Ativos Diários na Plataforma",

View File

@ -247,6 +247,7 @@
"custom-theme": "Custom Theme",
"customise": "Customise",
"customize-entity": "Customize {{entity}}",
"customize-ui": "Customize UI",
"dag": "Dag",
"dag-view": "Просмотр DAG",
"daily-active-users-on-the-platform": "Количество активных пользователей на платформе",

View File

@ -247,6 +247,7 @@
"custom-theme": "自定义主题",
"customise": "自定义",
"customize-entity": "自定义{{entity}}",
"customize-ui": "Customize UI",
"dag": "DAG",
"dag-view": "DAG 视图",
"daily-active-users-on-the-platform": "平台上的每日活跃用户",

View File

@ -18,6 +18,7 @@ import { isUndefined } from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { ReactComponent as CustomDashboardLogoIcon } from '../../../assets/svg/customize-landing-page-colored.svg';
import { ReactComponent as IconPersona } from '../../../assets/svg/ic-personas.svg';
import DescriptionV1 from '../../../components/common/EntityDescription/DescriptionV1';
import ManageButton from '../../../components/common/EntityPageInfos/ManageButton/ManageButton';
@ -28,6 +29,7 @@ import { UserSelectableList } from '../../../components/common/UserSelectableLis
import EntityHeaderTitle from '../../../components/Entity/EntityHeaderTitle/EntityHeaderTitle.component';
import { EntityName } from '../../../components/Modals/EntityNameModal/EntityNameModal.interface';
import PageLayoutV1 from '../../../components/PageLayoutV1/PageLayoutV1';
import SettingItemCard from '../../../components/Settings/SettingItemCard/SettingItemCard.component';
import { UsersTab } from '../../../components/Settings/Users/UsersTab/UsersTabs.component';
import {
GlobalSettingOptions,
@ -38,9 +40,11 @@ import { ResourceEntity } from '../../../context/PermissionProvider/PermissionPr
import { SIZE } from '../../../enums/common.enum';
import { EntityType } from '../../../enums/entity.enum';
import { Persona } from '../../../generated/entity/teams/persona';
import { PageType } from '../../../generated/system/ui/page';
import { useFqn } from '../../../hooks/useFqn';
import { getPersonaByName, updatePersona } from '../../../rest/PersonaAPI';
import { getEntityName } from '../../../utils/EntityUtils';
import { getCustomizePagePath } from '../../../utils/GlobalSettingsUtils';
import { DEFAULT_ENTITY_PERMISSION } from '../../../utils/PermissionsUtils';
import { getSettingPath } from '../../../utils/RouterUtils';
import { showErrorToast } from '../../../utils/ToastUtils';
@ -172,6 +176,15 @@ export const PersonaDetailsPage = () => {
);
};
const handleCustomizeItemClick = (category: string) => {
history.push(
getCustomizePagePath(
personaDetails?.fullyQualifiedName as string,
category as PageType
)
);
};
if (isLoading) {
return <Loader />;
}
@ -232,7 +245,7 @@ export const PersonaDetailsPage = () => {
defaultActiveKey="users"
items={[
{
label: 'Users',
label: t('label.user-plural'),
key: 'users',
children: (
<UsersTab
@ -241,6 +254,29 @@ export const PersonaDetailsPage = () => {
/>
),
},
{
label: t('label.customize-ui'),
key: 'customize-ui',
children: (
<Row gutter={[16, 16]}>
<Col span={8}>
<SettingItemCard
data={{
label: t('label.customize-entity', {
entity: t('label.landing-page'),
}),
description: t(
'message.page-sub-header-for-customize-landing-page'
),
key: PageType.LandingPage,
icon: CustomDashboardLogoIcon,
}}
onClick={handleCustomizeItemClick}
/>
</Col>
</Row>
),
},
]}
tabBarExtraContent={
<UserSelectableList

View File

@ -55,11 +55,7 @@ export const PersonaPage = () => {
} = usePaging();
const breadcrumbs: TitleBreadcrumbProps['titleLinks'] = useMemo(
() =>
getSettingPageEntityBreadCrumb(
GlobalSettingsMenuCategory.MEMBERS,
t('label.persona-plural')
),
() => getSettingPageEntityBreadCrumb(GlobalSettingsMenuCategory.PERSONA),
[]
);

View File

@ -17,7 +17,6 @@ import { ReactComponent as AdminIcon } from '../assets/svg/admin-colored.svg';
import { ReactComponent as ApplicationIcon } from '../assets/svg/application-colored.svg';
import { ReactComponent as BotIcon } from '../assets/svg/bot-colored.svg';
import { ReactComponent as AppearanceIcon } from '../assets/svg/custom-logo-colored.svg';
import { ReactComponent as CustomDashboardLogoIcon } from '../assets/svg/customize-landing-page-colored.svg';
import { ReactComponent as DashboardIcon } from '../assets/svg/dashboard-colored.svg';
import { ReactComponent as DatabaseIcon } from '../assets/svg/database-colored.svg';
import { ReactComponent as EmailIcon } from '../assets/svg/email-colored.svg';
@ -95,6 +94,10 @@ class GlobalSettingsClassBase {
name: t('label.application-plural'),
url: GlobalSettingsMenuCategory.APPLICATIONS,
},
[GlobalSettingsMenuCategory.PERSONA]: {
name: t('label.persona'),
url: GlobalSettingsMenuCategory.PERSONA,
},
};
protected updateSettingCategories(
@ -266,14 +269,6 @@ class GlobalSettingsClassBase {
key: `${GlobalSettingsMenuCategory.MEMBERS}.${GlobalSettingOptions.ADMINS}`,
icon: AdminIcon,
},
{
label: t('label.persona-plural'),
description: t('message.page-sub-header-for-persona'),
isProtected: Boolean(isAdminUser),
key: `${GlobalSettingsMenuCategory.MEMBERS}.${GlobalSettingOptions.PERSONA}`,
icon: PersonasIcon,
},
],
},
{
@ -311,17 +306,6 @@ class GlobalSettingsClassBase {
key: `${GlobalSettingsMenuCategory.PREFERENCES}.${GlobalSettingOptions.APPEARANCE}`,
icon: AppearanceIcon,
},
{
label: t('label.customize-entity', {
entity: t('label.landing-page'),
}),
description: t(
'message.page-sub-header-for-customize-landing-page'
),
isProtected: Boolean(isAdminUser),
key: `${GlobalSettingsMenuCategory.PREFERENCES}.${GlobalSettingOptions.CUSTOMIZE_LANDING_PAGE}`,
icon: CustomDashboardLogoIcon,
},
{
label: t('label.email'),
description: t('message.email-configuration-message'),
@ -515,6 +499,13 @@ class GlobalSettingsClassBase {
key: GlobalSettingOptions.BOTS,
icon: BotIcon,
},
{
category: t('label.persona-plural'),
description: t('message.page-sub-header-for-persona'),
isProtected: Boolean(isAdminUser),
key: GlobalSettingOptions.PERSONA,
icon: PersonasIcon,
},
];
}
}

View File

@ -569,11 +569,10 @@ export const getClassificationVersionsPath = (
};
export const getPersonaDetailsPath = (fqn: string) => {
let path = ROUTES.SETTINGS_WITH_TAB_FQN;
let path = ROUTES.SETTINGS_WITH_CATEGORY_FQN;
path = path
.replace(PLACEHOLDER_SETTING_CATEGORY, GlobalSettingsMenuCategory.MEMBERS)
.replace(PLACEHOLDER_ROUTE_TAB, GlobalSettingOptions.PERSONA)
.replace(PLACEHOLDER_SETTING_CATEGORY, GlobalSettingOptions.PERSONA)
.replace(PLACEHOLDER_ROUTE_FQN, getEncodedFqn(fqn));
return path;