From b2d0c67275842a87c8b950ccb582c5fab98514b8 Mon Sep 17 00:00:00 2001 From: Aniket Katkar Date: Thu, 19 Oct 2023 22:02:12 +0530 Subject: [PATCH] fix(ui): widget size labels (#13650) * added localized labels for widget size selection * localization changes for other languages * fixed total assets widget overflow issue * Changed placeholder color while dragging widget --- .../AddWidgetModal/AddWidgetModal.tsx | 5 +++-- .../CustomizeMyData/CustomizeMyData.less | 19 +++++++++++++++++++ .../CustomizeMyData/CustomizeMyData.tsx | 1 + .../TotalDataAssetsWidget.component.tsx | 4 ++-- .../TotalDataAssetsWidget.less | 5 +++++ .../ui/src/locale/languages/de-de.json | 3 +++ .../ui/src/locale/languages/en-us.json | 3 +++ .../ui/src/locale/languages/es-es.json | 3 +++ .../ui/src/locale/languages/fr-fr.json | 3 +++ .../ui/src/locale/languages/ja-jp.json | 3 +++ .../ui/src/locale/languages/pt-br.json | 3 +++ .../ui/src/locale/languages/ru-ru.json | 3 +++ .../ui/src/locale/languages/zh-cn.json | 3 +++ .../ui/src/styles/components/size.less | 3 +++ .../utils/CustomizableLandingPageUtils.tsx | 16 +++++++++++++++- 15 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/CustomizeMyData/CustomizeMyData.less diff --git a/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/AddWidgetModal/AddWidgetModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/AddWidgetModal/AddWidgetModal.tsx index b03e8333b8b..040c494f6e2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/AddWidgetModal/AddWidgetModal.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/AddWidgetModal/AddWidgetModal.tsx @@ -14,13 +14,14 @@ import { CheckOutlined } from '@ant-design/icons'; import { Modal, Space, Tabs, TabsProps } from 'antd'; import { AxiosError } from 'axios'; -import { isEmpty } from 'lodash'; +import { isEmpty, toString } from 'lodash'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ERROR_PLACEHOLDER_TYPE } from '../../../enums/common.enum'; import { WidgetWidths } from '../../../enums/CustomizablePage.enum'; import { Document } from '../../../generated/entity/docStore/document'; import { getAllKnowledgePanels } from '../../../rest/DocStoreAPI'; +import { getWidgetWidthLabelFromKey } from '../../../utils/CustomizableLandingPageUtils'; import { showErrorToast } from '../../../utils/ToastUtils'; import ErrorPlaceHolder from '../../common/error-with-placeholder/ErrorPlaceHolder'; import { @@ -64,7 +65,7 @@ function AddWidgetModal({ widgetsList?.map((widget) => { const widgetSizeOptions: Array = widget.data.gridSizes.map((size: WidgetWidths) => ({ - label: size, + label: getWidgetWidthLabelFromKey(toString(size)), value: WidgetWidths[size], })); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/CustomizeMyData/CustomizeMyData.less b/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/CustomizeMyData/CustomizeMyData.less new file mode 100644 index 00000000000..868e6b16dda --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/CustomizeMyData/CustomizeMyData.less @@ -0,0 +1,19 @@ +/* + * 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 (reference) url('../../../styles/variables.less'); + +.grid-container { + .react-grid-item.react-grid-placeholder { + background-color: @announcement-background-dark; + } +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/CustomizeMyData/CustomizeMyData.tsx b/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/CustomizeMyData/CustomizeMyData.tsx index f6726fd2616..25e3aa91554 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/CustomizeMyData/CustomizeMyData.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/CustomizeMyData/CustomizeMyData.tsx @@ -54,6 +54,7 @@ import ActivityFeedProvider from '../../ActivityFeed/ActivityFeedProvider/Activi import PageLayoutV1 from '../../containers/PageLayoutV1'; import AddWidgetModal from '../AddWidgetModal/AddWidgetModal'; import { CustomizeMyDataProps } from './CustomizeMyData.interface'; +import './CustomizeMyData.less'; const ReactGridLayout = WidthProvider(RGL); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx index c21100451ab..acea87c000c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx @@ -127,7 +127,7 @@ const TotalDataAssetsWidget = ({ )} {data.length ? ( - + {t('label.data-insight-total-entity-summary')} @@ -160,7 +160,7 @@ const TotalDataAssetsWidget = ({ {isWidgetSizeLarge && ( - + { return widgetSize as number; }; +export const getWidgetWidthLabelFromKey = (widgetKey: string) => { + switch (widgetKey) { + case 'large': + return i18next.t('label.large'); + case 'medium': + return i18next.t('label.medium'); + case 'small': + return i18next.t('label.small'); + default: + return capitalize(widgetKey); + } +}; + const getAllWidgetsArray = (layout: WidgetConfig[]) => { const widgetsArray: WidgetConfig[] = [];