fix #14404: table schema tab ui issues (#14405)

* fixed arrow name alignment issue

* fix permission issues

* fix modal scroll issue

* fixed permission issues

* minor fix

* fix failing test

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx

@@ -412,6 +412,7 @@ export const DataAssetsHeader = ({
 
                 {entityType === EntityType.TABLE && onUpdateRetentionPeriod && (
                   <RetentionPeriod
+                    permissions={permissions}
                     retentionPeriod={(dataAsset as Table).retentionPeriod}
                     onUpdate={onUpdateRetentionPeriod}
                   />

openmetadata-ui/src/main/resources/ui/src/components/RetentionPeriod/RetentionPeriod.component.test.tsx

@@ -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';
 
@@ -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', () => {
@@ -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();
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/RetentionPeriod/RetentionPeriod.component.tsx

@@ -28,6 +28,7 @@ import { RetentionPeriodProps } from './RetentionPeriod.interface';
 const RetentionPeriod = ({
   retentionPeriod,
   onUpdate,
+  permissions,
 }: RetentionPeriodProps) => {
   const { t } = useTranslation();
   const [form] = useForm();
@@ -60,14 +61,16 @@ const RetentionPeriod = ({
           value={retentionPeriod ?? NO_DATA_PLACEHOLDER}
         />
 
-        <Button
+        {permissions?.EditAll && (
-          className="flex-center p-0"
+          <Button
-          data-testid="edit-retention-period-button"
+            className="flex-center p-0"
-          icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
+            data-testid="edit-retention-period-button"
-          size="small"
+            icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
-          type="text"
+            size="small"
-          onClick={() => setIsEdit(true)}
+            type="text"
-        />
+            onClick={() => setIsEdit(true)}
+          />
+        )}
       </Space>
 
       <Modal

openmetadata-ui/src/main/resources/ui/src/components/RetentionPeriod/RetentionPeriod.interface.ts

@@ -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;
 }

openmetadata-ui/src/main/resources/ui/src/components/SchemaTable/SchemaTable.component.tsx

@@ -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 = ({
@@ -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);
   };
@@ -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 flex-column hover-icon-group">
-              <div className="d-inline-flex">
+              <div className="inline">
                 {prepareConstraintIcon({
                   columnName: name,
                   columnConstraint: record.constraint,
@@ -339,11 +364,14 @@ const SchemaTable = ({
                   {getEntityName(record)}
                 </Typography.Text>
               ) : null}
-              <Icon
+              {(tablePermissions?.EditAll ||
-                className="hover-cell-icon text-left m-t-xss"
+                tablePermissions?.EditDisplayName) && (
-                component={IconEdit}
+                <Icon
-                onClick={() => handleEditDisplayNameClick(record)}
+                  className="hover-cell-icon text-left m-t-xss"
-              />
+                  component={IconEdit}
+                  onClick={() => handleEditDisplayNameClick(record)}
+                />
+              )}
             </div>
           );
         },

openmetadata-ui/src/main/resources/ui/src/components/TableDescription/TableDescription.component.tsx

@@ -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';
@@ -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}
+              style={{
-              name={t('label.edit')}
+                color: DE_ACTIVE_COLOR,
-              style={{ color: DE_ACTIVE_COLOR }}
+                padding: 0,
-              width={14}
+                border: 'none',
-              onClick={onClick}
+                background: 'transparent',
-            />
+              }}
+              onClick={onClick}>
+              <EditIcon />
+            </Button>
           )}
 
           <EntityTasks

openmetadata-ui/src/main/resources/ui/src/components/TableDescription/TableDescription.test.tsx

@@ -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);
+  });
+});

openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx

@@ -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} />
           )}