mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-08-23 00:18:06 +00:00
Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
This commit is contained in:
parent
2b05f6a17a
commit
bdfee26533
@ -96,13 +96,10 @@ describe('Glossary page should work properly', () => {
|
||||
beforeEach(() => {
|
||||
cy.goToHomePage();
|
||||
// redirecting to glossary page
|
||||
cy.get(
|
||||
'.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
|
||||
)
|
||||
cy.get('[data-testid="appbar-item-glossary"]')
|
||||
.scrollIntoView()
|
||||
.should('be.visible')
|
||||
.click();
|
||||
cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
|
||||
// Todo: need to remove below uncaught exception once tree-view error resolves
|
||||
cy.on('uncaught:exception', () => {
|
||||
// return false to prevent the error from
|
||||
@ -321,13 +318,10 @@ describe('Glossary page should work properly', () => {
|
||||
|
||||
addNewTagToEntity(entity, term);
|
||||
|
||||
cy.get(
|
||||
'.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
|
||||
)
|
||||
cy.get('[data-testid="appbar-item-glossary"]')
|
||||
.scrollIntoView()
|
||||
.should('be.visible')
|
||||
.click();
|
||||
cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
|
||||
goToAssetsTab(term);
|
||||
cy.get('[data-testid="column"] > :nth-child(1)')
|
||||
.contains(entity)
|
||||
@ -377,13 +371,11 @@ describe('Glossary page should work properly', () => {
|
||||
.should('be.visible')
|
||||
.click();
|
||||
cy.get('[data-testid="saveAssociatedTag"]').scrollIntoView().click();
|
||||
cy.get(
|
||||
'.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
|
||||
)
|
||||
|
||||
cy.get('[data-testid="appbar-item-glossary"]')
|
||||
.scrollIntoView()
|
||||
.should('be.visible')
|
||||
.click();
|
||||
cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
|
||||
cy.wait(500);
|
||||
goToAssetsTab(term);
|
||||
cy.get('.tableBody-cell')
|
||||
|
@ -17,12 +17,7 @@ import { NEW_TAG, NEW_TAG_CATEGORY, SEARCH_ENTITY_TABLE } from '../../constants/
|
||||
describe('Tags page should work', () => {
|
||||
beforeEach(() => {
|
||||
cy.goToHomePage();
|
||||
cy.get(
|
||||
'.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
|
||||
)
|
||||
.should('be.visible')
|
||||
.click();
|
||||
cy.get('[data-testid="menu-item-Tags"]').should('be.visible').click();
|
||||
cy.get('[data-testid="appbar-item-tags"]').should('be.visible').click();
|
||||
});
|
||||
|
||||
it('Required Details should be available', () => {
|
||||
|
@ -12,6 +12,7 @@
|
||||
*/
|
||||
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Card } from 'antd';
|
||||
import { capitalize } from 'lodash';
|
||||
import React from 'react';
|
||||
import { TITLE_FOR_NON_ADMIN_ACTION } from '../../constants/constants';
|
||||
@ -22,7 +23,7 @@ import { getActiveCatClass, getCountBadge } from '../../utils/CommonUtils';
|
||||
import { getActiveUsers } from '../../utils/TeamUtils';
|
||||
import { Button } from '../buttons/Button/Button';
|
||||
import NonAdminAction from '../common/non-admin-action/NonAdminAction';
|
||||
import PageLayout from '../containers/PageLayout';
|
||||
import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
|
||||
import Loader from '../Loader/Loader';
|
||||
import TeamDetails from '../TeamDetails/TeamDetails';
|
||||
import UserDetails from '../UserDetails/UserDetails';
|
||||
@ -88,104 +89,106 @@ const TeamsAndUsers = ({
|
||||
*/
|
||||
const fetchLeftPanel = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="tw-mb-8">
|
||||
<div
|
||||
className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b"
|
||||
data-testid="add-team-container">
|
||||
<p className="tw-heading">Teams</p>
|
||||
{hasAccess && (
|
||||
<NonAdminAction
|
||||
position="bottom"
|
||||
title={TITLE_FOR_NON_ADMIN_ACTION}>
|
||||
<Button
|
||||
className="tw-h-7 tw-px-2 tw-mb-4"
|
||||
data-testid="add-team-button"
|
||||
size="small"
|
||||
theme="primary"
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
handleAddTeam(true);
|
||||
}}>
|
||||
<FontAwesomeIcon icon="plus" />
|
||||
</Button>
|
||||
</NonAdminAction>
|
||||
)}
|
||||
</div>
|
||||
{teams.map((team) => (
|
||||
<Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
|
||||
<>
|
||||
<div className="tw-mb-8">
|
||||
<div
|
||||
className="tw-flex tw-items-center tw-justify-between tw-mb-2 tw-cursor-pointer"
|
||||
data-testid={`team-${team.name}`}
|
||||
key={team.name}
|
||||
onClick={() => {
|
||||
changeCurrentTeam(team.name, false);
|
||||
}}>
|
||||
<div
|
||||
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-flex tw-justify-between ${getActiveCatClass(
|
||||
team.name,
|
||||
currentTeam?.name
|
||||
)}`}>
|
||||
<p
|
||||
className="tag-category label-category tw-self-center tw-truncate tw-w-52"
|
||||
data-testid="team-name"
|
||||
title={team.displayName ?? team.name}>
|
||||
{team.displayName ?? team.name}
|
||||
</p>
|
||||
</div>
|
||||
{getCountBadge(
|
||||
getActiveUsers(team.users).length,
|
||||
'',
|
||||
currentTeam?.name === team.name
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{hasAccess && (
|
||||
<div>
|
||||
<div className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b">
|
||||
<p className="tw-heading">All Users</p>
|
||||
className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b"
|
||||
data-testid="add-team-container">
|
||||
<p className="tw-heading">Teams</p>
|
||||
{hasAccess && (
|
||||
<NonAdminAction
|
||||
position="bottom"
|
||||
title={TITLE_FOR_NON_ADMIN_ACTION}>
|
||||
<Button
|
||||
className="tw-h-7 tw-px-2 tw-mb-4"
|
||||
data-testid="add-user-button"
|
||||
data-testid="add-team-button"
|
||||
size="small"
|
||||
theme="primary"
|
||||
variant="contained"
|
||||
onClick={handleAddNewUser}>
|
||||
onClick={() => {
|
||||
handleAddTeam(true);
|
||||
}}>
|
||||
<FontAwesomeIcon icon="plus" />
|
||||
</Button>
|
||||
</NonAdminAction>
|
||||
)}
|
||||
</div>
|
||||
{usersData.map((user) => (
|
||||
{teams.map((team) => (
|
||||
<div
|
||||
className="tw-flex tw-items-center tw-justify-between tw-mb-2 tw-cursor-pointer"
|
||||
data-testid={user.name}
|
||||
key={user.name}
|
||||
data-testid={`team-${team.name}`}
|
||||
key={team.name}
|
||||
onClick={() => {
|
||||
changeCurrentTeam(user.name, true);
|
||||
changeCurrentTeam(team.name, false);
|
||||
}}>
|
||||
<div
|
||||
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-flex tw-justify-between ${getActiveCatClass(
|
||||
user.name,
|
||||
activeUserTab
|
||||
team.name,
|
||||
currentTeam?.name
|
||||
)}`}>
|
||||
<p
|
||||
className="tag-category label-category tw-self-center tw-truncate tw-w-52"
|
||||
data-testid="user-type"
|
||||
title={capitalize(user.name)}>
|
||||
{capitalize(user.name)}
|
||||
data-testid="team-name"
|
||||
title={team.displayName ?? team.name}>
|
||||
{team.displayName ?? team.name}
|
||||
</p>
|
||||
</div>
|
||||
{getCountBadge(user.count, '', activeUserTab === user.name)}
|
||||
{getCountBadge(
|
||||
getActiveUsers(team.users).length,
|
||||
'',
|
||||
currentTeam?.name === team.name
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
{hasAccess && (
|
||||
<div>
|
||||
<div className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b">
|
||||
<p className="tw-heading">All Users</p>
|
||||
{hasAccess && (
|
||||
<NonAdminAction
|
||||
position="bottom"
|
||||
title={TITLE_FOR_NON_ADMIN_ACTION}>
|
||||
<Button
|
||||
className="tw-h-7 tw-px-2 tw-mb-4"
|
||||
data-testid="add-user-button"
|
||||
size="small"
|
||||
theme="primary"
|
||||
variant="contained"
|
||||
onClick={handleAddNewUser}>
|
||||
<FontAwesomeIcon icon="plus" />
|
||||
</Button>
|
||||
</NonAdminAction>
|
||||
)}
|
||||
</div>
|
||||
{usersData.map((user) => (
|
||||
<div
|
||||
className="tw-flex tw-items-center tw-justify-between tw-mb-2 tw-cursor-pointer"
|
||||
data-testid={user.name}
|
||||
key={user.name}
|
||||
onClick={() => {
|
||||
changeCurrentTeam(user.name, true);
|
||||
}}>
|
||||
<div
|
||||
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-flex tw-justify-between ${getActiveCatClass(
|
||||
user.name,
|
||||
activeUserTab
|
||||
)}`}>
|
||||
<p
|
||||
className="tag-category label-category tw-self-center tw-truncate tw-w-52"
|
||||
data-testid="user-type"
|
||||
title={capitalize(user.name)}>
|
||||
{capitalize(user.name)}
|
||||
</p>
|
||||
</div>
|
||||
{getCountBadge(user.count, '', activeUserTab === user.name)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@ -195,8 +198,9 @@ const TeamsAndUsers = ({
|
||||
<Loader />
|
||||
) : (
|
||||
<div
|
||||
className="tw-pb-3 tw-w-full tw-h-full tw-flex tw-flex-col"
|
||||
data-testid="team-and-user-container">
|
||||
className="tw-pb-3 tw-w-full tw-h-full tw-flex tw-flex-col tw-bg-white"
|
||||
data-testid="team-and-user-container"
|
||||
style={{ padding: '14px' }}>
|
||||
{!isTeamVisible ? (
|
||||
<UserDetails
|
||||
currentUserPage={currentUserPage}
|
||||
|
@ -11,6 +11,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Card } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import { cloneDeep, isNil, startCase } from 'lodash';
|
||||
import React, { FunctionComponent, useEffect, useState } from 'react';
|
||||
@ -25,7 +26,7 @@ import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder'
|
||||
import NextPrevious from '../common/next-previous/NextPrevious';
|
||||
import NonAdminAction from '../common/non-admin-action/NonAdminAction';
|
||||
import WebhookDataCard from '../common/webhook-data-card/WebhookDataCard';
|
||||
import PageLayout from '../containers/PageLayout';
|
||||
import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
|
||||
import { WebhooksProps } from './Webhooks.interface';
|
||||
|
||||
const statuses = [
|
||||
@ -86,55 +87,57 @@ const Webhooks: FunctionComponent<WebhooksProps> = ({
|
||||
|
||||
const fetchLeftPanel = () => {
|
||||
return (
|
||||
<>
|
||||
<h6 className="tw-heading tw-text-base">Webhooks</h6>
|
||||
<div className="tw-flex tw-justify-between tw-flex-col">
|
||||
<h6 className="tw-heading tw-mb-0" data-testid="filter-heading">
|
||||
Status
|
||||
</h6>
|
||||
<div className="tw-flex tw-mt-2" />
|
||||
</div>
|
||||
<div
|
||||
className="sidebar-my-data-holder"
|
||||
data-testid="filter-containers-1">
|
||||
{statuses.map((statusType, index) => (
|
||||
<div
|
||||
className="filter-group tw-justify-between tw-mb-3"
|
||||
data-testid={`status-type-${statusType.value}`}
|
||||
key={index}>
|
||||
<div className="tw-flex">
|
||||
<input
|
||||
checked={selectedStatus.includes(statusType.value)}
|
||||
className="tw-mr-1 custom-checkbox"
|
||||
data-testid="checkbox"
|
||||
type="checkbox"
|
||||
onChange={() => {
|
||||
handleStatusSelection(statusType.value);
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="tw-flex tw-items-center filters-title tw-truncate custom-checkbox-label"
|
||||
data-testid="checkbox-label">
|
||||
<div className="tw-ml-1">{statusType.name}</div>
|
||||
<Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
|
||||
<>
|
||||
<h6 className="tw-heading tw-text-base">Webhooks</h6>
|
||||
<div className="tw-flex tw-justify-between tw-flex-col">
|
||||
<h6 className="tw-heading tw-mb-0" data-testid="filter-heading">
|
||||
Status
|
||||
</h6>
|
||||
<div className="tw-flex tw-mt-2" />
|
||||
</div>
|
||||
<div
|
||||
className="sidebar-my-data-holder"
|
||||
data-testid="filter-containers-1">
|
||||
{statuses.map((statusType, index) => (
|
||||
<div
|
||||
className="filter-group tw-justify-between tw-mb-3"
|
||||
data-testid={`status-type-${statusType.value}`}
|
||||
key={index}>
|
||||
<div className="tw-flex">
|
||||
<input
|
||||
checked={selectedStatus.includes(statusType.value)}
|
||||
className="tw-mr-1 custom-checkbox"
|
||||
data-testid="checkbox"
|
||||
type="checkbox"
|
||||
onChange={() => {
|
||||
handleStatusSelection(statusType.value);
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="tw-flex tw-items-center filters-title tw-truncate custom-checkbox-label"
|
||||
data-testid="checkbox-label">
|
||||
<div className="tw-ml-1">{statusType.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
const fetchRightPanel = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="tw-mb-5 tw-mt-11">
|
||||
<Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
|
||||
<div className="tw-my-2">
|
||||
The webhook allows external services to be notified of the metadata
|
||||
change events happening in your organization through APIs. Register
|
||||
callback URLs with webhook integration to receive metadata event
|
||||
notifications. You can add, list, update, and delete webhooks.
|
||||
</div>
|
||||
</>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@ -167,7 +170,7 @@ const Webhooks: FunctionComponent<WebhooksProps> = ({
|
||||
|
||||
return data.length ? (
|
||||
<PageLayout leftPanel={fetchLeftPanel()} rightPanel={fetchRightPanel()}>
|
||||
<div>
|
||||
<div className="tw-bg-white" style={{ padding: '14px' }}>
|
||||
{filteredData.length ? (
|
||||
<>
|
||||
<div className="tw-flex tw-justify-end tw-items-center">
|
||||
|
@ -24,6 +24,14 @@ interface PageLayoutProp {
|
||||
classes?: string;
|
||||
}
|
||||
|
||||
export const leftPanelAntCardStyle = {
|
||||
border: '1px rgb(221, 227, 234) solid',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
|
||||
marginRight: '4px',
|
||||
marginLeft: '4px',
|
||||
};
|
||||
|
||||
const PageLayout: FC<PageLayoutProp> = ({
|
||||
leftPanel,
|
||||
header,
|
||||
|
@ -134,7 +134,7 @@ const DropDown: React.FC<DropDownProp> = ({
|
||||
|
||||
{isDropDownIconVisible ? (
|
||||
<DropdownIcon
|
||||
style={{ marginTop: '7px', color: normalLink }}
|
||||
style={{ marginTop: '5px', color: normalLink }}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
|
@ -89,6 +89,26 @@ const NavBar = ({
|
||||
label="Settings"
|
||||
type="link"
|
||||
/>
|
||||
<NavLink
|
||||
className="tw-nav focus:tw-no-underline"
|
||||
data-testid="appbar-item-glossary"
|
||||
id="glossary"
|
||||
style={navStyle(pathname.startsWith('/glossary'))}
|
||||
to={{
|
||||
pathname: '/glossary',
|
||||
}}>
|
||||
Glossaries
|
||||
</NavLink>
|
||||
<NavLink
|
||||
className="tw-nav focus:tw-no-underline"
|
||||
data-testid="appbar-item-tags"
|
||||
id="tags"
|
||||
style={navStyle(pathname.startsWith('/tags'))}
|
||||
to={{
|
||||
pathname: '/tags',
|
||||
}}>
|
||||
Tags
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
@ -417,10 +417,8 @@ export const navLinkSettings = [
|
||||
disabled: false,
|
||||
isAdminOnly: true,
|
||||
},
|
||||
{ name: 'Glossaries', to: '/glossary', disabled: false },
|
||||
{ name: 'Roles', to: '/roles', disabled: false, isAdminOnly: true },
|
||||
{ name: 'Services', to: '/services', disabled: false },
|
||||
{ name: 'Tags', to: '/tags', disabled: false },
|
||||
{
|
||||
name: 'Teams & Users',
|
||||
to: ROUTES.TEAMS_AND_USERS,
|
||||
|
@ -11,6 +11,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Card } from 'antd';
|
||||
import { AxiosError, AxiosResponse } from 'axios';
|
||||
import classNames from 'classnames';
|
||||
import { compare } from 'fast-json-patch';
|
||||
@ -37,7 +38,9 @@ import Description from '../../components/common/description/Description';
|
||||
import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
|
||||
import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
|
||||
import PageContainerV1 from '../../components/containers/PageContainerV1';
|
||||
import PageLayout from '../../components/containers/PageLayout';
|
||||
import PageLayout, {
|
||||
leftPanelAntCardStyle,
|
||||
} from '../../components/containers/PageLayout';
|
||||
import Loader from '../../components/Loader/Loader';
|
||||
import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal';
|
||||
import AddRoleModal from '../../components/Modals/RoleModal/AddRoleModal';
|
||||
@ -579,33 +582,39 @@ const RolesPage = () => {
|
||||
|
||||
const fetchLeftPanel = (roles: Array<Role>) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
|
||||
<h6
|
||||
className="tw-heading tw-text-base"
|
||||
data-testid="left-panel-title">
|
||||
Roles
|
||||
</h6>
|
||||
</div>
|
||||
{roles &&
|
||||
roles.map((role) => (
|
||||
<div
|
||||
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
|
||||
role.name,
|
||||
currentRole?.name
|
||||
)}`}
|
||||
data-testid="role-name-container"
|
||||
key={role.name}
|
||||
onClick={() => setCurrentRole(role)}>
|
||||
<p
|
||||
className="tag-category label-category tw-self-center tw-truncate tw-w-52"
|
||||
title={role.displayName}>
|
||||
<span>{role.displayName}</span>{' '}
|
||||
</p>
|
||||
{role.defaultRole ? getDefaultBadge() : null}
|
||||
</div>
|
||||
))}
|
||||
</Fragment>
|
||||
<Card
|
||||
data-testid="data-summary-container"
|
||||
style={leftPanelAntCardStyle}
|
||||
title={
|
||||
<div className="tw-flex tw-justify-between tw-items-center">
|
||||
<h6
|
||||
className="tw-heading tw-text-base"
|
||||
data-testid="left-panel-title">
|
||||
Roles
|
||||
</h6>
|
||||
</div>
|
||||
}>
|
||||
<Fragment>
|
||||
{roles &&
|
||||
roles.map((role) => (
|
||||
<div
|
||||
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
|
||||
role.name,
|
||||
currentRole?.name
|
||||
)}`}
|
||||
data-testid="role-name-container"
|
||||
key={role.name}
|
||||
onClick={() => setCurrentRole(role)}>
|
||||
<span
|
||||
className="tag-category label-category tw-self-center tw-truncate tw-w-52"
|
||||
title={role.displayName}>
|
||||
<span>{role.displayName}</span>{' '}
|
||||
</span>
|
||||
{role.defaultRole ? getDefaultBadge() : null}
|
||||
</div>
|
||||
))}
|
||||
</Fragment>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1113,7 +1122,10 @@ const RolesPage = () => {
|
||||
{isLoading ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<div className="tw-pb-3" data-testid="role-container">
|
||||
<div
|
||||
className="tw-pb-3 tw-bg-white"
|
||||
data-testid="role-container"
|
||||
style={{ padding: '14px' }}>
|
||||
{getRolesContainer()}
|
||||
|
||||
{getAddRoleForm()}
|
||||
|
@ -11,6 +11,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Card } from 'antd';
|
||||
import { AxiosError, AxiosResponse } from 'axios';
|
||||
import classNames from 'classnames';
|
||||
import { isNil } from 'lodash';
|
||||
@ -25,7 +26,9 @@ import NextPrevious from '../../components/common/next-previous/NextPrevious';
|
||||
import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
|
||||
import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
|
||||
import PageContainerV1 from '../../components/containers/PageContainerV1';
|
||||
import PageLayout from '../../components/containers/PageLayout';
|
||||
import PageLayout, {
|
||||
leftPanelAntCardStyle,
|
||||
} from '../../components/containers/PageLayout';
|
||||
import Loader from '../../components/Loader/Loader';
|
||||
import {
|
||||
getServiceDetailsPath,
|
||||
@ -231,36 +234,41 @@ const ServicesPage = () => {
|
||||
|
||||
const fetchLeftPanel = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
|
||||
<h6 className="tw-heading tw-text-base">Services</h6>
|
||||
</div>
|
||||
<Card
|
||||
data-testid="data-summary-container"
|
||||
style={leftPanelAntCardStyle}
|
||||
title={
|
||||
<div className="tw-flex tw-justify-between tw-items-center">
|
||||
<h6 className="tw-heading tw-text-base">Services</h6>
|
||||
</div>
|
||||
}>
|
||||
<>
|
||||
{getServiceTabs()?.map((tab, index) => {
|
||||
return (
|
||||
<div
|
||||
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
|
||||
tab.name,
|
||||
serviceName
|
||||
)}`}
|
||||
data-testid="tab"
|
||||
key={index}
|
||||
onClick={() => {
|
||||
handleTabChange(tab.name);
|
||||
}}>
|
||||
<p className="tw-text-center tw-self-center label-category">
|
||||
{tab.displayName}
|
||||
</p>
|
||||
|
||||
{getServiceTabs()?.map((tab, index) => {
|
||||
return (
|
||||
<div
|
||||
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
|
||||
tab.name,
|
||||
serviceName
|
||||
)}`}
|
||||
data-testid="tab"
|
||||
key={index}
|
||||
onClick={() => {
|
||||
handleTabChange(tab.name);
|
||||
}}>
|
||||
<p className="tw-text-center tw-self-center label-category">
|
||||
{tab.displayName}
|
||||
</p>
|
||||
|
||||
{getCountBadge(
|
||||
servicesCount[tab.name],
|
||||
'tw-self-center',
|
||||
tab.name === serviceName
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
{getCountBadge(
|
||||
servicesCount[tab.name],
|
||||
'tw-self-center',
|
||||
tab.name === serviceName
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@ -406,53 +414,56 @@ const ServicesPage = () => {
|
||||
className="tw-grid xl:tw-grid-cols-4 tw-grid-cols-2 tw-gap-4 tw-mb-4"
|
||||
data-testid="data-container">
|
||||
{serviceList.map((service, index) => (
|
||||
<div
|
||||
className="tw-card tw-flex tw-py-2 tw-px-3 tw-justify-between tw-text-grey-muted"
|
||||
data-testid="service-card"
|
||||
key={index}>
|
||||
<div className="tw-flex tw-flex-col tw-justify-between tw-truncate">
|
||||
<div>
|
||||
<Link to={getServiceDetailsPath(service.name, serviceName)}>
|
||||
<button>
|
||||
<h6
|
||||
className="tw-text-base tw-text-grey-body tw-font-medium tw-text-left tw-truncate tw-w-48"
|
||||
data-testid={`service-name-${getEntityName(
|
||||
service as EntityReference
|
||||
)}`}
|
||||
title={getEntityName(service as EntityReference)}>
|
||||
{getEntityName(service as EntityReference)}
|
||||
</h6>
|
||||
</button>
|
||||
</Link>
|
||||
<div
|
||||
className="tw-text-grey-body tw-pb-1 tw-break-all description-text"
|
||||
data-testid="service-description">
|
||||
{service.description ? (
|
||||
<RichTextEditorPreviewer
|
||||
enableSeeMoreVariant={false}
|
||||
markdown={service.description}
|
||||
/>
|
||||
) : (
|
||||
<span className="tw-no-description">No description</span>
|
||||
)}
|
||||
<Card key={index} style={leftPanelAntCardStyle}>
|
||||
<div
|
||||
className="tw-flex tw-py-2 tw-px-3 tw-justify-between tw-text-grey-muted"
|
||||
data-testid="service-card">
|
||||
<div className="tw-flex tw-flex-col tw-justify-between tw-truncate">
|
||||
<div>
|
||||
<Link to={getServiceDetailsPath(service.name, serviceName)}>
|
||||
<button>
|
||||
<h6
|
||||
className="tw-text-base tw-text-grey-body tw-font-medium tw-text-left tw-truncate tw-w-48"
|
||||
data-testid={`service-name-${getEntityName(
|
||||
service as EntityReference
|
||||
)}`}
|
||||
title={getEntityName(service as EntityReference)}>
|
||||
{getEntityName(service as EntityReference)}
|
||||
</h6>
|
||||
</button>
|
||||
</Link>
|
||||
<div
|
||||
className="tw-text-grey-body tw-pb-1 tw-break-all description-text"
|
||||
data-testid="service-description">
|
||||
{service.description ? (
|
||||
<RichTextEditorPreviewer
|
||||
enableSeeMoreVariant={false}
|
||||
markdown={service.description}
|
||||
/>
|
||||
) : (
|
||||
<span className="tw-no-description">
|
||||
No description
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{getOptionalFields(service)}
|
||||
</div>
|
||||
<div className="" data-testid="service-type">
|
||||
<label className="tw-mb-0">Type:</label>
|
||||
<span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
|
||||
{service.serviceType}
|
||||
</span>
|
||||
</div>
|
||||
{getOptionalFields(service)}
|
||||
</div>
|
||||
<div className="" data-testid="service-type">
|
||||
<label className="tw-mb-0">Type:</label>
|
||||
<span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
|
||||
{service.serviceType}
|
||||
</span>
|
||||
<div className="tw-flex tw-flex-col tw-justify-between tw-flex-none">
|
||||
<div
|
||||
className="tw-flex tw-justify-end"
|
||||
data-testid="service-icon">
|
||||
{getServiceLogo(service.serviceType || '', 'tw-h-8')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tw-flex tw-flex-col tw-justify-between tw-flex-none">
|
||||
<div
|
||||
className="tw-flex tw-justify-end"
|
||||
data-testid="service-icon">
|
||||
{getServiceLogo(service.serviceType || '', 'tw-h-8')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Fragment>
|
||||
@ -490,7 +501,7 @@ const ServicesPage = () => {
|
||||
<ErrorPlaceHolder>{errorMessage}</ErrorPlaceHolder>
|
||||
) : (
|
||||
<PageLayout leftPanel={fetchLeftPanel()}>
|
||||
<div data-testid="services-container">
|
||||
<div data-testid="services-container" style={{ padding: '14px' }}>
|
||||
{getServiceList()}
|
||||
|
||||
{getPagination()}
|
||||
|
@ -12,6 +12,7 @@
|
||||
*/
|
||||
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Card } from 'antd';
|
||||
import { AxiosError, AxiosResponse } from 'axios';
|
||||
import classNames from 'classnames';
|
||||
import { isUndefined, toLower } from 'lodash';
|
||||
@ -34,7 +35,9 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
|
||||
import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
|
||||
import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
|
||||
import PageContainerV1 from '../../components/containers/PageContainerV1';
|
||||
import PageLayout from '../../components/containers/PageLayout';
|
||||
import PageLayout, {
|
||||
leftPanelAntCardStyle,
|
||||
} from '../../components/containers/PageLayout';
|
||||
import Loader from '../../components/Loader/Loader';
|
||||
import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal';
|
||||
import FormModal from '../../components/Modals/FormModal';
|
||||
@ -397,52 +400,56 @@ const TagsPage = () => {
|
||||
|
||||
const fetchLeftPanel = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
|
||||
<h6 className="tw-heading tw-text-base">Tag Categories</h6>
|
||||
<NonAdminAction position="bottom" title={TITLE_FOR_NON_ADMIN_ACTION}>
|
||||
<Button
|
||||
className={classNames('tw-h-7 tw-px-2 tw-mb-4', {
|
||||
'tw-opacity-40': !isAdminUser && !isAuthDisabled,
|
||||
})}
|
||||
data-testid="add-category"
|
||||
size="small"
|
||||
theme="primary"
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
setIsAddingCategory((prevState) => !prevState);
|
||||
setErrorDataCategory(undefined);
|
||||
}}>
|
||||
<FontAwesomeIcon icon="plus" />
|
||||
</Button>
|
||||
</NonAdminAction>
|
||||
</div>
|
||||
{categories &&
|
||||
categories.map((category: TagCategory) => (
|
||||
<div
|
||||
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
|
||||
category.name,
|
||||
currentCategory?.name
|
||||
)}`}
|
||||
data-testid="side-panel-category"
|
||||
key={category.name}
|
||||
onClick={() => {
|
||||
fetchCurrentCategory(category.name);
|
||||
}}>
|
||||
<p className="tw-text-center tw-self-center tag-category label-category">
|
||||
{category.displayName ?? category.name}
|
||||
</p>
|
||||
<Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
|
||||
<>
|
||||
<div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
|
||||
<h6 className="tw-heading tw-text-base">Tag Categories</h6>
|
||||
<NonAdminAction
|
||||
position="bottom"
|
||||
title={TITLE_FOR_NON_ADMIN_ACTION}>
|
||||
<Button
|
||||
className={classNames('tw-h-7 tw-px-2 tw-mb-4', {
|
||||
'tw-opacity-40': !isAdminUser && !isAuthDisabled,
|
||||
})}
|
||||
data-testid="add-category"
|
||||
size="small"
|
||||
theme="primary"
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
setIsAddingCategory((prevState) => !prevState);
|
||||
setErrorDataCategory(undefined);
|
||||
}}>
|
||||
<FontAwesomeIcon icon="plus" />
|
||||
</Button>
|
||||
</NonAdminAction>
|
||||
</div>
|
||||
{categories &&
|
||||
categories.map((category: TagCategory) => (
|
||||
<div
|
||||
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
|
||||
category.name,
|
||||
currentCategory?.name
|
||||
)}`}
|
||||
data-testid="side-panel-category"
|
||||
key={category.name}
|
||||
onClick={() => {
|
||||
fetchCurrentCategory(category.name);
|
||||
}}>
|
||||
<p className="tw-text-center tw-self-center tag-category label-category">
|
||||
{category.displayName ?? category.name}
|
||||
</p>
|
||||
|
||||
{getCountBadge(
|
||||
currentCategory?.name === category.name
|
||||
? currentCategory.children?.length
|
||||
: category.children?.length || 0,
|
||||
'tw-self-center',
|
||||
currentCategory?.name === category.name
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
{getCountBadge(
|
||||
currentCategory?.name === category.name
|
||||
? currentCategory.children?.length
|
||||
: category.children?.length || 0,
|
||||
'tw-self-center',
|
||||
currentCategory?.name === category.name
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@ -458,7 +465,10 @@ const TagsPage = () => {
|
||||
{isLoading ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<div className="full-height" data-testid="tags-container">
|
||||
<div
|
||||
className="full-height tw-bg-white"
|
||||
data-testid="tags-container"
|
||||
style={{ padding: '14px' }}>
|
||||
{currentCategory && (
|
||||
<div
|
||||
className="tw-flex tw-justify-between tw-items-center"
|
||||
|
Loading…
x
Reference in New Issue
Block a user