Skip to content

Commit

Permalink
fix #14404: table schema tab ui issues (#14405)
Browse files Browse the repository at this point in the history
* fixed arrow name alignment issue

* fix permission issues

* fix modal scroll issue

* fixed permission issues

* minor fix

* fix failing test
  • Loading branch information
harsh-vador authored Dec 21, 2023
1 parent 0e4f808 commit b9e1360
Show file tree
Hide file tree
Showing 8 changed files with 165 additions and 26 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -412,6 +412,7 @@ export const DataAssetsHeader = ({

{entityType === EntityType.TABLE && onUpdateRetentionPeriod && (
<RetentionPeriod
permissions={permissions}
retentionPeriod={(dataAsset as Table).retentionPeriod}
onUpdate={onUpdateRetentionPeriod}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
import { act, fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { NO_DATA_PLACEHOLDER } from '../../constants/constants';
import { OperationPermission } from '../PermissionProvider/PermissionProvider.interface';
import RetentionPeriod from './RetentionPeriod.component';
import { RetentionPeriodProps } from './RetentionPeriod.interface';

Expand All @@ -30,6 +31,7 @@ const mockOnUpdate = jest.fn();
const mockRetentionPeriodProps: RetentionPeriodProps = {
retentionPeriod: undefined,
onUpdate: mockOnUpdate,
permissions: { EditAll: true } as OperationPermission,
};

describe('Test Retention Period Component', () => {
Expand Down Expand Up @@ -138,4 +140,20 @@ describe('Test Retention Period Component', () => {

expect(mockOnUpdate).toHaveBeenCalledWith('69 days and 16 hours');
});

it('Should not render Retention Period Component if has no permission', () => {
const permissions = { EditAll: false } as OperationPermission;
render(
<RetentionPeriod
{...mockRetentionPeriodProps}
permissions={permissions}
/>
);

expect(
screen.getByTestId('retention-period-container')
).toBeInTheDocument();

expect(screen.getByText(NO_DATA_PLACEHOLDER)).toBeInTheDocument();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { RetentionPeriodProps } from './RetentionPeriod.interface';
const RetentionPeriod = ({
retentionPeriod,
onUpdate,
permissions,
}: RetentionPeriodProps) => {
const { t } = useTranslation();
const [form] = useForm();
Expand Down Expand Up @@ -60,14 +61,16 @@ const RetentionPeriod = ({
value={retentionPeriod ?? NO_DATA_PLACEHOLDER}
/>

<Button
className="flex-center p-0"
data-testid="edit-retention-period-button"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
onClick={() => setIsEdit(true)}
/>
{permissions?.EditAll && (
<Button
className="flex-center p-0"
data-testid="edit-retention-period-button"
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
size="small"
type="text"
onClick={() => setIsEdit(true)}
/>
)}
</Space>

<Modal
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@
* limitations under the License.
*/

import { OperationPermission } from '../PermissionProvider/PermissionProvider.interface';

export interface RetentionPeriodProps {
retentionPeriod?: string;
onUpdate: (retentionPeriod: string) => Promise<void>;
permissions: OperationPermission;
}
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,14 @@ import {
prepareConstraintIcon,
updateFieldTags,
} from '../../utils/TableUtils';
import { showErrorToast } from '../../utils/ToastUtils';
import Table from '../common/Table/Table';
import { ModalWithMarkdownEditor } from '../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
import { usePermissionProvider } from '../PermissionProvider/PermissionProvider';
import {
OperationPermission,
ResourceEntity,
} from '../PermissionProvider/PermissionProvider.interface';
import { SchemaTableProps, TableCellRendered } from './SchemaTable.interface';

const SchemaTable = ({
Expand All @@ -79,21 +85,40 @@ const SchemaTable = ({

const [searchedColumns, setSearchedColumns] = useState<Column[]>([]);
const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);

const [tablePermissions, setTablePermissions] =
useState<OperationPermission>();
const [editColumn, setEditColumn] = useState<Column>();

const [editColumnDisplayName, setEditColumnDisplayName] = useState<Column>();
const { getEntityPermissionByFqn } = usePermissionProvider();

const sortByOrdinalPosition = useMemo(
() => sortBy(tableColumns, 'ordinalPosition'),
[tableColumns]
);

const fetchResourcePermission = async (entityFqn: string) => {
try {
const permissions = await getEntityPermissionByFqn(
ResourceEntity.TABLE,
entityFqn
);
setTablePermissions(permissions);
} catch (error) {
showErrorToast(
t('server.fetch-entity-permissions-error', {
entity: entityFqn,
})
);
}
};
const data = React.useMemo(
() => makeData(searchedColumns),
[searchedColumns]
);

useEffect(() => {
fetchResourcePermission(entityFqn);
}, [entityFqn]);
const handleEditColumn = (column: Column): void => {
setEditColumn(column);
};
Expand Down Expand Up @@ -314,8 +339,8 @@ const SchemaTable = ({
const { displayName } = record;

return (
<div className="d-inline-flex flex-column hover-icon-group w-full">
<div className="d-inline-flex">
<div className="d-inline-flex flex-column hover-icon-group">
<div className="inline">
{prepareConstraintIcon({
columnName: name,
columnConstraint: record.constraint,
Expand All @@ -339,11 +364,14 @@ const SchemaTable = ({
{getEntityName(record)}
</Typography.Text>
) : null}
<Icon
className="hover-cell-icon text-left m-t-xss"
component={IconEdit}
onClick={() => handleEditDisplayNameClick(record)}
/>
{(tablePermissions?.EditAll ||
tablePermissions?.EditDisplayName) && (
<Icon
className="hover-cell-icon text-left m-t-xss"
component={IconEdit}
onClick={() => handleEditDisplayNameClick(record)}
/>
)}
</div>
);
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
* limitations under the License.
*/

import { Space } from 'antd';
import { Button, Space } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as EditIcon } from '../../assets/svg/edit-new.svg';
Expand Down Expand Up @@ -51,15 +51,18 @@ const TableDescription = ({
{!isReadOnly ? (
<Space align="baseline" size="middle">
{hasEditPermission && (
<EditIcon
<Button
className="cursor-pointer hover-cell-icon"
data-testid="edit-button"
height={14}
name={t('label.edit')}
style={{ color: DE_ACTIVE_COLOR }}
width={14}
onClick={onClick}
/>
style={{
color: DE_ACTIVE_COLOR,
padding: 0,
border: 'none',
background: 'transparent',
}}
onClick={onClick}>
<EditIcon />
</Button>
)}

<EntityTasks
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/*
* Copyright 2023 Collate.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import '@testing-library/jest-dom';
import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { EntityType } from '../../enums/entity.enum';
import TableDescription from './TableDescription.component';

jest.mock('../../pages/TasksPage/EntityTasks/EntityTasks.component', () => {
return jest.fn().mockReturnValue(<p>EntityTasks</p>);
});

jest.mock(
'../../components/common/RichTextEditor/RichTextEditorPreviewer',
() => {
return jest.fn().mockReturnValue(<p>RichTextEditorPreviewer</p>);
}
);

describe('TableDescription Component', () => {
const mockProps = {
index: 0,
columnData: {
fqn: 'testEntity',
field: 'Test description',
},
entityFqn: 'testEntity',
isReadOnly: false,
onClick: jest.fn(),
entityType: EntityType.TABLE,
hasEditPermission: true,
onThreadLinkSelect: jest.fn(),
};

it('should render description correctly', () => {
const { getByTestId } = render(<TableDescription {...mockProps} />);
const descriptionElement = getByTestId('description');

expect(descriptionElement).toBeInTheDocument();
expect(descriptionElement).toHaveTextContent(
'RichTextEditorPreviewerEntityTasks'
);
});

it('should render edit button when hasEditPermission is true', () => {
const { getByTestId } = render(<TableDescription {...mockProps} />);
const editButton = getByTestId('edit-button');

expect(editButton).toBeInTheDocument();

fireEvent.click(editButton);

expect(mockProps.onClick).toHaveBeenCalled();
});

it('should not render edit button when hasEditPermission is false', () => {
const { queryByTestId } = render(
<TableDescription {...mockProps} hasEditPermission={false} />
);
const editButton = queryByTestId('edit-button');

expect(editButton).toBeNull();
});

it('should call onClick prop when Edit Button is clicked', () => {
const onClick = jest.fn();
render(<TableDescription {...mockProps} onClick={onClick} />);

fireEvent.click(screen.getByTestId('edit-button'));

expect(onClick).toHaveBeenCalledTimes(1);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -505,7 +505,7 @@ export function getTableExpandableConfig<T>(
const expandableConfig: ExpandableConfig<T> = {
expandIcon: ({ expanded, onExpand, expandable, record }) =>
expandable ? (
<div className="d-inline-flex items-center">
<div className="items-center inline">
{isDraggable && (
<IconDrag className="m-r-xs drag-icon" height={12} width={12} />
)}
Expand Down

0 comments on commit b9e1360

Please sign in to comment.