mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-08-30 20:06:19 +00:00
feat(ui): displayName support for columns inside the table (#13090)
* feat(ui): displayName support for columns inside the table * fix unit tests * update styling and unit tests added * address comments
This commit is contained in:
Chirag Madlani
GitHub
parent
39169285af
commit
6fcc0993b5
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="m497.9 142.1-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8 21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"/></svg>
|
||||
|
Before Width: | Height: | Size: 544 B |
@ -1,13 +1,4 @@
|
||||
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_19769_23023)">
|
||||
<path d="M1.72277 9.91757C1.62289 9.91755 1.52525 9.88791 1.44221 9.83241C1.35916 9.77691 1.29444 9.69803 1.25622 9.60574C1.218 9.51346 1.20799 9.41192 1.22747 9.31395C1.24695 9.21598 1.29504 9.12599 1.36566 9.05535L9.259 1.16202C9.30559 1.11377 9.36133 1.07529 9.42295 1.04882C9.48458 1.02235 9.55086 1.00841 9.61793 1.00783C9.685 1.00725 9.75151 1.02003 9.81358 1.04543C9.87566 1.07082 9.93206 1.10833 9.97948 1.15576C10.0269 1.20318 10.0644 1.25958 10.0898 1.32165C10.1152 1.38373 10.128 1.45024 10.1274 1.51731C10.1268 1.58438 10.1129 1.65066 10.0864 1.71228C10.0599 1.77391 10.0215 1.82965 9.97322 1.87624L2.07989 9.76957C1.98139 9.86807 1.85208 9.91757 1.72277 9.91757Z" fill="currentColor"/>
|
||||
<path d="M0.943012 13.5649C0.867642 13.565 0.793214 13.5482 0.725184 13.5157C0.657153 13.4833 0.597246 13.436 0.549853 13.3774C0.50246 13.3188 0.468783 13.2503 0.451291 13.177C0.433799 13.1037 0.432935 13.0274 0.448763 12.9537L1.22916 9.31618C1.24289 9.25115 1.26933 9.18947 1.30695 9.13467C1.34457 9.07988 1.39263 9.03305 1.44839 8.99687C1.50414 8.96069 1.56649 8.93586 1.63185 8.92382C1.69722 8.91178 1.76432 8.91276 1.82931 8.9267C1.89429 8.94064 1.95589 8.96727 2.01056 9.00506C2.06524 9.04286 2.11192 9.09107 2.14793 9.14693C2.18393 9.2028 2.20856 9.26523 2.2204 9.33063C2.23223 9.39603 2.23104 9.46313 2.2169 9.52807L1.4365 13.1656C1.4123 13.2786 1.35012 13.3798 1.26032 13.4525C1.17052 13.5251 1.05853 13.5648 0.943012 13.5649ZM4.58005 12.7845C4.48016 12.7845 4.38253 12.7549 4.29948 12.6993C4.21644 12.6438 4.15171 12.565 4.11349 12.4727C4.07527 12.3804 4.06527 12.2789 4.08475 12.1809C4.10423 12.0829 4.15232 11.9929 4.22294 11.9223L12.1163 4.0292C12.1629 3.98096 12.2186 3.94248 12.2802 3.91601C12.3419 3.88954 12.4081 3.8756 12.4752 3.87502C12.5423 3.87444 12.6088 3.88722 12.6709 3.91261C12.7329 3.93801 12.7893 3.97552 12.8368 4.02294C12.8842 4.07037 12.9217 4.12677 12.9471 4.18884C12.9725 4.25092 12.9853 4.31743 12.9847 4.3845C12.9841 4.45157 12.9702 4.51785 12.9437 4.57947C12.9172 4.6411 12.8787 4.69683 12.8305 4.74343L4.93741 12.6365C4.89054 12.6835 4.83484 12.7208 4.77351 12.7462C4.71218 12.7716 4.64643 12.7846 4.58005 12.7845Z" fill="currentColor"/>
|
||||
<path d="M0.941691 13.5625C0.817227 13.562 0.697335 13.5155 0.604993 13.4321C0.51265 13.3486 0.454354 13.234 0.441275 13.1102C0.428197 12.9865 0.461256 12.8622 0.534118 12.7613C0.606979 12.6604 0.714518 12.5899 0.836124 12.5634L4.47366 11.783C4.60447 11.7554 4.74089 11.7807 4.85303 11.8535C4.96517 11.9263 5.04389 12.0405 5.07193 12.1713C5.09997 12.302 5.07505 12.4385 5.00263 12.5508C4.9302 12.6632 4.81618 12.7423 4.68556 12.7707L1.04802 13.5511C1.01309 13.5588 0.97744 13.5626 0.941691 13.5625ZM11.0444 6.31747C10.978 6.3176 10.9123 6.30458 10.851 6.27918C10.7897 6.25378 10.7341 6.21649 10.6873 6.16947L7.83011 3.31233C7.78187 3.26573 7.74339 3.21 7.71692 3.14837C7.69045 3.08675 7.67651 3.02046 7.67593 2.9534C7.67535 2.88633 7.68813 2.81982 7.71352 2.75774C7.73892 2.69566 7.77643 2.63927 7.82385 2.59184C7.87128 2.54442 7.92768 2.50691 7.98975 2.48151C8.05183 2.45612 8.11834 2.44334 8.18541 2.44392C8.25248 2.4445 8.31876 2.45843 8.38038 2.48491C8.44201 2.51138 8.49774 2.54986 8.54434 2.5981L11.4015 5.45525C11.4721 5.52589 11.5202 5.61588 11.5397 5.71385C11.5592 5.81182 11.5492 5.91336 11.5109 6.00564C11.4727 6.09793 11.408 6.17681 11.3249 6.23231C11.2419 6.28781 11.1443 6.31745 11.0444 6.31747ZM12.4731 4.88902C12.3731 4.8891 12.2754 4.85952 12.1922 4.80402C12.1091 4.74853 12.0443 4.66961 12.006 4.57727C11.9678 4.48492 11.9578 4.3833 11.9773 4.28526C11.9968 4.18723 12.045 4.09719 12.1157 4.02655C12.3968 3.74546 12.5516 3.36486 12.5516 2.95521C12.5516 2.54557 12.3968 2.16497 12.1157 1.88388C11.8344 1.60253 11.4538 1.44772 11.0441 1.44772C10.6345 1.44772 10.2539 1.60253 9.97278 1.88388C9.92587 1.93079 9.87018 1.96801 9.80888 1.99339C9.74759 2.01878 9.68189 2.03185 9.61555 2.03185C9.5492 2.03185 9.48351 2.01878 9.42221 1.99339C9.36092 1.96801 9.30522 1.93079 9.25831 1.88388C9.2114 1.83697 9.17418 1.78127 9.14879 1.71998C9.1234 1.65868 9.11033 1.59299 9.11033 1.52664C9.11033 1.4603 9.1234 1.3946 9.14879 1.3333C9.17418 1.27201 9.2114 1.21632 9.25831 1.1694C9.73008 0.697378 10.3642 0.4375 11.0441 0.4375C11.7237 0.4375 12.3582 0.697378 12.8299 1.1694C13.302 1.64117 13.5618 2.27534 13.5618 2.95521C13.5618 3.63509 13.302 4.26925 12.8299 4.74103C12.7832 4.78802 12.7275 4.82528 12.6663 4.85068C12.605 4.87608 12.5394 4.88911 12.4731 4.88902Z" fill="currentColor"/>
|
||||
<line x1="8.19043" y1="13.0625" x2="13.0704" y2="13.0625" stroke="#6B7280" stroke-linecap="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_19769_23023">
|
||||
<rect width="14" height="14" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.660671 13.1028C0.610902 13.119 0.558579 13.1274 0.505512 13.1274C0.430142 13.1275 0.355714 13.1107 0.287684 13.0782C0.219653 13.0458 0.159746 12.9985 0.112353 12.9399C0.0649604 12.8813 0.0312834 12.8128 0.0137914 12.7395C-0.00370064 12.6662 -0.00456462 12.5899 0.0112634 12.5162L0.783813 8.91526C0.785357 8.90228 0.787409 8.88933 0.789971 8.87645C0.809451 8.77848 0.857541 8.68849 0.928161 8.61785L7.34548 2.20054C7.35813 2.18435 7.37177 2.16892 7.38635 2.15434C7.40093 2.13976 7.41636 2.12612 7.43254 2.11348L8.8215 0.724521C8.84255 0.702724 8.86546 0.68292 8.88994 0.665317C9.35364 0.235498 9.95938 0 10.6066 0C11.2862 0 11.9207 0.259878 12.3924 0.7319C12.8645 1.20367 13.1243 1.83784 13.1243 2.51771C13.1243 3.17662 12.8803 3.79259 12.4355 4.25942C12.4223 4.27576 12.4081 4.29129 12.393 4.30593L4.49991 12.199C4.45304 12.246 4.39734 12.2833 4.33601 12.3087C4.29158 12.3271 4.24483 12.339 4.19719 12.3441L0.660671 13.1028ZM1.1634 11.9618L3.89431 11.3759L9.89413 5.37631L7.74612 3.22834L1.75086 9.2236L1.1634 11.9618ZM8.46035 2.51411L10.6084 4.66211L11.6456 3.62486C11.6559 3.61245 11.6667 3.60049 11.6782 3.58905C11.9593 3.30796 12.1141 2.92736 12.1141 2.51771C12.1141 2.10807 11.9593 1.72747 11.6782 1.44638C11.3969 1.16503 11.0163 1.01022 10.6066 1.01022C10.197 1.01022 9.8164 1.16503 9.53528 1.44638C9.51832 1.46334 9.50021 1.47904 9.48109 1.49337L8.46035 2.51411Z" fill="#757575"/>
|
||||
<path d="M7.75293 12.625H12.6329" stroke="#757575" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 1.6 KiB |
@ -11,10 +11,14 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Icon from '@ant-design/icons';
|
||||
import { Space, Table, Tooltip, Typography } from 'antd';
|
||||
import { ColumnsType } from 'antd/lib/table';
|
||||
import { ExpandableConfig } from 'antd/lib/table/interface';
|
||||
import { ReactComponent as IconEdit } from 'assets/svg/edit-new.svg';
|
||||
import FilterTablePlaceHolder from 'components/common/error-with-placeholder/FilterTablePlaceHolder';
|
||||
import EntityNameModal from 'components/Modals/EntityNameModal/EntityNameModal.component';
|
||||
import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
|
||||
import TableDescription from 'components/TableDescription/TableDescription.component';
|
||||
import TableTags from 'components/TableTags/TableTags.component';
|
||||
import { TABLE_SCROLL_VALUE } from 'constants/Table.constants';
|
||||
@ -26,6 +30,7 @@ import {
|
||||
lowerCase,
|
||||
map,
|
||||
reduce,
|
||||
set,
|
||||
sortBy,
|
||||
toLower,
|
||||
} from 'lodash';
|
||||
@ -65,6 +70,10 @@ const SchemaTable = ({
|
||||
const [searchedColumns, setSearchedColumns] = useState<Column[]>([]);
|
||||
const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
|
||||
|
||||
const [editColumn, setEditColumn] = useState<Column>();
|
||||
|
||||
const [editColumnDisplayName, setEditColumnDisplayName] = useState<Column>();
|
||||
|
||||
const sortByOrdinalPosition = useMemo(
|
||||
() => sortBy(tableColumns, 'ordinalPosition'),
|
||||
[tableColumns]
|
||||
@ -75,32 +84,34 @@ const SchemaTable = ({
|
||||
[searchedColumns]
|
||||
);
|
||||
|
||||
const [editColumn, setEditColumn] = useState<{
|
||||
column: Column;
|
||||
index: number;
|
||||
}>();
|
||||
|
||||
const handleEditColumn = (column: Column, index: number): void => {
|
||||
setEditColumn({ column, index });
|
||||
const handleEditColumn = (column: Column): void => {
|
||||
setEditColumn(column);
|
||||
};
|
||||
const closeEditColumnModal = (): void => {
|
||||
setEditColumn(undefined);
|
||||
};
|
||||
|
||||
const updateColumnDescription = (
|
||||
tableCols: Column[],
|
||||
changedColFQN: string,
|
||||
description: string
|
||||
) => {
|
||||
tableCols?.forEach((col) => {
|
||||
if (col.fullyQualifiedName === changedColFQN) {
|
||||
col.description = description;
|
||||
const updateColumnFields = ({
|
||||
fqn,
|
||||
field,
|
||||
value,
|
||||
columns,
|
||||
}: {
|
||||
fqn: string;
|
||||
field: keyof Column;
|
||||
value?: string;
|
||||
columns: Column[];
|
||||
}) => {
|
||||
columns?.forEach((col) => {
|
||||
if (col.fullyQualifiedName === fqn) {
|
||||
set(col, field, value);
|
||||
} else {
|
||||
updateColumnDescription(
|
||||
col?.children as Column[],
|
||||
changedColFQN,
|
||||
description
|
||||
);
|
||||
updateColumnFields({
|
||||
fqn,
|
||||
field,
|
||||
value,
|
||||
columns: col.children as Column[],
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -153,13 +164,14 @@ const SchemaTable = ({
|
||||
};
|
||||
|
||||
const handleEditColumnChange = async (columnDescription: string) => {
|
||||
if (editColumn && editColumn.column.fullyQualifiedName) {
|
||||
if (editColumn && editColumn.fullyQualifiedName) {
|
||||
const tableCols = cloneDeep(tableColumns);
|
||||
updateColumnDescription(
|
||||
tableCols,
|
||||
editColumn.column.fullyQualifiedName,
|
||||
columnDescription
|
||||
);
|
||||
updateColumnFields({
|
||||
fqn: editColumn.fullyQualifiedName,
|
||||
value: columnDescription,
|
||||
field: 'description',
|
||||
columns: tableCols,
|
||||
});
|
||||
await onUpdate(tableCols);
|
||||
setEditColumn(undefined);
|
||||
} else {
|
||||
@ -214,8 +226,8 @@ const SchemaTable = ({
|
||||
return searchedValue;
|
||||
};
|
||||
|
||||
const handleUpdate = (column: Column, index: number) => {
|
||||
handleEditColumn(column, index);
|
||||
const handleUpdate = (column: Column) => {
|
||||
handleEditColumn(column);
|
||||
};
|
||||
|
||||
const renderDataTypeDisplay: TableCellRendered<Column, 'dataTypeDisplay'> = (
|
||||
@ -258,7 +270,7 @@ const SchemaTable = ({
|
||||
hasEditPermission={hasDescriptionEditAccess}
|
||||
index={index}
|
||||
isReadOnly={isReadOnly}
|
||||
onClick={() => handleUpdate(record, index)}
|
||||
onClick={() => handleUpdate(record)}
|
||||
onThreadLinkSelect={onThreadLinkSelect}
|
||||
/>
|
||||
{getFrequentlyJoinedColumns(
|
||||
@ -270,6 +282,52 @@ const SchemaTable = ({
|
||||
);
|
||||
};
|
||||
|
||||
const expandableConfig: ExpandableConfig<Column> = useMemo(
|
||||
() => ({
|
||||
...getTableExpandableConfig<Column>(),
|
||||
rowExpandable: (record) => !isEmpty(record.children),
|
||||
expandedRowKeys,
|
||||
onExpand: (expanded, record) => {
|
||||
setExpandedRowKeys(
|
||||
expanded
|
||||
? [...expandedRowKeys, record.fullyQualifiedName ?? '']
|
||||
: expandedRowKeys.filter((key) => key !== record.fullyQualifiedName)
|
||||
);
|
||||
},
|
||||
}),
|
||||
[expandedRowKeys]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!searchText) {
|
||||
setSearchedColumns(sortByOrdinalPosition);
|
||||
} else {
|
||||
const searchCols = searchInColumns(sortByOrdinalPosition, searchText);
|
||||
setSearchedColumns(searchCols);
|
||||
}
|
||||
}, [searchText, sortByOrdinalPosition]);
|
||||
|
||||
const handleEditDisplayNameClick = (record: Column) => {
|
||||
setEditColumnDisplayName(record);
|
||||
};
|
||||
|
||||
const handleEditDisplayName = ({ displayName }: EntityName) => {
|
||||
if (editColumnDisplayName && editColumnDisplayName.fullyQualifiedName) {
|
||||
const tableCols = cloneDeep(tableColumns);
|
||||
updateColumnFields({
|
||||
fqn: editColumnDisplayName.fullyQualifiedName,
|
||||
value: isEmpty(displayName) ? undefined : displayName,
|
||||
field: 'displayName',
|
||||
columns: tableCols,
|
||||
});
|
||||
onUpdate(tableCols).then(() => {
|
||||
setEditColumnDisplayName(undefined);
|
||||
});
|
||||
} else {
|
||||
setEditColumnDisplayName(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<Column> = useMemo(
|
||||
() => [
|
||||
{
|
||||
@ -279,19 +337,47 @@ const SchemaTable = ({
|
||||
accessor: 'name',
|
||||
width: 180,
|
||||
fixed: 'left',
|
||||
render: (name: Column['name'], record: Column) => (
|
||||
<Space
|
||||
align="start"
|
||||
className="w-max-90 vertical-align-inherit"
|
||||
size={2}>
|
||||
{prepareConstraintIcon({
|
||||
columnName: name,
|
||||
columnConstraint: record.constraint,
|
||||
tableConstraints,
|
||||
})}
|
||||
<span className="break-word">{getEntityName(record)}</span>
|
||||
</Space>
|
||||
),
|
||||
render: (name: Column['name'], record: Column) => {
|
||||
const { displayName } = record;
|
||||
|
||||
return (
|
||||
<div className="d-flex flex-column gap-2 hover-icon-group">
|
||||
<Space
|
||||
align="center"
|
||||
className="w-max-90 vertical-align-inherit"
|
||||
size={2}>
|
||||
{prepareConstraintIcon({
|
||||
columnName: name,
|
||||
columnConstraint: record.constraint,
|
||||
tableConstraints,
|
||||
})}
|
||||
<div>
|
||||
{/* If we do not have displayName name only be shown in the bold from the below code */}
|
||||
{!isEmpty(displayName) ? (
|
||||
<Typography.Text
|
||||
className="m-b-0 d-block text-grey-muted"
|
||||
data-testid="column-name">
|
||||
{name}
|
||||
</Typography.Text>
|
||||
) : null}
|
||||
|
||||
{/* It will render displayName fallback to name */}
|
||||
<Typography.Text
|
||||
className="m-b-0 d-block"
|
||||
data-testid="column-display-name"
|
||||
ellipsis={{ tooltip: true }}>
|
||||
{getEntityName(record)}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
</Space>
|
||||
<Icon
|
||||
className="hover-cell-icon text-left"
|
||||
component={IconEdit}
|
||||
onClick={() => handleEditDisplayNameClick(record)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('label.type'),
|
||||
@ -366,30 +452,6 @@ const SchemaTable = ({
|
||||
onThreadLinkSelect,
|
||||
]
|
||||
);
|
||||
const expandableConfig: ExpandableConfig<Column> = useMemo(
|
||||
() => ({
|
||||
...getTableExpandableConfig<Column>(),
|
||||
rowExpandable: (record) => !isEmpty(record.children),
|
||||
expandedRowKeys,
|
||||
onExpand: (expanded, record) => {
|
||||
setExpandedRowKeys(
|
||||
expanded
|
||||
? [...expandedRowKeys, record.fullyQualifiedName ?? '']
|
||||
: expandedRowKeys.filter((key) => key !== record.fullyQualifiedName)
|
||||
);
|
||||
},
|
||||
}),
|
||||
[expandedRowKeys]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!searchText) {
|
||||
setSearchedColumns(sortByOrdinalPosition);
|
||||
} else {
|
||||
const searchCols = searchInColumns(sortByOrdinalPosition, searchText);
|
||||
setSearchedColumns(searchCols);
|
||||
}
|
||||
}, [searchText, sortByOrdinalPosition]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -412,14 +474,25 @@ const SchemaTable = ({
|
||||
<ModalWithMarkdownEditor
|
||||
header={`${t('label.edit-entity', {
|
||||
entity: t('label.column'),
|
||||
})}: "${editColumn.column.name}"`}
|
||||
})}: "${editColumn.name}"`}
|
||||
placeholder={t('message.enter-column-description')}
|
||||
value={editColumn.column.description as string}
|
||||
value={editColumn.description as string}
|
||||
visible={Boolean(editColumn)}
|
||||
onCancel={closeEditColumnModal}
|
||||
onSave={handleEditColumnChange}
|
||||
/>
|
||||
)}
|
||||
{editColumnDisplayName && (
|
||||
<EntityNameModal
|
||||
entity={editColumnDisplayName}
|
||||
title={`${t('label.edit-entity', {
|
||||
entity: t('label.column'),
|
||||
})}: "${editColumnDisplayName?.name}"`}
|
||||
visible={Boolean(editColumnDisplayName)}
|
||||
onCancel={closeEditColumnModal}
|
||||
onSave={handleEditDisplayName}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -83,6 +83,45 @@ const mockEntityTableProp = {
|
||||
onUpdate,
|
||||
};
|
||||
|
||||
const columnsWithDisplayName = [
|
||||
{
|
||||
name: 'comments',
|
||||
displayName: 'Comments',
|
||||
dataType: 'STRING',
|
||||
dataLength: 1,
|
||||
dataTypeDisplay: 'string',
|
||||
fullyQualifiedName:
|
||||
'bigquery_gcp.ecommerce.shopify.raw_product_catalog.comments',
|
||||
tags: [],
|
||||
constraint: 'NULL',
|
||||
ordinalPosition: 1,
|
||||
},
|
||||
{
|
||||
name: 'products',
|
||||
dataType: 'ARRAY',
|
||||
arrayDataType: 'STRUCT',
|
||||
dataLength: 1,
|
||||
dataTypeDisplay:
|
||||
'array<struct<product_id:character varying(24),price:int,onsale:boolean,tax:int,weight:int,others:int,vendor:character varying(64), stock:int>>',
|
||||
fullyQualifiedName:
|
||||
'bigquery_gcp.ecommerce.shopify.raw_product_catalog.products',
|
||||
tags: [],
|
||||
constraint: 'NULL',
|
||||
ordinalPosition: 2,
|
||||
},
|
||||
{
|
||||
name: 'platform',
|
||||
dataType: 'STRING',
|
||||
dataLength: 1,
|
||||
dataTypeDisplay: 'string',
|
||||
fullyQualifiedName:
|
||||
'bigquery_gcp.ecommerce.shopify.raw_product_catalog.platform',
|
||||
tags: [],
|
||||
constraint: 'NULL',
|
||||
ordinalPosition: 3,
|
||||
},
|
||||
] as Column[];
|
||||
|
||||
jest.mock('../../hooks/authHooks', () => {
|
||||
return {
|
||||
useAuth: jest.fn().mockReturnValue({
|
||||
@ -173,4 +212,41 @@ describe('Test EntityTable Component', () => {
|
||||
|
||||
expect(emptyPlaceholder).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render column name only if displayName is not present', async () => {
|
||||
render(<EntityTableV1 {...mockEntityTableProp} />, {
|
||||
wrapper: MemoryRouter,
|
||||
});
|
||||
|
||||
const columnNames = await screen.findAllByTestId('column-display-name');
|
||||
|
||||
expect(columnNames).toHaveLength(3);
|
||||
|
||||
expect(columnNames[0].textContent).toBe('comments');
|
||||
expect(columnNames[1].textContent).toBe('products');
|
||||
expect(columnNames[2].textContent).toBe('platform');
|
||||
});
|
||||
|
||||
it('should render column name & displayName for column if both presents', async () => {
|
||||
render(
|
||||
<EntityTableV1
|
||||
{...mockEntityTableProp}
|
||||
tableColumns={[...columnsWithDisplayName]}
|
||||
/>,
|
||||
{
|
||||
wrapper: MemoryRouter,
|
||||
}
|
||||
);
|
||||
|
||||
const columnDisplayName = await screen.findAllByTestId(
|
||||
'column-display-name'
|
||||
);
|
||||
const columnName = await screen.findByTestId('column-name');
|
||||
|
||||
expect(columnDisplayName[0]).toBeInTheDocument();
|
||||
expect(columnName).toBeInTheDocument();
|
||||
|
||||
expect(columnDisplayName[0].textContent).toBe('Comments');
|
||||
expect(columnName.textContent).toBe('comments');
|
||||
});
|
||||
});
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { Space, Typography } from 'antd';
|
||||
import Icon from '@ant-design/icons';
|
||||
import { Typography } from 'antd';
|
||||
import { ReactComponent as IconTeamsGrey } from 'assets/svg/teams-grey.svg';
|
||||
import { ReactComponent as IconUser } from 'assets/svg/user.svg';
|
||||
import { getTeamAndUserDetailsPath, getUserPath } from 'constants/constants';
|
||||
@ -40,11 +41,21 @@ export const OwnerLabel = ({
|
||||
|
||||
const profilePicture = useMemo(() => {
|
||||
if (isUndefined(owner)) {
|
||||
return <IconUser data-testid="no-owner-icon" height={18} width={18} />;
|
||||
return (
|
||||
<Icon
|
||||
component={IconUser}
|
||||
data-testid="no-owner-icon"
|
||||
style={{ fontSize: '18px' }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return owner.type === OwnerType.TEAM ? (
|
||||
<IconTeamsGrey data-testid="team-owner-icon" height={18} width={18} />
|
||||
<Icon
|
||||
component={IconTeamsGrey}
|
||||
data-testid="team-owner-icon"
|
||||
style={{ fontSize: '18px' }}
|
||||
/>
|
||||
) : (
|
||||
<ProfilePicture
|
||||
displayName={displayName}
|
||||
@ -52,13 +63,13 @@ export const OwnerLabel = ({
|
||||
key="profile-picture"
|
||||
name={owner.name ?? ''}
|
||||
type="circle"
|
||||
width="24"
|
||||
width="18"
|
||||
/>
|
||||
);
|
||||
}, [owner]);
|
||||
|
||||
return (
|
||||
<Space data-testid="owner-label" size={8}>
|
||||
<div className="d-flex gap-2 items-center" data-testid="owner-label">
|
||||
{profilePicture}
|
||||
|
||||
{displayName ? (
|
||||
@ -86,6 +97,6 @@ export const OwnerLabel = ({
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -17,9 +17,7 @@ import SVGIcons from './SvgUtils';
|
||||
|
||||
describe('Test SVGIcons component', () => {
|
||||
it('Component should render', async () => {
|
||||
const { container } = render(
|
||||
<SVGIcons alt="test" icon="icon-edit-black" />
|
||||
);
|
||||
const { container } = render(<SVGIcons alt="test" icon="icon-edit" />);
|
||||
|
||||
const image = await findByTestId(container, 'image');
|
||||
|
||||
|
||||
@ -60,7 +60,6 @@ import IconDocPrimary from '../assets/svg/doc-primary.svg';
|
||||
import IconDocWhite from '../assets/svg/doc-white.svg';
|
||||
import IconDoc from '../assets/svg/doc.svg';
|
||||
import IconDrag from '../assets/svg/drag.svg';
|
||||
import IconEditBlack from '../assets/svg/edit-black.svg';
|
||||
import IconEditOutlinePrimary from '../assets/svg/edit-outline-primery.svg';
|
||||
import IconEditPrimary from '../assets/svg/edit-primary.svg';
|
||||
import IconError from '../assets/svg/error.svg';
|
||||
@ -216,7 +215,6 @@ export const Icons = {
|
||||
GITHUB_ICON: 'github-icon',
|
||||
AUTH0_ICON: 'auth0-icon',
|
||||
EDIT: 'icon-edit',
|
||||
EDIT_BLACK: 'icon-edit-black',
|
||||
EDIT_PRIMARY: 'icon-edit-primary',
|
||||
EDIT_OUTLINE_PRIMARY: 'icon-edit-outline-primary',
|
||||
EXPLORE: 'icon-explore',
|
||||
@ -835,10 +833,6 @@ const SVGIcons: FunctionComponent<Props> = ({ icon, ...props }: Props) => {
|
||||
|
||||
break;
|
||||
|
||||
case Icons.EDIT_BLACK:
|
||||
IconComponent = IconEditBlack;
|
||||
|
||||
break;
|
||||
case Icons.EDIT_PRIMARY:
|
||||
IconComponent = IconEditPrimary;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user