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

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<WidgetSizeInfo> =
           widget.data.gridSizes.map((size: WidgetWidths) => ({
-            label: size,
+            label: getWidgetWidthLabelFromKey(toString(size)),
             value: WidgetWidths[size],
           }));
 

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;
+  }
+}

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);
 

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

@@ -127,7 +127,7 @@ const TotalDataAssetsWidget = ({
         </Row>
       )}
       {data.length ? (
-        <Row>
+        <Row className="h-95">
           <Col span={isWidgetSizeLarge ? 14 : 24}>
             <Typography.Text className="font-medium">
               {t('label.data-insight-total-entity-summary')}
@@ -160,7 +160,7 @@ const TotalDataAssetsWidget = ({
             </div>
           </Col>
           {isWidgetSizeLarge && (
-            <Col span={10}>
+            <Col className="overflow-y-scroll h-max-full" span={10}>
               <TotalEntityInsightSummary
                 entities={entities}
                 latestData={latestData}

openmetadata-ui/src/main/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.less

@@ -16,3 +16,8 @@
   box-shadow: none;
   height: 100%;
 }
+.total-data-insight-card {
+  .ant-card-body {
+    height: 100%;
+  }
+}

openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json

@@ -538,6 +538,7 @@
     "kpi-uppercase-plural": "KPIs",
     "landing-page": "Landing Page",
     "language": "Sprache",
+    "large": "Large",
     "last": "Letzte",
     "last-error": "Letzter Fehler",
     "last-failed-at": "Zuletzt gescheitert am",
@@ -590,6 +591,7 @@
     "may": "Mai",
     "mean": "Durchschnitt",
     "median": "Median",
+    "medium": "Medium",
     "member-plural": "Mitglieder",
     "mention-plural": "Erwähnungen",
     "message-lowercase": "Nachricht",
@@ -920,6 +922,7 @@
     "slack": "Slack",
     "slack-support": "Slack-Unterstützung",
     "slash-symbol": "/",
+    "small": "Small",
     "soft-delete": "Soft-Löschung",
     "soft-lowercase": "soft",
     "source": "Quelle",

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -538,6 +538,7 @@
     "kpi-uppercase-plural": "KPIs",
     "landing-page": "Landing Page",
     "language": "Language",
+    "large": "Large",
     "last": "Last",
     "last-error": "Last error",
     "last-failed-at": "Last Failed At",
@@ -590,6 +591,7 @@
     "may": "May",
     "mean": "Mean",
     "median": "Median",
+    "medium": "Medium",
     "member-plural": "Members",
     "mention-plural": "Mentions",
     "message-lowercase": "message",
@@ -920,6 +922,7 @@
     "slack": "Slack",
     "slack-support": "Slack Support",
     "slash-symbol": "/",
+    "small": "Small",
     "soft-delete": "Soft Delete",
     "soft-lowercase": "soft",
     "source": "Source",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -538,6 +538,7 @@
     "kpi-uppercase-plural": "KPIs",
     "landing-page": "Landing Page",
     "language": "Idioma",
+    "large": "Large",
     "last": "Último",
     "last-error": "Último error",
     "last-failed-at": "Último fallo en",
@@ -590,6 +591,7 @@
     "may": "Mayo",
     "mean": "Media",
     "median": "Mediana",
+    "medium": "Medium",
     "member-plural": "Miembros",
     "mention-plural": "Menciones",
     "message-lowercase": "mensaje",
@@ -920,6 +922,7 @@
     "slack": "Slack",
     "slack-support": "Slack Support",
     "slash-symbol": "/",
+    "small": "Small",
     "soft-delete": "Borrado Suave",
     "soft-lowercase": "suave",
     "source": "Fuente",

openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json

@@ -538,6 +538,7 @@
     "kpi-uppercase-plural": "KPIs",
     "landing-page": "Landing Page",
     "language": "Langage",
+    "large": "Large",
     "last": "Dernier·ère",
     "last-error": "Dernière erreur",
     "last-failed-at": "Dernier Échec à",
@@ -590,6 +591,7 @@
     "may": "Mai",
     "mean": "Moyenne",
     "median": "Médiane",
+    "medium": "Medium",
     "member-plural": "Membres",
     "mention-plural": "Mentions",
     "message-lowercase": "message",
@@ -920,6 +922,7 @@
     "slack": "Slack",
     "slack-support": "Support Slack",
     "slash-symbol": "/",
+    "small": "Small",
     "soft-delete": "Suppression Logique (Soft delete)",
     "soft-lowercase": "logique (soft)",
     "source": "Source",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json

@@ -538,6 +538,7 @@
     "kpi-uppercase-plural": "KPIs",
     "landing-page": "Landing Page",
     "language": "言語",
+    "large": "Large",
     "last": "最新",
     "last-error": "最新のエラー",
     "last-failed-at": "最新のエラー",
@@ -590,6 +591,7 @@
     "may": "3月",
     "mean": "Mean",
     "median": "中央値",
+    "medium": "Medium",
     "member-plural": "メンバー",
     "mention-plural": "メンション",
     "message-lowercase": "メッセージ",
@@ -920,6 +922,7 @@
     "slack": "Slack",
     "slack-support": "Slack Support",
     "slash-symbol": "/",
+    "small": "Small",
     "soft-delete": "Soft Delete",
     "soft-lowercase": "soft",
     "source": "ソース",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json

@@ -538,6 +538,7 @@
     "kpi-uppercase-plural": "KPIs",
     "landing-page": "Landing Page",
     "language": "Idioma",
+    "large": "Large",
     "last": "Último",
     "last-error": "Último erro",
     "last-failed-at": "Último erro em",
@@ -590,6 +591,7 @@
     "may": "Maio",
     "mean": "Média",
     "median": "Mediana",
+    "medium": "Medium",
     "member-plural": "Membros",
     "mention-plural": "Menções",
     "message-lowercase": "mensagem",
@@ -920,6 +922,7 @@
     "slack": "Slack",
     "slack-support": "Slack Support",
     "slash-symbol": "/",
+    "small": "Small",
     "soft-delete": "Exclusão Suave",
     "soft-lowercase": "suave",
     "source": "Fonte",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json

@@ -538,6 +538,7 @@
     "kpi-uppercase-plural": "KPIs",
     "landing-page": "Landing Page",
     "language": "Язык",
+    "large": "Large",
     "last": "Последний",
     "last-error": "Последняя ошибка",
     "last-failed-at": "Последний сбой в",
@@ -590,6 +591,7 @@
     "may": "Май",
     "mean": "Среднее",
     "median": "Медианна",
+    "medium": "Medium",
     "member-plural": "Участники",
     "mention-plural": "Упоминания",
     "message-lowercase": "сообщение",
@@ -920,6 +922,7 @@
     "slack": "Slack",
     "slack-support": "Поддержка Slack",
     "slash-symbol": "/",
+    "small": "Small",
     "soft-delete": "Мягкое удаление",
     "soft-lowercase": "мягкий",
     "source": "Источник",

openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json

@@ -538,6 +538,7 @@
     "kpi-uppercase-plural": "KPIs",
     "landing-page": "Landing Page",
     "language": "语言",
+    "large": "Large",
     "last": "最近",
     "last-error": "最近错误",
     "last-failed-at": "最近失败时间",
@@ -590,6 +591,7 @@
     "may": "五月",
     "mean": "平均值",
     "median": "中位数",
+    "medium": "Medium",
     "member-plural": "成员",
     "mention-plural": "提及",
     "message-lowercase": "消息",
@@ -920,6 +922,7 @@
     "slack": "Slack",
     "slack-support": "Slack 支持",
     "slash-symbol": "/",
+    "small": "Small",
     "soft-delete": "软删除",
     "soft-lowercase": "软",
     "source": "源",

openmetadata-ui/src/main/resources/ui/src/styles/components/size.less

@@ -279,6 +279,9 @@
 .h-full {
   height: 100%;
 }
+.h-95 {
+  height: 95%;
+}
 .h-max-full {
   max-height: 100%;
 }

openmetadata-ui/src/main/resources/ui/src/utils/CustomizableLandingPageUtils.tsx

@@ -11,7 +11,8 @@
  *  limitations under the License.
  */
 
-import { isEmpty, isUndefined, max, uniqueId } from 'lodash';
+import i18next from 'i18next';
+import { capitalize, isEmpty, isUndefined, max, uniqueId } from 'lodash';
 import React from 'react';
 import { Layout } from 'react-grid-layout';
 import EmptyWidgetPlaceholder from '../components/CustomizableComponents/EmptyWidgetPlaceholder/EmptyWidgetPlaceholder';
@@ -142,6 +143,19 @@ export const getWidgetWidth = (widget: Document) => {
   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[] = [];