Skip to content

Commit 8ab1363

Browse files
v-tarasevich-blitz-brainv-tarasevich-blitz-brain
committed
feat(i18n): extract keys from queries tab (oss additions)
1 parent d79eba4 commit 8ab1363

6 files changed

Lines changed: 59 additions & 25 deletions

File tree

‎datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Timeline/SchemaTimelineSection.tsx‎

Lines changed: 43 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,36 @@
11
import { Typography } from 'antd';
22
import React from 'react';
3+
import { useTranslation } from 'react-i18next';
34
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
45
import 'react-vertical-timeline-component/style.min.css';
56
import styled, { useTheme } from 'styled-components';
67

78
import { useEntityData } from '@app/entity/shared/EntityContext';
89

910
import { useGetTimelineQuery } from '@graphql/timeline.generated';
10-
import { ChangeCategoryType } from '@types';
11+
import { ChangeCategoryType, ChangeOperationType } from '@types';
1112

1213
import TimelineIcon from '@images/timeline-icon.svg?react';
1314

1415
const PLACEHOLDER_SUBTITLE = 'subtitle';
1516
const PLACEHOLDER_DESC = 'description';
1617

18+
const TIMELINE_LAYOUT = '1-column-left';
19+
20+
const CONTENT_STYLE: React.CSSProperties = {
21+
boxShadow: 'none',
22+
padding: 0,
23+
};
24+
25+
const ICON_STYLE: React.CSSProperties = {
26+
height: '10px',
27+
width: '10px',
28+
boxShadow: 'none',
29+
position: 'absolute',
30+
top: '30%',
31+
left: 0,
32+
};
33+
1734
const TimeLine = styled(VerticalTimeline)`
1835
svg {
1936
height: 10px;
@@ -40,9 +57,23 @@ const Event = styled(Typography.Text)`
4057
`;
4158

4259
export const SchemaTimelineSection = () => {
60+
const { t } = useTranslation('entity.profile.timeline');
4361
const theme = useTheme();
4462
const { urn } = useEntityData();
4563

64+
const getChangeTitle = (operation: ChangeOperationType | null | undefined, fieldPath?: string | null): string => {
65+
switch (operation) {
66+
case ChangeOperationType.Add:
67+
return t('changeAdded', { fieldPath });
68+
case ChangeOperationType.Modify:
69+
return t('changeModified', { fieldPath });
70+
case ChangeOperationType.Remove:
71+
return t('changeRemoved', { fieldPath });
72+
default:
73+
return '';
74+
}
75+
};
76+
4677
const timelineResult = useGetTimelineQuery({
4778
// also pass in the changeCategories
4879
variables: { input: { urn, changeCategories: [ChangeCategoryType.TechnicalSchema] } },
@@ -54,12 +85,11 @@ export const SchemaTimelineSection = () => {
5485
transactions?.forEach((transaction) => {
5586
const time = new Date(transaction.timestampMillis).toDateString();
5687
transaction.changes?.forEach((change) => {
88+
const fieldPath = change.parameters?.find((parameter) => parameter.key === 'fieldPath')?.value;
5789
const entry = {
5890
// operation: change.operation,
5991
// description: change.description,
60-
title: `${
61-
change.parameters?.find((parameter) => parameter.key === 'fieldPath')?.value
62-
} was ${change.operation?.toLowerCase()}ed.`,
92+
title: getChangeTitle(change.operation, fieldPath),
6393
subtitle: PLACEHOLDER_SUBTITLE,
6494
desc: PLACEHOLDER_DESC,
6595
time,
@@ -69,31 +99,21 @@ export const SchemaTimelineSection = () => {
6999
});
70100

71101
return (
72-
<TimeLine layout="1-column-left" lineColor={theme.colors.border} animate={false}>
73-
{timelineHistory.map((t) => {
102+
<TimeLine layout={TIMELINE_LAYOUT} lineColor={theme.colors.border} animate={false}>
103+
{timelineHistory.map((entry) => {
74104
return (
75105
<VerticalTimelineElement
76-
key={t.title}
77-
contentStyle={{
78-
boxShadow: 'none',
79-
padding: 0,
80-
}}
81-
date={t.date}
106+
key={entry.title}
107+
contentStyle={CONTENT_STYLE}
108+
date={entry.date}
82109
icon={<TimelineIcon />}
83-
iconStyle={{
84-
height: '10px',
85-
width: '10px',
86-
boxShadow: 'none',
87-
position: 'absolute',
88-
top: '30%',
89-
left: 0,
90-
}}
110+
iconStyle={ICON_STYLE}
91111
>
92-
{t.title && (
112+
{entry.title && (
93113
<>
94-
<DateText> {t.time}</DateText>
114+
<DateText> {entry.time}</DateText>
95115
<div>
96-
<Event>{t.title} </Event>
116+
<Event>{entry.title} </Event>
97117
</div>
98118
</>
99119
)}

‎datahub-web-react/src/app/entityV2/shared/tabs/Dataset/View/ViewDefinitionTab.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ import { DBT_URN } from '@app/ingest/source/builder/constants';
1212

1313
import { GetDatasetQuery } from '@graphql/dataset.generated';
1414

15+
const JUSTIFY_CONTENT_LEFT = 'left';
16+
const DEFAULT_SYNTAX_LANGUAGE = 'sql';
17+
1518
const InfoSection = styled.div`
1619
border-bottom: 1px solid ${(props) => props.theme.colors.border};
1720
padding: 16px 20px;
@@ -91,7 +94,7 @@ export default function ViewDefinitionTab() {
9194
<>
9295
<InfoSection>
9396
<Typography.Title level={5}>{t('viewDefinitionTab.detailsHeading')}</Typography.Title>
94-
<InfoItemContainer justifyContent="left">
97+
<InfoItemContainer justifyContent={JUSTIFY_CONTENT_LEFT}>
9598
<InfoItem title={t('viewDefinitionTab.materializedLabel')}>
9699
<InfoItemContent>
97100
{materialized
@@ -117,7 +120,7 @@ export default function ViewDefinitionTab() {
117120
<CopyQuery query={showFormatted ? formattedLogic || '' : logic} showCopyText />
118121
</ViewHeader>
119122
<QueryText>
120-
<NestedSyntax language={language?.toLowerCase() ?? 'sql'}>
123+
<NestedSyntax language={language?.toLowerCase() ?? DEFAULT_SYNTAX_LANGUAGE}>
121124
{showFormatted ? formattedLogic : logic}
122125
</NestedSyntax>
123126
</QueryText>

‎datahub-web-react/src/i18n/i18n.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const NAMESPACES = [
2323
'entity.profile.schema',
2424
'entity.profile.stats',
2525
'entity.profile.summary',
26+
'entity.profile.timeline',
2627
'entity.profile.view',
2728
'entity.shared.containers',
2829
'entity.types',

‎datahub-web-react/src/i18n/locales/en/entity.profile.timeline.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"changeAdded": "{{fieldPath}} was added.",
3+
"changeModified": "{{fieldPath}} was modified.",
4+
"changeRemoved": "{{fieldPath}} was removed."
5+
}

‎datahub-web-react/src/setupTests.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import enEntityProfileSchema from '@src/i18n/locales/en/entity.profile.schema.js
2424
import enEntityProfileStats from '@src/i18n/locales/en/entity.profile.stats.json';
2525
import enEntityProfileSummary from '@src/i18n/locales/en/entity.profile.summary.json';
2626
import enEntityProfileTabs from '@src/i18n/locales/en/entity.profile.tabs.json';
27+
import enEntityProfileTimeline from '@src/i18n/locales/en/entity.profile.timeline.json';
2728
import enEntityProfileValidations from '@src/i18n/locales/en/entity.profile.validations.json';
2829
import enEntityProfileView from '@src/i18n/locales/en/entity.profile.view.json';
2930
import enEntitySharedContainers from '@src/i18n/locales/en/entity.shared.containers.json';
@@ -72,6 +73,7 @@ i18n.use(initReactI18next).init({
7273
'entity.profile.schema',
7374
'entity.profile.stats',
7475
'entity.profile.summary',
76+
'entity.profile.timeline',
7577
'entity.profile.view',
7678
'entity.shared.containers',
7779
'entity.types',
@@ -115,6 +117,7 @@ i18n.use(initReactI18next).init({
115117
'entity.profile.schema': enEntityProfileSchema,
116118
'entity.profile.stats': enEntityProfileStats,
117119
'entity.profile.summary': enEntityProfileSummary,
120+
'entity.profile.timeline': enEntityProfileTimeline,
118121
'entity.profile.view': enEntityProfileView,
119122
'entity.shared.containers': enEntitySharedContainers,
120123
'entity.types': enEntityTypes,

‎datahub-web-react/translated-files.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ src/app/entityV2/shared/containers/**/*.{ts,tsx}
1414
src/app/entityV2/shared/tabs/Dataset/AccessManagement/**/*.{ts,tsx}
1515
src/app/entityV2/shared/tabs/Dataset/Queries/**/*.{ts,tsx}
1616
src/app/entityV2/shared/tabs/Dataset/Schema/**/*.{ts,tsx}
17+
src/app/entityV2/shared/tabs/Dataset/Timeline/**/*.{ts,tsx}
1718
src/app/entityV2/shared/tabs/Dataset/Validations/**/*.{ts,tsx}
19+
src/app/entityV2/shared/tabs/Dataset/View/**/*.{ts,tsx}
1820
src/app/entityV2/shared/tabs/Documentation/**/*.{ts,tsx}
1921
src/app/entityV2/shared/tabs/Incident/**/*.{ts,tsx}
2022
src/app/entityV2/summary/**/*.{ts,tsx}

0 commit comments

Comments
 (0)