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
2025-09-02 05:33:49 +00:00 · 2023-10-19 22:02:12 +05:30 · 2023-10-19 22:02:12 +05:30 · b2d0c67275
commit b2d0c67275
parent fc335f2aff
15 changed files with 72 additions and 5 deletions
--- 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<WidgetSizeInfo> =
          widget.data.gridSizes.map((size: WidgetWidths) => ({
-            label: size,
+            label: getWidgetWidthLabelFromKey(toString(size)),
            value: WidgetWidths[size],
          }));

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

--- 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 = ({
        </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}
--- a/openmetadata-ui/src/main/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.less
+++ b/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%;
+  }
+}
--- 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
@ -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",
--- 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
@ -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",
--- 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
@ -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",
--- 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
@ -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",
--- 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
@ -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": "ソース",
--- 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
@ -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",
--- 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
@ -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": "Источник",
--- 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
@ -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": "源",
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
+++ b/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%;
 }
--- a/openmetadata-ui/src/main/resources/ui/src/utils/CustomizableLandingPageUtils.tsx
+++ b/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[] = [];