From 02846ea0d0c955fde69ea0bc641184cd29cbd0ec Mon Sep 17 00:00:00 2001 From: shrushti2000 Date: Mon, 11 Nov 2024 16:23:57 +0530 Subject: [PATCH 01/10] column customization for terms table --- .../resources/ui/src/assets/svg/menu-duo.svg | 3 + .../DraggableMenuItem.component.tsx | 78 +++++ .../GlossaryTermTab.component.tsx | 266 +++++++++++++++++- .../src/components/Glossary/glossaryV1.less | 58 ++++ .../ui/src/locale/languages/en-us.json | 1 + .../main/resources/ui/src/rest/glossaryAPI.ts | 6 +- 6 files changed, 408 insertions(+), 4 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/menu-duo.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/menu-duo.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/menu-duo.svg new file mode 100644 index 000000000000..f6641fb96ead --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/menu-duo.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx new file mode 100644 index 000000000000..76dd1660a876 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx @@ -0,0 +1,78 @@ +/* + * Copyright 2024 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 { Checkbox } from 'antd'; +import React from 'react'; +import { useDrag, useDrop } from 'react-dnd'; +import { ReactComponent as ColumnDragIcon } from '../../../assets/svg/menu-duo.svg'; + +interface DraggableMenuItemProps { + option: { value: string; label: string }; + index: number; + moveDropdownMenuItem: (fromIndex: number, toIndex: number) => void; + tempCheckedList: string[]; + handleCheckboxChange: (value: string, checked: boolean) => void; +} +const DraggableMenuItem: React.FC = ({ + option, + index, + moveDropdownMenuItem, + tempCheckedList, + handleCheckboxChange, +}) => { + const [{ isDragging }, drag] = useDrag({ + type: 'CHECKBOX', + item: { index }, + collect: (monitor) => ({ + isDragging: monitor.isDragging(), + }), + }); + + const [, drop] = useDrop({ + accept: 'CHECKBOX', + hover: (draggedItem: any) => { + if (draggedItem.index !== index) { + moveDropdownMenuItem(draggedItem.index, index); + draggedItem.index = index; + } + }, + }); + + return ( +
{ + drag(drop(node)); + }} + style={{ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + width: '100%', + opacity: isDragging ? 0.8 : 1, + }}> + + handleCheckboxChange(option.value, e.target.checked)}> +

+ {option.label} +

+ +
+ ); +}; + +export default DraggableMenuItem; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx index 6897cd75d051..cf23ad134392 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx @@ -11,9 +11,19 @@ * limitations under the License. */ -import { FilterOutlined } from '@ant-design/icons'; +import { DownOutlined, FilterOutlined } from '@ant-design/icons'; import Icon from '@ant-design/icons/lib/components/Icon'; -import { Button, Col, Modal, Row, Space, TableProps, Tooltip } from 'antd'; +import { + Button, + Checkbox, + Col, + Dropdown, + Modal, + Row, + Space, + TableProps, + Tooltip, +} from 'antd'; import { ColumnsType, ExpandableConfig } from 'antd/lib/table/interface'; import { AxiosError } from 'axios'; import classNames from 'classnames'; @@ -38,6 +48,7 @@ import StatusBadge from '../../../components/common/StatusBadge/StatusBadge.comp import { API_RES_MAX_SIZE, DE_ACTIVE_COLOR, + NO_DATA_PLACEHOLDER, TEXT_BODY_COLOR, } from '../../../constants/constants'; import { GLOSSARIES_DOCS } from '../../../constants/docs.constants'; @@ -71,6 +82,8 @@ import { showErrorToast } from '../../../utils/ToastUtils'; import { DraggableBodyRowProps } from '../../common/Draggable/DraggableBodyRowProps.interface'; import Loader from '../../common/Loader/Loader'; import Table from '../../common/Table/Table'; +import TagButton from '../../common/TagButton/TagButton.component'; +import DraggableMenuItem from '../GlossaryColumnsSelectionDropdown/DraggableMenuItem.component'; import { ModifiedGlossary, useGlossaryStore } from '../useGlossary.store'; import { GlossaryTermTabProps, @@ -162,6 +175,35 @@ const GlossaryTermTab = ({ {t('label.no-description')} ), }, + { + title: t('label.reviewer'), + dataIndex: 'reviewers', + key: 'reviewers', + width: '33%', + render: (reviewers: EntityReference[]) => ( + + ), + }, + { + title: t('label.synonym-plural'), + dataIndex: 'synonyms', + key: 'synonyms', + width: '33%', + render: (synonyms: string[]) => { + return ( +
+ {synonyms?.map((synonym: string) => ( + + ))} + {synonyms?.length === 0 &&
{NO_DATA_PLACEHOLDER}
} +
+ ); + }, + }, { title: t('label.owner-plural'), dataIndex: 'owners', @@ -249,6 +291,203 @@ const GlossaryTermTab = ({ return data; }, [glossaryTerms, permissions]); + const listOfVisibleColumns = useMemo(() => { + return ['name', 'description', 'owners', 'status', 'new-term']; + }, [permissions]); + + const defaultCheckedList = useMemo(() => { + return columns + .filter((column) => listOfVisibleColumns.includes(column.key as string)) + .map((column) => column.key) + .filter((key): key is string => key !== undefined); + }, [columns, listOfVisibleColumns]); + + const [checkedList, setCheckedList] = useState(defaultCheckedList); + const [tempCheckedList, setTempCheckedList] = useState([ + ...checkedList, + ]); + + const [isDropdownVisible, setIsDropdownVisible] = useState(false); + + const [options, setOptions] = useState<{ value: string; label: string }[]>( + columns + .map(({ key, title }) => ({ + label: title as string, + value: key as string, + })) + .filter((col) => col.value !== 'name') + ); + + const newColumns = useMemo(() => { + return columns.map((item) => ({ + ...item, + hidden: !checkedList.includes(item.key as string), + })); + }, [columns, checkedList]); + + const rearrangedColumns = useMemo( + () => + newColumns + .filter((column) => !column.hidden) + .sort((a, b) => { + const aIndex = options.findIndex( + (option: { value: string; label: string }) => option.value === a.key + ); + const bIndex = options.findIndex( + (option: { value: string; label: string }) => option.value === b.key + ); + + return aIndex - bIndex; + }), + [newColumns] + ); + + const handleColumnSelectionDropdownSave = useCallback(() => { + setCheckedList(tempCheckedList); + setIsDropdownVisible(false); + }, [tempCheckedList]); + + const handleColumnSelectionDropdownCancel = useCallback(() => { + setTempCheckedList(checkedList); + setIsDropdownVisible(false); + }, [checkedList]); + + const moveDropdownMenuItem = useCallback( + (fromIndex: number, toIndex: number) => { + const updatedList = [...options]; + const [movedItem] = updatedList.splice(fromIndex, 1); + updatedList.splice(toIndex, 0, movedItem); + setOptions(updatedList); + setTempCheckedList((prevCheckedList) => { + const updatedCheckedList = prevCheckedList.map((item) => { + const index = updatedList.findIndex( + (option) => option.value === item + ); + + return updatedList[index]?.value || item; + }); + + return updatedCheckedList; + }); + }, + [options] + ); + + const handleCheckboxChange = useCallback( + (key: string, checked: boolean) => { + if (key === 'all') { + if (checked) { + setTempCheckedList([ + 'all', + ...columns.map(({ key }) => key as string), + ]); + } else { + setTempCheckedList(['name']); + } + } else { + setTempCheckedList((prev) => { + const newCheckedList = checked + ? [...prev, key] + : prev.filter((item) => item !== key); + if ( + options.every((opt: { value: string; label: string }) => + newCheckedList.includes(opt.value) + ) + ) { + return ['all', ...newCheckedList]; + } + + return newCheckedList.filter((item) => item !== 'all'); + }); + } + }, + [columns, options] + ); + + const menu = useMemo( + () => ({ + items: [ + { + key: 'addColumn', + label: ( +
+ {t('label.add-column')} + + col.key === 'name') + .every(({ key }) => + tempCheckedList.includes(key as string) + )} + className="custom-glossary-col-sel-checkbox" + key="all" + style={{ marginLeft: '24px' }} + value="all" + onChange={(e) => + handleCheckboxChange('all', e.target.checked) + }> + {t('label.all')} + + {options.map( + (option: { value: string; label: string }, index: number) => ( +
+ +
+ ) + )} + +
+ ), + }, + { + key: 'divider', + type: 'divider', + }, + { + key: 'actions', + label: ( +
+ + + + +
+ ), + }, + ], + }), + [ + tempCheckedList, + columns, + options, + handleCheckboxChange, + handleColumnSelectionDropdownSave, + handleColumnSelectionDropdownCancel, + ] + ); + const handleAddGlossaryTermClick = () => { onAddGlossaryTerm( !isGlossary ? (activeGlossary as GlossaryTerm) : undefined @@ -468,6 +707,27 @@ const GlossaryTermTab = ({ {isAllExpanded ? t('label.collapse-all') : t('label.expand-all')} + + + + + {glossaryTerms.length > 0 ? ( @@ -477,7 +737,7 @@ const GlossaryTermTab = ({ className={classNames('drop-over-background', { 'drop-over-table': isTableHovered, })} - columns={columns} + columns={rearrangedColumns.filter((col) => !col.hidden)} components={TABLE_CONSTANTS} dataSource={glossaryTerms} expandable={expandableConfig} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less index 71b86837af58..5e87cdb9d8e4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less @@ -90,3 +90,61 @@ display: inline-block; } } + +.custom-glossary-col-sel-checkbox { + font-size: 16px; + margin-left: 12px; + color: #868686; + width: 100%; + + .ant-checkbox-inner { + width: 20px; + height: 20px; + background-color: #fff; + border-color: #757575; + + &::after { + width: 6px; + height: 10px; + border-color: #361a8f; + border-width: 0 2px 2px 0; + } + } + + .ant-checkbox-checked .ant-checkbox-inner { + background-color: #fff; + border-color: #757575; + } + + .ant-checkbox-wrapper:hover .ant-checkbox-inner, + .ant-checkbox:hover .ant-checkbox-inner, + .ant-checkbox-input:focus + .ant-checkbox-inner { + border-color: #757575; + } +} + +.ant-dropdown-menu-item:hover { + background-color: #ffffff !important; + color: inherit !important; +} + +.ant-dropdown-menu { + background-color: #ffffff !important; + border-color: #b7b7b7 !important; +} + +.glossary-col-sel-dropdown-title { + font-family: 'Poppins'; + font-size: 14px; + line-height: 21px; + color: #757575; +} + +.glossary-col-sel-checkbox-group { + display: flex; + flex-direction: column; + padding: 6px; + margin: 0px 8px; + background-color: #ffffff; + border-color: #b7b7b7; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json index 2a8e28322e4a..2f9b996a2787 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json @@ -28,6 +28,7 @@ "add": "Add", "add-a-new-service": "Add a New Service", "add-an-image": "Add an image", + "add-column": "Add Column", "add-custom-entity-property": "Add Custom {{entity}} Property", "add-deploy": "Add & Deploy", "add-entity": "Add {{entity}}", diff --git a/openmetadata-ui/src/main/resources/ui/src/rest/glossaryAPI.ts b/openmetadata-ui/src/main/resources/ui/src/rest/glossaryAPI.ts index 3d1c58db5c70..a4577bace1ed 100644 --- a/openmetadata-ui/src/main/resources/ui/src/rest/glossaryAPI.ts +++ b/openmetadata-ui/src/main/resources/ui/src/rest/glossaryAPI.ts @@ -335,7 +335,11 @@ export const getFirstLevelGlossaryTerms = async (parentFQN: string) => { >(apiUrl, { params: { directChildrenOf: parentFQN, - fields: [TabSpecificField.CHILDREN_COUNT, TabSpecificField.OWNERS], + fields: [ + TabSpecificField.CHILDREN_COUNT, + TabSpecificField.OWNERS, + TabSpecificField.REVIEWERS, + ], limit: 100000, }, }); From 697713962b13337870bea76ab122bbec9b8a5bb8 Mon Sep 17 00:00:00 2001 From: shrushti2000 Date: Mon, 11 Nov 2024 20:17:06 +0530 Subject: [PATCH 02/10] status selection dropdown functionality --- .../DraggableMenuItem.component.tsx | 10 +- .../GlossaryTermTab.component.tsx | 171 ++++++++++++++++-- 2 files changed, 166 insertions(+), 15 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx index 76dd1660a876..ddeb0811623d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx @@ -20,7 +20,11 @@ interface DraggableMenuItemProps { index: number; moveDropdownMenuItem: (fromIndex: number, toIndex: number) => void; tempCheckedList: string[]; - handleCheckboxChange: (value: string, checked: boolean) => void; + handleCheckboxChange: ( + key: string, + checked: boolean, + type: 'columns' | 'status' + ) => void; } const DraggableMenuItem: React.FC = ({ option, @@ -66,7 +70,9 @@ const DraggableMenuItem: React.FC = ({ className="custom-glossary-col-sel-checkbox" key={option.value} value={option.value} - onChange={(e) => handleCheckboxChange(option.value, e.target.checked)}> + onChange={(e) => + handleCheckboxChange(option.value, e.target.checked, 'columns') + }>

{option.label}

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx index cf23ad134392..75489593a8dc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx @@ -24,7 +24,11 @@ import { TableProps, Tooltip, } from 'antd'; -import { ColumnsType, ExpandableConfig } from 'antd/lib/table/interface'; +import { + ColumnsType, + ColumnType, + ExpandableConfig, +} from 'antd/lib/table/interface'; import { AxiosError } from 'axios'; import classNames from 'classnames'; import { compare } from 'fast-json-patch'; @@ -113,7 +117,21 @@ const GlossaryTermTab = ({ const [isTableLoading, setIsTableLoading] = useState(false); const [isTableHovered, setIsTableHovered] = useState(false); const [expandedRowKeys, setExpandedRowKeys] = useState([]); - + const [isStatusDropdownVisible, setIsStatusDropdownVisible] = + useState(false); + const [tempStatusCheckedList, setTempStatusCheckedList] = useState([ + 'Draft', + ]); + const [selectedStatus, setSelectedStatus] = useState(['Approved']); + + const statusOptions = useMemo( + () => [ + { value: 'Approved', label: 'Approved' }, + { value: 'Draft', label: 'Draft' }, + { value: 'Rejected', label: 'Rejected' }, + ], + [] + ); const glossaryTermStatus: Status | null = useMemo(() => { if (!isGlossary) { return (activeGlossary as GlossaryTerm).status ?? Status.Approved; @@ -374,25 +392,51 @@ const GlossaryTermTab = ({ ); const handleCheckboxChange = useCallback( - (key: string, checked: boolean) => { + (key: string, checked: boolean, type: 'columns' | 'status') => { + const setCheckedList = + type === 'columns' ? setTempCheckedList : setTempStatusCheckedList; + const optionsToUse = type === 'columns' ? columns : statusOptions; + if (key === 'all') { if (checked) { - setTempCheckedList([ + setCheckedList([ 'all', - ...columns.map(({ key }) => key as string), + ...optionsToUse.map((option) => { + if (type === 'columns') { + const keyValue = String( + (option as ColumnType).key + ); + + return keyValue; + } else { + const value = (option as { value: string }).value ?? ''; + + return value; + } + }), ]); } else { - setTempCheckedList(['name']); + setCheckedList([type === 'columns' ? 'name' : 'Draft']); } } else { - setTempCheckedList((prev) => { + setCheckedList((prev: string[]) => { const newCheckedList = checked ? [...prev, key] : prev.filter((item) => item !== key); if ( - options.every((opt: { value: string; label: string }) => - newCheckedList.includes(opt.value) - ) + optionsToUse.every((opt) => { + if (type === 'columns') { + const keyValue = String( + (opt as ColumnType).key + ); + + return newCheckedList.includes(keyValue); + } else { + const value = (opt as { value: string }).value ?? ''; + + return newCheckedList.includes(value); + } + }) ) { return ['all', ...newCheckedList]; } @@ -401,7 +445,7 @@ const GlossaryTermTab = ({ }); } }, - [columns, options] + [columns, statusOptions, setTempCheckedList, setTempStatusCheckedList] ); const menu = useMemo( @@ -426,7 +470,7 @@ const GlossaryTermTab = ({ style={{ marginLeft: '24px' }} value="all" onChange={(e) => - handleCheckboxChange('all', e.target.checked) + handleCheckboxChange('all', e.target.checked, 'columns') }> {t('label.all')} @@ -487,6 +531,87 @@ const GlossaryTermTab = ({ handleColumnSelectionDropdownCancel, ] ); + const handleStatusSelectionDropdownSave = () => { + setSelectedStatus(tempStatusCheckedList); + setIsStatusDropdownVisible(false); + }; + + const handleStatusSelectionDropdownCancel = () => { + setTempStatusCheckedList(selectedStatus); + setIsStatusDropdownVisible(false); + }; + const statusDropdownMenu = useMemo( + () => ({ + items: [ + { + key: 'statusSelection', + label: ( +
+ + + handleCheckboxChange('all', e.target.checked, 'status') + }> + {t('label.all')} + + {statusOptions.map((option) => ( +
+ + handleCheckboxChange( + option.value, + e.target.checked, + 'status' + ) + }> + {option.label} + +
+ ))} + +
+ ), + }, + { + key: 'divider', + type: 'divider', + }, + { + key: 'actions', + label: ( +
+ + + + +
+ ), + }, + ], + }), + [ + tempStatusCheckedList, + statusOptions, + handleStatusSelectionDropdownSave, + handleStatusSelectionDropdownCancel, + ] + ); const handleAddGlossaryTermClick = () => { onAddGlossaryTerm( @@ -707,6 +832,24 @@ const GlossaryTermTab = ({ {isAllExpanded ? t('label.collapse-all') : t('label.expand-all')} + + + !col.hidden)} components={TABLE_CONSTANTS} - dataSource={glossaryTerms} + dataSource={glossaryTerms.filter((term) => + selectedStatus.includes(term.status as string) + )} expandable={expandableConfig} loading={isTableLoading} pagination={false} From f0e3f3a5369e4a5ef0aa9d6ff31289be37e4aef6 Mon Sep 17 00:00:00 2001 From: shrushti2000 Date: Mon, 11 Nov 2024 20:20:41 +0530 Subject: [PATCH 03/10] localization changes for add column label --- .../src/main/resources/ui/src/locale/languages/de-de.json | 1 + .../src/main/resources/ui/src/locale/languages/es-es.json | 1 + .../src/main/resources/ui/src/locale/languages/fr-fr.json | 1 + .../src/main/resources/ui/src/locale/languages/gl-es.json | 1 + .../src/main/resources/ui/src/locale/languages/he-he.json | 1 + .../src/main/resources/ui/src/locale/languages/ja-jp.json | 1 + .../src/main/resources/ui/src/locale/languages/nl-nl.json | 1 + .../src/main/resources/ui/src/locale/languages/pr-pr.json | 1 + .../src/main/resources/ui/src/locale/languages/pt-br.json | 1 + .../src/main/resources/ui/src/locale/languages/ru-ru.json | 1 + .../src/main/resources/ui/src/locale/languages/zh-cn.json | 1 + 11 files changed, 11 insertions(+) diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json index 2bb8c55349a0..a2a7327959f1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json @@ -28,6 +28,7 @@ "add": "Hinzufügen", "add-a-new-service": "Neuen Service hinzufügen", "add-an-image": "Add an image", + "add-column": "Add Column", "add-custom-entity-property": "Benutzerdefinierte Eigenschaft zu {{entity}} hinzufügen", "add-deploy": "Hinzufügen und Bereitstellen", "add-entity": "{{entity}} hinzufügen", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json index abac038c0c19..9568168a3611 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json @@ -28,6 +28,7 @@ "add": "Añadir", "add-a-new-service": "Añadir un nuevo servicio", "add-an-image": "Añadir una imagen", + "add-column": "Add Column", "add-custom-entity-property": "Añadir propiedad personalizada de {{entity}}", "add-deploy": "Añadir y desplegar", "add-entity": "Añadir {{entity}}", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json index c3343626ffcf..a930d6080ac3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json @@ -28,6 +28,7 @@ "add": "Ajouter", "add-a-new-service": "Ajouter un Nouveau Service", "add-an-image": "Ajouter une Image", + "add-column": "Add Column", "add-custom-entity-property": "Ajouter une Propriété Personnalisée à {{entity}}", "add-deploy": "Ajouter et Déployer", "add-entity": "Ajouter {{entity}}", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/gl-es.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/gl-es.json index 7dec283fc9a8..ea92c08888a2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/gl-es.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/gl-es.json @@ -28,6 +28,7 @@ "add": "Engadir", "add-a-new-service": "Engadir un novo servizo", "add-an-image": "Engadir unha imaxe", + "add-column": "Add Column", "add-custom-entity-property": "Engadir unha propiedade personalizada de {{entity}}", "add-deploy": "Engadir e despregar", "add-entity": "Engadir {{entity}}", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json index 9e13e95d4305..a4f5965a9714 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json @@ -28,6 +28,7 @@ "add": "הוסף", "add-a-new-service": "הוסף שירות חדש", "add-an-image": "הוסף תמונה", + "add-column": "Add Column", "add-custom-entity-property": "הוסף נכס מותאם אישית ל {{entity}}", "add-deploy": "הוסף והפעל", "add-entity": "הוסף {{entity}}", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json index 9e8bb6e68cd9..785eed7fb624 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json @@ -28,6 +28,7 @@ "add": "追加", "add-a-new-service": "新しいサービスを追加", "add-an-image": "Add an image", + "add-column": "Add Column", "add-custom-entity-property": "Add Custom {{entity}} Property", "add-deploy": "追加＆デプロイ", "add-entity": "{{entity}}を追加", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json index 08cb3270a731..93bef0d7ce63 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json @@ -28,6 +28,7 @@ "add": "Toevoegen", "add-a-new-service": "Nieuwe service toevoegen", "add-an-image": "Afbeelding toevoegen", + "add-column": "Add Column", "add-custom-entity-property": "Aangepaste {{entity}} eigenschap toevoegen", "add-deploy": "Toevoegen en deployen", "add-entity": "{{entity}} toevoegen", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pr-pr.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pr-pr.json index 6bc0af4a0f93..3bd18b08cd4b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pr-pr.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pr-pr.json @@ -28,6 +28,7 @@ "add": "اضافه کردن", "add-a-new-service": "اضافه کردن یک سرویس جدید", "add-an-image": "اضافه کردن تصویر", + "add-column": "Add Column", "add-custom-entity-property": "اضافه کردن خصوصیت سفارشی {{entity}}", "add-deploy": "اضافه کردن و استقرار", "add-entity": "اضافه کردن {{entity}}", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json index 3a5b8f021cd2..b64df62a5cef 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json @@ -28,6 +28,7 @@ "add": "Adicionar", "add-a-new-service": "Adicionar um Novo Serviço", "add-an-image": "Adicionar uma imagem", + "add-column": "Add Column", "add-custom-entity-property": "Adicionar Propriedade Personalizada {{entity}}", "add-deploy": "Adicionar & Implementar", "add-entity": "Adicionar {{entity}}", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json index 6e9903029a43..6a4933a83097 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json @@ -28,6 +28,7 @@ "add": "Добавить", "add-a-new-service": "Добавить новый сервис", "add-an-image": "Add an image", + "add-column": "Add Column", "add-custom-entity-property": "Добавить пользовательское свойство {{entity}}", "add-deploy": "Добавить & Развернуть", "add-entity": "Добавить {{entity}}", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json index 37ce333700db..db235a9e3df4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json @@ -28,6 +28,7 @@ "add": "添加", "add-a-new-service": "添加新服务", "add-an-image": "添加图片", + "add-column": "Add Column", "add-custom-entity-property": "添加自定义{{entity}}属性", "add-deploy": "添加部署", "add-entity": "添加{{entity}}", From 9a4a5ff82f96a224974900434d5fee7eb15806e0 Mon Sep 17 00:00:00 2001 From: shrushti2000 Date: Tue, 12 Nov 2024 12:38:25 +0530 Subject: [PATCH 04/10] address pr comments and bug fixes --- .../DraggableMenuItem.component.tsx | 45 ++-- .../GlossaryTermTab.component.tsx | 192 ++++++++---------- .../src/components/Glossary/glossaryV1.less | 13 ++ 3 files changed, 124 insertions(+), 126 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx index ddeb0811623d..62338e9ca8a1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx @@ -11,28 +11,35 @@ * limitations under the License. */ import { Checkbox } from 'antd'; -import React from 'react'; +import React, { useCallback } from 'react'; import { useDrag, useDrop } from 'react-dnd'; import { ReactComponent as ColumnDragIcon } from '../../../assets/svg/menu-duo.svg'; interface DraggableMenuItemProps { option: { value: string; label: string }; index: number; - moveDropdownMenuItem: (fromIndex: number, toIndex: number) => void; - tempCheckedList: string[]; - handleCheckboxChange: ( - key: string, - checked: boolean, - type: 'columns' | 'status' - ) => void; + options: { value: string; label: string }[]; + onMoveItem: (updatedList: { value: string; label: string }[]) => void; + selectedOptions: string[]; + onSelect: (key: string, checked: boolean, type: 'columns' | 'status') => void; } const DraggableMenuItem: React.FC = ({ option, index, - moveDropdownMenuItem, - tempCheckedList, - handleCheckboxChange, + options, + onMoveItem, + selectedOptions, + onSelect, }) => { + const moveDropdownMenuItem = useCallback( + (fromIndex: number, toIndex: number) => { + const updatedList = [...options]; + const [movedItem] = updatedList.splice(fromIndex, 1); + updatedList.splice(toIndex, 0, movedItem); + onMoveItem(updatedList); + }, + [options, onMoveItem] + ); const [{ isDragging }, drag] = useDrag({ type: 'CHECKBOX', item: { index }, @@ -53,29 +60,21 @@ const DraggableMenuItem: React.FC = ({ return (
{ drag(drop(node)); }} style={{ - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - width: '100%', opacity: isDragging ? 0.8 : 1, }}> - handleCheckboxChange(option.value, e.target.checked, 'columns') - }> -

- {option.label} -

+ onChange={(e) => onSelect(option.value, e.target.checked, 'columns')}> +

{option.label}
); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx index 75489593a8dc..96c69ac0dd26 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx @@ -11,7 +11,7 @@ * limitations under the License. */ -import { DownOutlined, FilterOutlined } from '@ant-design/icons'; +import { DownOutlined } from '@ant-design/icons'; import Icon from '@ant-design/icons/lib/components/Icon'; import { Button, @@ -64,7 +64,6 @@ import { GlossaryTerm, Status, } from '../../../generated/entity/data/glossaryTerm'; -import { useApplicationStore } from '../../../hooks/useApplicationStore'; import { getFirstLevelGlossaryTerms, getGlossaryTerms, @@ -79,7 +78,6 @@ import { findExpandableKeysForArray, findGlossaryTermByFqn, StatusClass, - StatusFilters, } from '../../../utils/GlossaryUtils'; import { getGlossaryPath } from '../../../utils/RouterUtils'; import { showErrorToast } from '../../../utils/ToastUtils'; @@ -106,7 +104,6 @@ const GlossaryTermTab = ({ }: GlossaryTermTabProps) => { const { activeGlossary, glossaryChildTerms, setGlossaryChildTerms } = useGlossaryStore(); - const { theme } = useApplicationStore(); const { t } = useTranslation(); const glossaryTerms = (glossaryChildTerms as ModifiedGlossaryTerm[]) ?? []; @@ -119,11 +116,6 @@ const GlossaryTermTab = ({ const [expandedRowKeys, setExpandedRowKeys] = useState([]); const [isStatusDropdownVisible, setIsStatusDropdownVisible] = useState(false); - const [tempStatusCheckedList, setTempStatusCheckedList] = useState([ - 'Draft', - ]); - const [selectedStatus, setSelectedStatus] = useState(['Approved']); - const statusOptions = useMemo( () => [ { value: 'Approved', label: 'Approved' }, @@ -132,6 +124,13 @@ const GlossaryTermTab = ({ ], [] ); + const [statusDropdownSelection, setStatusDropdownSelections] = useState< + string[] + >(['Approved', 'Draft']); + const [selectedStatus, setSelectedStatus] = useState([ + ...statusDropdownSelection, + ]); + const glossaryTermStatus: Status | null = useMemo(() => { if (!isGlossary) { return (activeGlossary as GlossaryTerm).status ?? Status.Approved; @@ -208,16 +207,17 @@ const GlossaryTermTab = ({ key: 'synonyms', width: '33%', render: (synonyms: string[]) => { - return ( + return isEmpty(synonyms) ? ( +
{NO_DATA_PLACEHOLDER}
+ ) : (
- {synonyms?.map((synonym: string) => ( + {synonyms.map((synonym: string) => ( ))} - {synonyms?.length === 0 &&
{NO_DATA_PLACEHOLDER}
}
); }, @@ -234,14 +234,6 @@ const GlossaryTermTab = ({ dataIndex: 'status', key: 'status', width: '12%', - filterIcon: (filtered) => ( - - ), - filters: StatusFilters, render: (_, record) => { const status = record.status ?? Status.Approved; @@ -311,37 +303,44 @@ const GlossaryTermTab = ({ const listOfVisibleColumns = useMemo(() => { return ['name', 'description', 'owners', 'status', 'new-term']; - }, [permissions]); - - const defaultCheckedList = useMemo(() => { - return columns - .filter((column) => listOfVisibleColumns.includes(column.key as string)) - .map((column) => column.key) - .filter((key): key is string => key !== undefined); - }, [columns, listOfVisibleColumns]); - - const [checkedList, setCheckedList] = useState(defaultCheckedList); - const [tempCheckedList, setTempCheckedList] = useState([ - ...checkedList, + }, []); + + const defaultCheckedList = useMemo( + () => + columns.reduce( + (acc, column) => + listOfVisibleColumns.includes(column.key as string) + ? [...acc, column.key as string] + : acc, + [] + ), + [columns, listOfVisibleColumns] + ); + + const [selectedColumns, setSelectedColumns] = + useState(defaultCheckedList); + const [columnDropdownSelections, setTempCheckedList] = useState([ + ...selectedColumns, ]); const [isDropdownVisible, setIsDropdownVisible] = useState(false); const [options, setOptions] = useState<{ value: string; label: string }[]>( - columns - .map(({ key, title }) => ({ - label: title as string, - value: key as string, - })) - .filter((col) => col.value !== 'name') + columns.reduce<{ value: string; label: string }[]>( + (acc, { key, title }) => + key !== 'name' + ? [...acc, { label: title as string, value: key as string }] + : acc, + [] + ) ); const newColumns = useMemo(() => { return columns.map((item) => ({ ...item, - hidden: !checkedList.includes(item.key as string), + hidden: !selectedColumns.includes(item.key as string), })); - }, [columns, checkedList]); + }, [columns, selectedColumns]); const rearrangedColumns = useMemo( () => @@ -361,60 +360,48 @@ const GlossaryTermTab = ({ ); const handleColumnSelectionDropdownSave = useCallback(() => { - setCheckedList(tempCheckedList); + setSelectedColumns(columnDropdownSelections); setIsDropdownVisible(false); - }, [tempCheckedList]); + }, [columnDropdownSelections]); const handleColumnSelectionDropdownCancel = useCallback(() => { - setTempCheckedList(checkedList); + setTempCheckedList(selectedColumns); setIsDropdownVisible(false); - }, [checkedList]); - - const moveDropdownMenuItem = useCallback( - (fromIndex: number, toIndex: number) => { - const updatedList = [...options]; - const [movedItem] = updatedList.splice(fromIndex, 1); - updatedList.splice(toIndex, 0, movedItem); - setOptions(updatedList); - setTempCheckedList((prevCheckedList) => { - const updatedCheckedList = prevCheckedList.map((item) => { - const index = updatedList.findIndex( - (option) => option.value === item - ); + }, [selectedColumns]); - return updatedList[index]?.value || item; - }); + const handleMoveItem = (updatedList: { value: string; label: string }[]) => { + setOptions(updatedList); + setTempCheckedList((prevCheckedList) => { + const updatedCheckedList = prevCheckedList.map((item) => { + const index = updatedList.findIndex((option) => option.value === item); - return updatedCheckedList; + return updatedList[index]?.value || item; }); - }, - [options] - ); + return updatedCheckedList; + }); + }; const handleCheckboxChange = useCallback( (key: string, checked: boolean, type: 'columns' | 'status') => { const setCheckedList = - type === 'columns' ? setTempCheckedList : setTempStatusCheckedList; - const optionsToUse = type === 'columns' ? columns : statusOptions; + type === 'columns' ? setTempCheckedList : setStatusDropdownSelections; + + const optionsToUse = + type === 'columns' + ? (columns as ColumnType[]) + : (statusOptions as { value: string }[]); if (key === 'all') { if (checked) { - setCheckedList([ + const newCheckedList = [ 'all', ...optionsToUse.map((option) => { - if (type === 'columns') { - const keyValue = String( - (option as ColumnType).key - ); - - return keyValue; - } else { - const value = (option as { value: string }).value ?? ''; - - return value; - } + return type === 'columns' + ? String((option as ColumnType).key) + : (option as { value: string }).value ?? ''; }), - ]); + ]; + setCheckedList(newCheckedList); } else { setCheckedList([type === 'columns' ? 'name' : 'Draft']); } @@ -423,21 +410,17 @@ const GlossaryTermTab = ({ const newCheckedList = checked ? [...prev, key] : prev.filter((item) => item !== key); - if ( - optionsToUse.every((opt) => { - if (type === 'columns') { - const keyValue = String( - (opt as ColumnType).key - ); - return newCheckedList.includes(keyValue); - } else { - const value = (opt as { value: string }).value ?? ''; + const allChecked = + type === 'columns' + ? (optionsToUse as ColumnType[]).every( + (opt) => newCheckedList.includes(String(opt.key)) + ) + : (optionsToUse as { value: string }[]).every((opt) => + newCheckedList.includes(opt.value ?? '') + ); - return newCheckedList.includes(value); - } - }) - ) { + if (allChecked) { return ['all', ...newCheckedList]; } @@ -445,7 +428,7 @@ const GlossaryTermTab = ({ }); } }, - [columns, statusOptions, setTempCheckedList, setTempStatusCheckedList] + [columns, statusOptions, setTempCheckedList, setStatusDropdownSelections] ); const menu = useMemo( @@ -458,12 +441,12 @@ const GlossaryTermTab = ({ {t('label.add-column')} + value={columnDropdownSelections}> col.key === 'name') .every(({ key }) => - tempCheckedList.includes(key as string) + columnDropdownSelections.includes(key as string) )} className="custom-glossary-col-sel-checkbox" key="all" @@ -484,11 +467,12 @@ const GlossaryTermTab = ({ alignItems: 'center', }}> ) @@ -523,7 +507,7 @@ const GlossaryTermTab = ({ ], }), [ - tempCheckedList, + columnDropdownSelections, columns, options, handleCheckboxChange, @@ -532,12 +516,12 @@ const GlossaryTermTab = ({ ] ); const handleStatusSelectionDropdownSave = () => { - setSelectedStatus(tempStatusCheckedList); + setSelectedStatus(statusDropdownSelection); setIsStatusDropdownVisible(false); }; const handleStatusSelectionDropdownCancel = () => { - setTempStatusCheckedList(selectedStatus); + setStatusDropdownSelections(selectedStatus); setIsStatusDropdownVisible(false); }; const statusDropdownMenu = useMemo( @@ -549,7 +533,7 @@ const GlossaryTermTab = ({
+ value={statusDropdownSelection}> handleCheckboxChange('all', e.target.checked, 'status') }> - {t('label.all')} +

{t('label.all')}

 {statusOptions.map((option) => (
@@ -572,7 +556,7 @@ const GlossaryTermTab = ({ 'status' ) }> - {option.label} +

{option.label}

))} @@ -606,7 +590,7 @@ const GlossaryTermTab = ({ ], }), [ - tempStatusCheckedList, + statusDropdownSelection, statusOptions, handleStatusSelectionDropdownSave, handleStatusSelectionDropdownCancel, @@ -833,6 +817,7 @@ const GlossaryTermTab = ({ trigger.parentNode as HTMLElement} menu={statusDropdownMenu} open={isStatusDropdownVisible} trigger={['click']} @@ -853,6 +838,7 @@ const GlossaryTermTab = ({ trigger.parentNode as HTMLElement} menu={menu} open={isDropdownVisible} trigger={['click']} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less index 5e87cdb9d8e4..9d41c368f07e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less @@ -148,3 +148,16 @@ background-color: #ffffff; border-color: #b7b7b7; } + +.draggable-menu-item { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.glossary-dropdown-label { + font-size: 14px; + line-height: 21px; + color: #757575; +} From b0baf6f2a20c809287c05f8261673487d7e9983d Mon Sep 17 00:00:00 2001 From: shrushti2000 Date: Tue, 12 Nov 2024 13:32:33 +0530 Subject: [PATCH 05/10] refactor setter function name --- .../GlossaryTermTab.component.tsx | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx index 96c69ac0dd26..671e9af317f3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx @@ -319,9 +319,9 @@ const GlossaryTermTab = ({ const [selectedColumns, setSelectedColumns] = useState(defaultCheckedList); - const [columnDropdownSelections, setTempCheckedList] = useState([ - ...selectedColumns, - ]); + const [columnDropdownSelections, setColumnDropdownSelections] = useState< + string[] + >([...selectedColumns]); const [isDropdownVisible, setIsDropdownVisible] = useState(false); @@ -365,13 +365,13 @@ const GlossaryTermTab = ({ }, [columnDropdownSelections]); const handleColumnSelectionDropdownCancel = useCallback(() => { - setTempCheckedList(selectedColumns); + setColumnDropdownSelections(selectedColumns); setIsDropdownVisible(false); }, [selectedColumns]); const handleMoveItem = (updatedList: { value: string; label: string }[]) => { setOptions(updatedList); - setTempCheckedList((prevCheckedList) => { + setColumnDropdownSelections((prevCheckedList) => { const updatedCheckedList = prevCheckedList.map((item) => { const index = updatedList.findIndex((option) => option.value === item); @@ -384,7 +384,9 @@ const GlossaryTermTab = ({ const handleCheckboxChange = useCallback( (key: string, checked: boolean, type: 'columns' | 'status') => { const setCheckedList = - type === 'columns' ? setTempCheckedList : setStatusDropdownSelections; + type === 'columns' + ? setColumnDropdownSelections + : setStatusDropdownSelections; const optionsToUse = type === 'columns' @@ -428,7 +430,12 @@ const GlossaryTermTab = ({ }); } }, - [columns, statusOptions, setTempCheckedList, setStatusDropdownSelections] + [ + columns, + statusOptions, + setColumnDropdownSelections, + setStatusDropdownSelections, + ] ); const menu = useMemo( From def27baa47001986f66e87fc6397122826a7eaf5 Mon Sep 17 00:00:00 2001 From: shrushti2000 Date: Tue, 12 Nov 2024 16:50:18 +0530 Subject: [PATCH 06/10] update stylings and integrate status enum --- .../DraggableMenuItem.component.tsx | 2 +- .../GlossaryTermTab.component.tsx | 60 ++++++++----------- .../src/components/Glossary/glossaryV1.less | 47 ++++++++------- 3 files changed, 53 insertions(+), 56 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx index 62338e9ca8a1..3269c4a027de 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx @@ -70,7 +70,7 @@ const DraggableMenuItem: React.FC = ({ onSelect(option.value, e.target.checked, 'columns')}> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx index 671e9af317f3..1d920433a44e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx @@ -117,11 +117,8 @@ const GlossaryTermTab = ({ const [isStatusDropdownVisible, setIsStatusDropdownVisible] = useState(false); const statusOptions = useMemo( - () => [ - { value: 'Approved', label: 'Approved' }, - { value: 'Draft', label: 'Draft' }, - { value: 'Rejected', label: 'Rejected' }, - ], + () => + Object.values(Status).map((status) => ({ value: status, label: status })), [] ); const [statusDropdownSelection, setStatusDropdownSelections] = useState< @@ -455,9 +452,8 @@ const GlossaryTermTab = ({ .every(({ key }) => columnDropdownSelections.includes(key as string) )} - className="custom-glossary-col-sel-checkbox" + className="custom-glossary-col-sel-checkbox m-l-lg" key="all" - style={{ marginLeft: '24px' }} value="all" onChange={(e) => handleCheckboxChange('all', e.target.checked, 'columns') @@ -467,12 +463,8 @@ const GlossaryTermTab = ({ {options.map( (option: { value: string; label: string }, index: number) => (
+ className="d-flex justify-start items-center" + key={option.value}> +
trigger.parentNode as HTMLElement} + className="custom-glossary-dropdown-menu" + getPopupContainer={(trigger) => { + const customContainer = trigger.closest( + '.custom-glossary-dropdown-menu' + ); + + return customContainer as HTMLElement; + }} menu={statusDropdownMenu} open={isStatusDropdownVisible} trigger={['click']} onOpenChange={setIsStatusDropdownVisible}> - { const customContainer = trigger.closest( - '.custom-glossary-dropdown-menu' + '.custom-glossary-dropdown-menu.status-dropdown' ); return customContainer as HTMLElement; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less index 70cb10d3462f..be5a596a22d5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/glossaryV1.less @@ -128,6 +128,10 @@ border-color: @grey-4; } + .ant-dropdown-menu-item { + padding-left: 0px; + padding-right: 0px; + } .ant-dropdown-menu-item:hover { background-color: @white; color: inherit; @@ -142,20 +146,32 @@ .glossary-col-sel-checkbox-group { display: flex; flex-direction: column; - padding: 6px; - margin: 0px 8px; + width: 100%; background-color: @white; border-color: @grey-3; } - +.status-dropdown { + .ant-dropdown-menu-item { + padding-left: 8px; + padding-right: 8px; + } +} .draggable-menu-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; - &.dragging { - opacity: 0.8; - } + transition: background-color 0.3s ease, opacity 0.3s ease; + width: 100%; + box-sizing: border-box; + padding: 0px 8px; + box-sizing: border-box; +} + +.draggable-menu-item.dragging { + background-color: #f0f0f0; + opacity: 0.8; + z-index: 9999; } .glossary-dropdown-label { @@ -169,3 +185,7 @@ outline: 1px solid @grey-2; color: @black; } + +.glossary-col-dropdown-drag-icon { + margin-left: 8px; +} From 418146b8abc46c0d6f1096d70226c8ff743a9f02 Mon Sep 17 00:00:00 2001 From: shrushti2000 Date: Wed, 13 Nov 2024 20:43:28 +0530 Subject: [PATCH 10/10] minor css fix --- .../DraggableMenuItem.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx index 037c642912d1..76c77f1f3b4c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryColumnsSelectionDropdown/DraggableMenuItem.component.tsx @@ -65,7 +65,7 @@ const DraggableMenuItem: React.FC = ({ drag(drop(node)); }}>