feat(i18n): extract keys from lineage

datahub-web-react/src/app/entityV2/shared/tabs/Lineage/ColumnLineageSelect.tsx

@@ -2,6 +2,7 @@ import { CaretDownOutlined } from '@ant-design/icons';
 import { Tooltip } from '@components';
 import { Button, Select } from 'antd';
 import * as React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router';
 import styled from 'styled-components/macro';
 
@@ -49,6 +50,7 @@ export default function ColumnsLineageSelect({
     setSelectedColumn,
     setIsColumnLevelLineage,
 }: Props) {
+    const { t } = useTranslation('lineage');
     const { entityData } = useEntityData();
     const location = useLocation();
     const history = useHistory();
@@ -59,7 +61,7 @@ export default function ColumnsLineageSelect({
         setSelectedColumn(column);
     }
 
-    const columnButtonTooltip = isColumnLevelLineage ? 'Hide column level lineage' : 'Show column level lineage';
+    const columnButtonTooltip = isColumnLevelLineage ? t('columnLineage.hideTooltip') : t('columnLineage.showTooltip');
 
     return (
         <>
@@ -69,7 +71,7 @@ export default function ColumnsLineageSelect({
                     onChange={selectColumn}
                     showSearch
                     allowClear
-                    placeholder="Select column"
+                    placeholder={t('columnLineage.selectColumnPlaceholder')}
                     optionFilterProp="label"
                 >
                     {entityWithSchema?.schemaMetadata?.fields?.map((field) => {
@@ -104,7 +106,7 @@ export default function ColumnsLineageSelect({
                 >
                     <ImpactAnalysisIcon />
                     <TextWrapper>
-                        <b>Column Lineage</b>
+                        <Trans i18nKey="lineage:columnLineage.buttonLabel" components={{ b: <b /> }} />
                         <CaretDownOutlined style={{ fontSize: '10px', marginLeft: 4 }} />
                     </TextWrapper>
                 </StyledButton>

datahub-web-react/src/app/entityV2/shared/tabs/Lineage/CompactLineageTab.tsx

@@ -3,6 +3,7 @@ import { Icon, Tooltip } from '@components';
 import { MagnifyingGlass } from '@phosphor-icons/react/dist/csr/MagnifyingGlass';
 import { Button, Divider } from 'antd';
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components/macro';
 
 import { useEntityData } from '@app/entity/shared/EntityContext';
@@ -115,6 +116,7 @@ enum LevelFilterType {
 const DEFAULT_SELECTED_LEVELS = new Set([LevelFilterType.DIRECT]);
 
 export const CompactLineageTab = ({ defaultDirection }: { defaultDirection: LineageDirection }) => {
+    const { t } = useTranslation('lineage');
     const entityRegistry = useEntityRegistry();
     const { urn, entityData, entityType } = useEntityData();
     const onIndividualSiblingPage = useIsSeparateSiblingsMode();
@@ -142,21 +144,21 @@ export const CompactLineageTab = ({ defaultDirection }: { defaultDirection: Line
             label: (
                 <span data-testid="compact-lineage-tab-direction-select-option-upstream">
                     <StyledArrowUpOutlined />
-                    <b>Upstreams</b>
+                    <b>{t('direction.upstreams')}</b>
                 </span>
             ),
             value: LineageDirection.Upstream,
-            tip: `View the data assets that ${entityName} depends on`,
+            tip: t('direction.upstreamTooltip', { entityName }),
         },
         {
             label: (
                 <span data-testid="compact-lineage-tab-direction-select-option-downstream">
                     <StyledArrowDownOutlined />
-                    <b>Downstreams</b>
+                    <b>{t('direction.downstreams')}</b>
                 </span>
             ),
             value: LineageDirection.Downstream,
-            tip: `View the data assets that depend on ${entityName}`,
+            tip: t('direction.downstreamTooltip', { entityName }),
         },
     ];
 
@@ -206,26 +208,26 @@ export const CompactLineageTab = ({ defaultDirection }: { defaultDirection: Line
             <ThinDivider />
             <Filters>
                 <LevelFilters>
-                    <Tooltip title="Show directly related data assets" placement="bottom" showArrow={false}>
+                    <Tooltip title={t('levelFilter.directTooltip')} placement="bottom" showArrow={false}>
                         <LevelFilter
                             $isSelected={selectedLevels.has(LevelFilterType.DIRECT)}
                             onClick={() => toggleLevelFilter(LevelFilterType.DIRECT)}
                         >
-                            direct
+                            {t('levelFilter.direct')}
                         </LevelFilter>
                     </Tooltip>
-                    <Tooltip title="Show indirectly related data assets" placement="bottom" showArrow={false}>
+                    <Tooltip title={t('levelFilter.indirectTooltip')} placement="bottom" showArrow={false}>
                         <LevelFilter
                             $isSelected={selectedLevels.has(LevelFilterType.INDIRECT)}
                             onClick={() => toggleLevelFilter(LevelFilterType.INDIRECT)}
                         >
-                            indirect
+                            {t('levelFilter.indirect')}
                         </LevelFilter>
                     </Tooltip>
                 </LevelFilters>
                 <Tooltip
                     placement="left"
-                    title={!showAdvancedFilters ? 'Show search bar' : 'Hide search bar'}
+                    title={!showAdvancedFilters ? t('searchBar.showTooltip') : t('searchBar.hideTooltip')}
                     showArrow={false}
                 >
                     <AdvancedFiltersButton

datahub-web-react/src/app/entityV2/shared/tabs/Lineage/ImpactAnalysis.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { EmbeddedListSearchEmbed } from '@app/entityV2/shared/components/styled/search/EmbeddedListSearchEmbed';
 import { EmbeddedListSearchSection } from '@app/entityV2/shared/components/styled/search/EmbeddedListSearchSection';
@@ -43,6 +44,7 @@ export const ImpactAnalysis = ({
     resetShouldRefetch,
     setIsLoading,
 }: Props) => {
+    const { t } = useTranslation('lineage');
     const finalStartTimeMillis = startTimeMillis || undefined;
     const finalEndTimeMillis = endTimeMillis || undefined;
 
@@ -80,7 +82,7 @@ export const ImpactAnalysis = ({
             defaultFilters={defaultFilters || [{ field: 'degree', values: ['1'] }]}
             shouldRefetch={shouldRefetch}
             resetShouldRefetch={resetShouldRefetch}
-            placeholderText="Search related assets..."
+            placeholderText={t('impactAnalysis.searchPlaceholder')}
             showFilterBar={showFilterBar}
             applyView
         />

datahub-web-react/src/app/entityV2/shared/tabs/Lineage/LineageColumnView.tsx

@@ -11,6 +11,7 @@ import { Tooltip } from '@components';
 import { Button, Select, Typography } from 'antd';
 import * as QueryString from 'query-string';
 import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router';
 import styled, { useTheme } from 'styled-components/macro';
 
@@ -79,6 +80,8 @@ interface Props {
 }
 
 export function LineageColumnView({ defaultDirection, setVisualizeViewInEditMode }: Props) {
+    const { t } = useTranslation('lineage');
+    const { t: tcAction } = useTranslation('common.actions');
     const { urn, entityType, entityData } = useEntityData();
     const location = useLocation();
     const entityRegistry = useEntityRegistry();
@@ -114,29 +117,21 @@ export function LineageColumnView({ defaultDirection, setVisualizeViewInEditMode
     const directionOptions = [
         {
             label: (
-                <Tooltip
-                    placement="right"
-                    title={`View the data assets that depend on ${entityName}`}
-                    showArrow={false}
-                >
+                <Tooltip placement="right" title={t('direction.downstreamTooltip', { entityName })} showArrow={false}>
                     <span data-testid="lineage-tab-direction-select-option-downstream">
                         <ArrowDownOutlined style={{ marginRight: 4 }} />
-                        <b>Downstreams</b>
+                        <b>{t('direction.downstreams')}</b>
                     </span>
                 </Tooltip>
             ),
             value: LineageDirection.Downstream,
         },
         {
             label: (
-                <Tooltip
-                    placement="right"
-                    title={`View the data assets that ${entityName} depends on`}
-                    showArrow={false}
-                >
+                <Tooltip placement="right" title={t('direction.upstreamTooltip', { entityName })} showArrow={false}>
                     <span data-testid="lineage-tab-direction-select-option-upstream">
                         <ArrowUpOutlined style={{ marginRight: 4 }} />
-                        <b>Upstreams</b>
+                        <b>{t('direction.upstreams')}</b>
                     </span>
                 </Tooltip>
             ),
@@ -164,7 +159,7 @@ export function LineageColumnView({ defaultDirection, setVisualizeViewInEditMode
                             <Button type="text">
                                 <ManageLineageIcon />
                                 <Typography.Text>
-                                    <b>Edit</b>
+                                    <b>{tcAction('edit')}</b>
                                 </Typography.Text>
                                 <StyledCaretDown />
                             </Button>
@@ -182,11 +177,11 @@ export function LineageColumnView({ defaultDirection, setVisualizeViewInEditMode
                         />
                     )}
                     <LineageTabTimeSelector />
-                    <Tooltip title={isLoading ? 'Refreshing data' : 'Refresh lineage'} showArrow={false}>
+                    <Tooltip title={isLoading ? t('refresh.loadingTooltip') : t('refresh.tooltip')} showArrow={false}>
                         <RefreshCacheButton type="text" onClick={() => setSkipCache(true)} disabled={isLoading}>
                             {isLoading ? <LoadingOutlined /> : <ReloadOutlined />}
                             <Typography.Text>
-                                <b>Refresh</b>
+                                <b>{tcAction('refresh')}</b>
                             </Typography.Text>
                         </RefreshCacheButton>
                     </Tooltip>

datahub-web-react/src/app/entityV2/shared/tabs/Lineage/LineageTab.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import { useEntityData } from '@app/entity/shared/EntityContext';
@@ -67,6 +68,7 @@ export function LineageTab({ properties, renderType }: Props) {
 }
 
 function WideLineageTab({ defaultDirection }: { defaultDirection: LineageDirection }) {
+    const { t } = useTranslation('lineage');
     const { isTabFullsize } = useContext(TabFullsizedContext);
     const { urn, entityType } = useEntityData();
     const isLineageV2 = useLineageV2();
@@ -78,10 +80,10 @@ function WideLineageTab({ defaultDirection }: { defaultDirection: LineageDirecti
                 <LineageTabHeader>
                     <LineageSwitchWrapper>
                         <LineageViewSwitch selected={isVisualizeView} onClick={() => setVisualizeView(true)}>
-                            Explorer
+                            {t('viewSwitch.explorer')}
                         </LineageViewSwitch>
                         <LineageViewSwitch selected={!isVisualizeView} onClick={() => setVisualizeView(false)}>
-                            Impact Analysis
+                            {t('viewSwitch.impactAnalysis')}
                         </LineageViewSwitch>
                     </LineageSwitchWrapper>
                 </LineageTabHeader>

datahub-web-react/src/app/entityV2/shared/tabs/Lineage/ManageLineageMenuFromImpactAnalysis.tsx

@@ -2,6 +2,7 @@ import { ArrowDownOutlined, ArrowUpOutlined, MoreOutlined } from '@ant-design/ic
 import { Popover, Tooltip } from '@components';
 import { Dropdown } from 'antd';
 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import { ENTITY_TYPES_WITH_MANUAL_LINEAGE } from '@app/entity/shared/constants';
@@ -12,7 +13,6 @@ import { EntityType } from '@types';
 
 const DROPDOWN_Z_INDEX = 100;
 const POPOVER_Z_INDEX = 101;
-const UNAUTHORIZED_TEXT = "You aren't authorized to edit lineage for this entity.";
 
 const UnderlineWrapper = styled.span`
     text-decoration: underline;
@@ -21,24 +21,27 @@ const UnderlineWrapper = styled.span`
 
 const MenuItemContent = styled.div``;
 
-function PopoverContent({ centerEntity, direction }: { centerEntity?: () => void; direction: string }) {
+function PopoverContent({
+    centerEntity,
+    direction,
+}: {
+    centerEntity?: () => void;
+    direction: 'upstream' | 'downstream';
+}) {
     return (
         <div>
-            <UnderlineWrapper onClick={centerEntity}>Focus</UnderlineWrapper> on this entity to make {direction} edits.
+            <Trans
+                i18nKey={
+                    direction === 'upstream'
+                        ? 'lineage:manageLineage.focusPopoverContentUpstream'
+                        : 'lineage:manageLineage.focusPopoverContentDownstream'
+                }
+                components={{ focus: <UnderlineWrapper onClick={centerEntity} /> }}
+            />
         </div>
     );
 }
 
-function getDownstreamDisabledPopoverContent(canEditLineage: boolean, isDashboard: boolean, centerEntity?: () => void) {
-    if (!canEditLineage) {
-        return UNAUTHORIZED_TEXT;
-    }
-    if (isDashboard) {
-        return 'Dashboard entities have no downstream lineage';
-    }
-    return <PopoverContent centerEntity={centerEntity} direction="downstream" />;
-}
-
 interface Props {
     disableUpstream?: boolean;
     disableDownstream?: boolean;
@@ -60,6 +63,8 @@ export default function ManageLineageMenuForImpactAnalysis({
     disableDropdown,
     setVisualizeViewInEditMode,
 }: Props) {
+    const { t } = useTranslation('lineage');
+
     function manageLineage(direction: Direction) {
         setVisualizeViewInEditMode(true, direction);
     }
@@ -70,6 +75,18 @@ export default function ManageLineageMenuForImpactAnalysis({
     const isUpstreamDisabled = disableUpstream || !canEditLineage;
     const isManualLineageSupported = entityType && ENTITY_TYPES_WITH_MANUAL_LINEAGE.has(entityType);
 
+    const unauthorizedText = t('manageLineage.unauthorized');
+
+    function getDownstreamDisabledPopoverContent() {
+        if (!canEditLineage) {
+            return unauthorizedText;
+        }
+        if (isDashboard) {
+            return t('manageLineage.dashboardNoDownstream');
+        }
+        return <PopoverContent centerEntity={centerEntity} direction="downstream" />;
+    }
+
     // if we don't show manual lineage options or the center node option, this menu has no options
     if (!isManualLineageSupported && isCenterNode) return null;
 
@@ -82,7 +99,7 @@ export default function ManageLineageMenuForImpactAnalysis({
                           <Popover
                               content={
                                   !canEditLineage ? (
-                                      UNAUTHORIZED_TEXT
+                                      unauthorizedText
                                   ) : (
                                       <PopoverContent centerEntity={centerEntity} direction="upstream" />
                                   )
@@ -91,7 +108,7 @@ export default function ManageLineageMenuForImpactAnalysis({
                           >
                               <MenuItemContent data-testid="edit-upstream-lineage">
                                   <ArrowUpOutlined />
-                                  &nbsp; Edit Upstream
+                                  &nbsp;{t('manageLineage.editUpstream')}
                               </MenuItemContent>
                           </Popover>
                       </MenuItemStyle>
@@ -107,12 +124,12 @@ export default function ManageLineageMenuForImpactAnalysis({
                           disabled={isDownstreamDisabled}
                       >
                           <Popover
-                              content={getDownstreamDisabledPopoverContent(!!canEditLineage, isDashboard, centerEntity)}
+                              content={getDownstreamDisabledPopoverContent()}
                               overlayStyle={isDownstreamDisabled ? { zIndex: POPOVER_Z_INDEX } : { display: 'none' }}
                           >
                               <MenuItemContent data-testid="edit-downstream-lineage">
                                   <ArrowDownOutlined />
-                                  &nbsp; Edit Downstream
+                                  &nbsp;{t('manageLineage.editDownstream')}
                               </MenuItemContent>
                           </Popover>
                       </MenuItemStyle>
@@ -123,7 +140,7 @@ export default function ManageLineageMenuForImpactAnalysis({
 
     return (
         <>
-            <Tooltip title={disableDropdown ? UNAUTHORIZED_TEXT : ''}>
+            <Tooltip title={disableDropdown ? unauthorizedText : ''}>
                 <div data-testid="lineage-edit-menu-button">
                     <Dropdown
                         overlayStyle={{ zIndex: DROPDOWN_Z_INDEX }}