diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx index 6bc25349f8d..c8b79fce0e2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx @@ -10,20 +10,20 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { CheckOutlined, CloseOutlined } from '@ant-design/icons'; -import { Button, Col, Input, Row, Space, Tooltip, Typography } from 'antd'; +import { Button, Col, Row, Space, Tooltip, Typography } from 'antd'; import DescriptionV1 from 'components/common/description/DescriptionV1'; import ProfilePicture from 'components/common/ProfilePicture/ProfilePicture'; import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component'; import { TitleBreadcrumbProps } from 'components/common/title-breadcrumb/title-breadcrumb.interface'; import { UserTeamSelectableList } from 'components/common/UserTeamSelectableList/UserTeamSelectableList.component'; +import EntityDisplayNameModal from 'components/Modals/EntityDisplayNameModal/EntityDisplayNameModal.component'; +import EntityNameModal from 'components/Modals/EntityNameModal/EntityNameModal.component'; import { OperationPermission } from 'components/PermissionProvider/PermissionProvider.interface'; import { FQN_SEPARATOR_CHAR } from 'constants/char.constants'; import { getUserPath } from 'constants/constants'; import { NO_PERMISSION_FOR_ACTION } from 'constants/HelperTextUtil'; import { Glossary } from 'generated/entity/data/glossary'; import { GlossaryTerm } from 'generated/entity/data/glossaryTerm'; -import { useAfterMount } from 'hooks/useAfterMount'; import { cloneDeep } from 'lodash'; import React, { useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -51,40 +51,38 @@ const GlossaryHeader = ({ }: GlossaryHeaderProps) => { const { t } = useTranslation(); - const [displayName, setDisplayName] = useState(); const [isNameEditing, setIsNameEditing] = useState(false); + const [isDisplayNameEditing, setIsDisplayNameEditing] = + useState(false); const [isDescriptionEditable, setIsDescriptionEditable] = useState(false); const [breadcrumb, setBreadcrumb] = useState< TitleBreadcrumbProps['titleLinks'] >([]); - const [addTermButtonWidth, setAddTermButtonWidth] = useState( - document.getElementById('add-term-button')?.offsetWidth || 0 - ); - const [manageButtonWidth, setManageButtonWidth] = useState( - document.getElementById('manage-button')?.offsetWidth || 0 - ); - const [leftPanelWidth, setLeftPanelWidth] = useState( - document.getElementById('glossary-left-panel')?.offsetWidth || 0 - ); const editDisplayNamePermission = useMemo(() => { return permissions.EditAll || permissions.EditDisplayName; }, [permissions]); - const onDisplayNameChange = (value: string) => { - if (selectedData.displayName !== value) { - setDisplayName(value); - } - }; - - const onDisplayNameSave = () => { + const onDisplayNameSave = (displayName: string) => { let updatedDetails = cloneDeep(selectedData); updatedDetails = { ...selectedData, displayName: displayName?.trim(), - name: displayName?.trim() || selectedData.name, + }; + + onUpdate(updatedDetails); + + setIsDisplayNameEditing(false); + }; + + const onNameSave = (name: string) => { + let updatedDetails = cloneDeep(selectedData); + + updatedDetails = { + ...selectedData, + name: name?.trim() || selectedData.name, }; onUpdate(updatedDetails); @@ -137,70 +135,28 @@ const GlossaryHeader = ({ } }; - useAfterMount(() => { - setLeftPanelWidth( - document.getElementById('glossary-left-panel')?.offsetWidth || 0 - ); - setAddTermButtonWidth( - document.getElementById('add-term-button')?.offsetWidth || 0 - ); - setManageButtonWidth( - document.getElementById('manage-button')?.offsetWidth || 0 - ); - }); - useEffect(() => { - const { displayName, fullyQualifiedName, name } = selectedData; - setDisplayName(displayName); + const { fullyQualifiedName, name } = selectedData; + if (!isGlossary) { handleBreadcrumb(fullyQualifiedName ? fullyQualifiedName : name); } }, [selectedData]); return ( - - - - - {!isGlossary && ( -
- -
- )} + <> + + + + + {!isGlossary && ( +
+ +
+ )} - {isNameEditing ? ( - - onDisplayNameChange(e.target.value)} - /> - , + , + ]} + okText={t('label.save')} + title={ + + {t('label.edit-glossary-display-name')} + + } + visible={visible}> +
+ + {t('message.edit-glossary-display-name-help')} + + } + initialValue={displayName} + label={`${t('label.display-name')}:`} + name="displayName" + rules={[ + { + required: true, + message: `${t('label.field-required', { + field: t('label.name'), + })}`, + }, + ]}> + + +
+ + ); +}; + +export default EntityDisplayNameModal; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityNameModal/EntityNameModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityNameModal/EntityNameModal.component.tsx new file mode 100644 index 00000000000..b34580baab7 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityNameModal/EntityNameModal.component.tsx @@ -0,0 +1,97 @@ +/* + * 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 { Button, Form, Input, Modal, Typography } from 'antd'; +import React, { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; + +interface Props { + visible: boolean; + name: string; + onCancel: () => void; + onSave: (name: string) => void; +} + +const EntityNameModal: React.FC = ({ + visible, + name, + onCancel, + onSave, +}) => { + const { t } = useTranslation(); + const [form] = Form.useForm<{ name: string }>(); + + const handleSave = async (obj: { name: string }) => { + try { + await form.validateFields(); + onSave(obj.name); + } catch (error) { + console.log(error); + } + }; + + useEffect(() => { + form.setFieldValue('name', name); + }, [visible]); + + return ( + + {t('label.cancel')} + , + , + ]} + okText={t('label.save')} + open={visible} + title={ + + {t('label.edit-glossary-name')} + + }> +
+ + {t('message.edit-glossary-name-help')} + + } + initialValue={name} + label={`${t('label.name')}:`} + name="name" + rules={[ + { + required: true, + message: `${t('label.field-required', { + field: t('label.name'), + })}`, + }, + ]}> + + +
+ + ); +}; + +export default EntityNameModal; 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 fd146136823..4ff66ed45d0 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 @@ -245,6 +245,8 @@ "edit-description-for": "Edit Description for {{entityName}}", "edit-entity": "Edit {{entity}}", "edit-entity-name": "Edit {{entityType}}: \"{{entityName}}\"", + "edit-glossary-display-name": "Edit Glossary Display Name", + "edit-glossary-name": "Edit Glossary Name", "edit-workflow-ingestion": "Edit {{workflow}} Ingestion", "edited": "Edited", "effect": "Effect", @@ -959,6 +961,8 @@ "downstream-depth-message": "Please select a value for downstream depth", "downstream-depth-tooltip": "Display up to 3 nodes of downstream lineage to identify the target (child levels).", "drag-and-drop-files-here": "Drag & drop files here", + "edit-glossary-display-name-help": "Update Display Name", + "edit-glossary-name-help": "Changing Name will remove the existing tag and create new one with mentioned name", "edit-service-entity-connection": "Edit {{entity}} Service Connection", "elastic-search-message": "Ensure that your Elasticsearch indexes are up-to-date by syncing, or recreating all indexes.", "elasticsearch-setup": "Please follow the instructions here to set up Metadata ingestion and index them into Elasticsearch.", 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 b76242e8588..0ea4a59c584 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 @@ -245,6 +245,8 @@ "edit-description-for": "Mettre à Jour la Description pour {{entityName}}", "edit-entity": "Mettre à Jour {{entity}}", "edit-entity-name": "Edit {{entityType}}: \"{{entityName}}\"", + "edit-glossary-display-name": "Edit Glossary Display Name", + "edit-glossary-name": "Edit Glossary Name", "edit-workflow-ingestion": "Edit {{workflow}} Ingestion", "edited": "Edited", "effect": "Effet", @@ -959,6 +961,8 @@ "downstream-depth-message": "Please select a value for downstream depth", "downstream-depth-tooltip": "Display up to 3 nodes of downstream lineage to identify the target (child levels).", "drag-and-drop-files-here": "Drag & drop files here", + "edit-glossary-display-name-help": "Update Display Name", + "edit-glossary-name-help": "Changing Name will remove the existing tag and create new one with mentioned name", "edit-service-entity-connection": "Edit {{entity}} Service Connection", "elastic-search-message": "Ensure that your Elasticsearch indexes are up-to-date by syncing, or recreating all indexes.", "elasticsearch-setup": "Please follow the instructions here to set up Metadata ingestion and index them into Elasticsearch.", 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 5dac63f1853..38d50f70f92 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 @@ -245,6 +245,8 @@ "edit-description-for": "{{entityName}}の説明を編集", "edit-entity": "{{entity}}を編集", "edit-entity-name": "{{entityType}}: \"{{entityName}}\" を編集", + "edit-glossary-display-name": "Edit Glossary Display Name", + "edit-glossary-name": "Edit Glossary Name", "edit-workflow-ingestion": "{{workflow}}インジェスチョンを編集", "edited": "編集済", "effect": "エフェクト", @@ -959,6 +961,8 @@ "downstream-depth-message": "Please select a value for downstream depth", "downstream-depth-tooltip": "Display up to 3 nodes of downstream lineage to identify the target (child levels).", "drag-and-drop-files-here": "ここにファイルをドラッグ＆ドロップ", + "edit-glossary-display-name-help": "Update Display Name", + "edit-glossary-name-help": "Changing Name will remove the existing tag and create new one with mentioned name", "edit-service-entity-connection": "{{entity}}サービスとの接続を編集する", "elastic-search-message": "Ensure that your Elasticsearch indexes are up-to-date by syncing, or recreating all indexes.", "elasticsearch-setup": "Please follow the instructions here to set up Metadata ingestion and index them into Elasticsearch.", 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 d4377640f59..54684a1f2d7 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 @@ -245,6 +245,8 @@ "edit-description-for": "编辑描述 {{entityName}}", "edit-entity": "编辑 {{entity}}", "edit-entity-name": "编辑 {{entityType}}: \"{{entityName}}\"", + "edit-glossary-display-name": "Edit Glossary Display Name", + "edit-glossary-name": "Edit Glossary Name", "edit-workflow-ingestion": "编辑 {{workflow}} 获取", "edited": "编辑", "effect": "Effect", @@ -959,6 +961,8 @@ "downstream-depth-message": "Please select a value for downstream depth", "downstream-depth-tooltip": "Display up to 3 nodes of downstream lineage to identify the target (child levels).", "drag-and-drop-files-here": "Drag & drop files here", + "edit-glossary-display-name-help": "Update Display Name", + "edit-glossary-name-help": "Changing Name will remove the existing tag and create new one with mentioned name", "edit-service-entity-connection": "Edit {{entity}} Service Connection", "elastic-search-message": "Ensure that your Elasticsearch indexes are up-to-date by syncing, or recreating all indexes.", "elasticsearch-setup": "Please follow the instructions here to set up Metadata ingestion and index them into Elasticsearch.", diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryRightPanel/GlossaryRightPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryRightPanel/GlossaryRightPanel.component.tsx index 33e245a5b32..dca865144bc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryRightPanel/GlossaryRightPanel.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryRightPanel/GlossaryRightPanel.component.tsx @@ -180,7 +180,6 @@ const GlossaryRightPanel = ({ data-testid={`reviewer-${reviewer.displayName}`} key={reviewer.name}>