Fix partitioned keys (#13811)

* udpate design

(cherry picked from commit 0cd57be9216471c96baaf0ec439201c365f1c8ad)

* minor update

(cherry picked from commit 3147959bc08c556477eeaa0279ffef1dddbf6c85)

* address comments

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

@@ -29,6 +29,7 @@ const SchemaTab: FunctionComponent<Props> = ({
   isReadOnly = false,
   entityFqn,
   tableConstraints,
+  tablePartitioned,
 }: Props) => {
   const [searchText, setSearchText] = useState('');
 
@@ -58,6 +59,7 @@ const SchemaTab: FunctionComponent<Props> = ({
         searchText={lowerCase(searchText)}
         tableColumns={columns}
         tableConstraints={tableConstraints}
+        tablePartitioned={tablePartitioned}
         onThreadLinkSelect={onThreadLinkSelect}
         onUpdate={onUpdate}
       />

openmetadata-ui/src/main/resources/ui/src/components/SchemaTab/SchemaTab.interfaces.ts

@@ -16,6 +16,7 @@ import {
   ColumnJoins,
   Table,
   TableData,
+  TablePartition,
 } from '../../generated/entity/data/table';
 
 export type Props = {
@@ -28,6 +29,7 @@ export type Props = {
   hasTagEditAccess: boolean;
   isReadOnly?: boolean;
   entityFqn: string;
+  tablePartitioned?: TablePartition;
   onThreadLinkSelect: (value: string, threadType?: ThreadType) => void;
   onUpdate: (columns: Table['columns']) => Promise<void>;
 };

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

@@ -12,7 +12,7 @@
  */
 
 import Icon, { FilterOutlined } from '@ant-design/icons';
-import { Table, Tooltip, Typography } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { ExpandableConfig } from 'antd/lib/table/interface';
 import {
@@ -57,6 +57,7 @@ import {
   prepareConstraintIcon,
   updateFieldTags,
 } from '../../utils/TableUtils';
+import Table from '../common/Table/Table';
 import { ModalWithMarkdownEditor } from '../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
 import { SchemaTableProps, TableCellRendered } from './SchemaTable.interface';
 
@@ -71,6 +72,7 @@ const SchemaTable = ({
   onThreadLinkSelect,
   entityFqn,
   tableConstraints,
+  tablePartitioned,
 }: SchemaTableProps) => {
   const { t } = useTranslation();
 
@@ -357,6 +359,21 @@ const SchemaTable = ({
         width: 320,
         render: renderDescription,
       },
+      ...(tablePartitioned
+        ? [
+            {
+              title: t('label.partitioned'),
+              dataIndex: 'name',
+              key: 'name',
+              accessor: 'name',
+              width: 120,
+              render: (columnName: string) =>
+                tablePartitioned?.columns?.includes(columnName)
+                  ? t('label.partitioned')
+                  : t('label.non-partitioned'),
+            },
+          ]
+        : []),
       {
         title: t('label.tag-plural'),
         dataIndex: 'tags',

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

@@ -22,6 +22,7 @@ export interface SchemaTableProps {
   hasDescriptionEditAccess: boolean;
   hasTagEditAccess: boolean;
   tableConstraints: Table['tableConstraints'];
+  tablePartitioned: Table['tablePartition'];
   searchText?: string;
   isReadOnly?: boolean;
   entityFqn: string;

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

@@ -15,7 +15,7 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Column } from '../../generated/entity/data/container';
-import { Table } from '../../generated/entity/data/table';
+import { Table, TablePartition } from '../../generated/entity/data/table';
 import EntityTableV1 from './SchemaTable.component';
 
 const onEntityFieldSelect = jest.fn();
@@ -78,6 +78,7 @@ const mockEntityTableProp = {
   columnName: '',
   hasTagEditAccess: true,
   tableConstraints: mockTableConstraints,
+  tablePartitioned: {} as TablePartition,
   onEntityFieldSelect,
   onThreadLinkSelect,
   onUpdate,

openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/PartitionedKeys/PartitionedKeys.component.tsx

@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Space, Typography } from 'antd';
+import { Typography } from 'antd';
 import { t } from 'i18next';
 import React from 'react';
 import { TablePartition } from '../../../generated/entity/data/table';
@@ -21,17 +21,11 @@ interface PartitionedKeysProps {
 
 export const PartitionedKeys = ({ tablePartition }: PartitionedKeysProps) => {
   return (
-    <Space className="p-b-sm" direction="vertical">
+    <>
       <Typography.Text className="right-panel-label">
         {t('label.table-partitioned')}
       </Typography.Text>
-      <Typography.Text>
-        {`${t('label.interval')} - ${tablePartition.intervalType}`}
-      </Typography.Text>
-      <Space>
-        {`${t('label.column-plural')} -
-        ${tablePartition.columns?.map((column) => column)}`}
-      </Space>
-    </Space>
+      <span>{` - ${tablePartition.intervalType}`}</span>
+    </>
   );
 };

openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx

@@ -483,6 +483,7 @@ const TableDetailsPageV1 = () => {
               isReadOnly={tableDetails?.deleted}
               joins={tableDetails?.joins?.columnJoins || []}
               tableConstraints={tableDetails?.tableConstraints}
+              tablePartitioned={tableDetails?.tablePartition}
               onThreadLinkSelect={onThreadLinkSelect}
               onUpdate={onColumnsUpdate}
             />