Skip to content

Commit 0389564

Browse files
Rastuharemulli-hoeness
authored and
barmac
committed
fix: add missing translations in header and tab labels
Closes #1044 Co-authored-by: ulli-hoeness <[email protected]>
1 parent 656595b commit 0389564

File tree

4 files changed

+98
-71
lines changed

4 files changed

+98
-71
lines changed

‎src/provider/zeebe/ZeebePropertiesProvider.js‎

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,11 @@ export default class ZeebePropertiesProvider {
9494
ZeebePropertiesProvider.$inject = [ 'propertiesPanel', 'injector' ];
9595

9696

97-
function CalledDecisionGroup(element) {
97+
function CalledDecisionGroup(element, injector) {
98+
const translate = injector.get('translate');
9899
const group = {
99100
id: 'calledDecision',
100-
label: 'Called decision',
101+
label: translate('Called decision'),
101102
entries: [
102103
...CalledDecisionProps({ element })
103104
],
@@ -107,10 +108,11 @@ function CalledDecisionGroup(element) {
107108
return group.entries.length ? group : null;
108109
}
109110

110-
function ScriptGroup(element) {
111+
function ScriptGroup(element, injector) {
112+
const translate = injector.get('translate');
111113
const group = {
112114
id: 'script',
113-
label: 'Script',
115+
label: translate('Script'),
114116
entries: [
115117
...ScriptProps({ element })
116118
],
@@ -120,10 +122,11 @@ function ScriptGroup(element) {
120122
return group.entries.length ? group : null;
121123
}
122124

123-
function TaskDefinitionGroup(element) {
125+
function TaskDefinitionGroup(element, injector) {
126+
const translate = injector.get('translate');
124127
const group = {
125128
id: 'taskDefinition',
126-
label: 'Task definition',
129+
label: translate('Task definition'),
127130
entries: [
128131
...TaskDefinitionProps({ element })
129132
],
@@ -134,9 +137,10 @@ function TaskDefinitionGroup(element) {
134137
}
135138

136139
function InputGroup(element, injector) {
140+
const translate = injector.get('translate');
137141
const group = {
138142
id: 'inputs',
139-
label: 'Inputs',
143+
label: translate('Inputs'),
140144
component: ListGroup,
141145
...InputProps({ element, injector })
142146
};
@@ -145,20 +149,22 @@ function InputGroup(element, injector) {
145149
}
146150

147151
function OutputGroup(element, injector) {
152+
const translate = injector.get('translate');
148153
const group = {
149154
id: 'outputs',
150-
label: 'Outputs',
155+
label: translate('Outputs'),
151156
component: ListGroup,
152157
...OutputProps({ element, injector })
153158
};
154159

155160
return group.items ? group : null;
156161
}
157162

158-
function ConditionGroup(element) {
163+
function ConditionGroup(element, injector) {
164+
const translate = injector.get('translate');
159165
const group = {
160166
id: 'condition',
161-
label: 'Condition',
167+
label: translate('Condition'),
162168
entries: [
163169
...ConditionProps({ element })
164170
],
@@ -169,9 +175,10 @@ function ConditionGroup(element) {
169175
}
170176

171177
function FormGroup(element, injector) {
178+
const translate = injector.get('translate');
172179
const group = {
173180
id: 'form',
174-
label: 'Form',
181+
label: translate('Form'),
175182
entries: [
176183
...FormProps({ element, injector })
177184
],
@@ -181,10 +188,11 @@ function FormGroup(element, injector) {
181188
return group.entries.length ? group : null;
182189
}
183190

184-
function TargetGroup(element) {
191+
function TargetGroup(element, injector) {
192+
const translate = injector.get('translate');
185193
const group = {
186194
id: 'calledElement',
187-
label: 'Called element',
195+
label: translate('Called element'),
188196
entries: [
189197
...TargetProps({ element })
190198
],
@@ -195,20 +203,22 @@ function TargetGroup(element) {
195203
}
196204

197205
function HeaderGroup(element, injector) {
206+
const translate = injector.get('translate');
198207
const group = {
199208
id: 'headers',
200-
label: 'Headers',
209+
label: translate('Headers'),
201210
component: ListGroup,
202211
...HeaderProps({ element, injector })
203212
};
204213

205214
return group.items ? group : null;
206215
}
207216

208-
function OutputPropagationGroup(element) {
217+
function OutputPropagationGroup(element, injector) {
218+
const translate = injector.get('translate');
209219
const group = {
210220
id: 'outputPropagation',
211-
label: 'Output propagation',
221+
label: translate('Output propagation'),
212222
entries: [
213223
...OutputPropagationProps({ element })
214224
],
@@ -218,10 +228,11 @@ function OutputPropagationGroup(element) {
218228
return group.entries.length ? group : null;
219229
}
220230

221-
function InputPropagationGroup(element) {
231+
function InputPropagationGroup(element, injector) {
232+
const translate = injector.get('translate');
222233
const group = {
223234
id: 'inputPropagation',
224-
label: 'Input propagation',
235+
label: translate('Input propagation'),
225236
entries: [
226237
...InputPropagationProps({ element })
227238
],
@@ -231,10 +242,11 @@ function InputPropagationGroup(element) {
231242
return group.entries.length ? group : null;
232243
}
233244

234-
function BusinessRuleImplementationGroup(element) {
245+
function BusinessRuleImplementationGroup(element, injector) {
246+
const translate = injector.get('translate');
235247
const group = {
236248
id: 'businessRuleImplementation',
237-
label: 'Implementation',
249+
label: translate('Implementation'),
238250
entries: [
239251
...BusinessRuleImplementationProps({ element })
240252
],
@@ -244,10 +256,11 @@ function BusinessRuleImplementationGroup(element) {
244256
return group.entries.length ? group : null;
245257
}
246258

247-
function ScriptImplementationGroup(element) {
259+
function ScriptImplementationGroup(element, injector) {
260+
const translate = injector.get('translate');
248261
const group = {
249262
id: 'scriptImplementation',
250-
label: 'Implementation',
263+
label: translate('Implementation'),
251264
entries: [
252265
...ScriptImplementationProps({ element })
253266
],
@@ -257,10 +270,11 @@ function ScriptImplementationGroup(element) {
257270
return group.entries.length ? group : null;
258271
}
259272

260-
function UserTaskImplementationGroup(element) {
273+
function UserTaskImplementationGroup(element, injector) {
274+
const translate = injector.get('translate');
261275
const group = {
262276
id: 'userTaskImplementation',
263-
label: 'Implementation',
277+
label: translate('Implementation'),
264278
entries: [
265279
...UserTaskImplementationProps({ element })
266280
],
@@ -270,10 +284,11 @@ function UserTaskImplementationGroup(element) {
270284
return group.entries.length ? group : null;
271285
}
272286

273-
function AssignmentDefinitionGroup(element) {
287+
function AssignmentDefinitionGroup(element, injector) {
288+
const translate = injector.get('translate');
274289
const group = {
275290
id: 'assignmentDefinition',
276-
label: 'Assignment',
291+
label: translate('Assignment'),
277292
entries: [
278293
...AssignmentDefinitionProps({ element }),
279294
...TaskScheduleProps({ element })
@@ -285,8 +300,9 @@ function AssignmentDefinitionGroup(element) {
285300
}
286301

287302
function ExtensionPropertiesGroup(element, injector) {
303+
const translate = injector.get('translate');
288304
const group = {
289-
label: 'Extension properties',
305+
label: translate('Extension properties'),
290306
id: 'Zeebe__ExtensionProperties',
291307
component: ListGroup,
292308
...ExtensionPropertiesProps({ element, injector, namespace: 'zeebe' })

‎src/render/BpmnPropertiesPanel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ export default function BpmnPropertiesPanel(props) {
228228
return <BpmnPropertiesPanelContext.Provider value={ bpmnPropertiesPanelContext }>
229229
<PropertiesPanel
230230
element={ selectedElement }
231-
headerProvider={ PanelHeaderProvider }
231+
headerProvider={ PanelHeaderProvider(translate) }
232232
placeholderProvider={ PanelPlaceholderProvider(translate) }
233233
groups={ groups }
234234
layoutConfig={ layoutConfig }

‎src/render/PanelHeaderProvider.js‎

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -66,58 +66,60 @@ export function getConcreteType(element) {
6666
return type;
6767
}
6868

69-
export const PanelHeaderProvider = {
70-
71-
getDocumentationRef: (element) => {
72-
const elementTemplates = getTemplatesService();
73-
74-
if (elementTemplates) {
75-
return getTemplateDocumentation(element, elementTemplates);
76-
}
77-
},
69+
export const PanelHeaderProvider = (translate) => {
70+
if (!translate) translate = (text) => text;
71+
return {
72+
getDocumentationRef: (element) => {
73+
const elementTemplates = getTemplatesService();
74+
75+
if (elementTemplates) {
76+
return getTemplateDocumentation(element, elementTemplates);
77+
}
78+
},
7879

79-
getElementLabel: (element) => {
80-
if (is(element, 'bpmn:Process')) {
81-
return getBusinessObject(element).name;
82-
}
80+
getElementLabel: (element) => {
81+
if (is(element, 'bpmn:Process')) {
82+
return getBusinessObject(element).name;
83+
}
8384

84-
return getLabel(element);
85-
},
85+
return getLabel(element);
86+
},
8687

87-
getElementIcon: (element) => {
88-
const concreteType = getConcreteType(element);
88+
getElementIcon: (element) => {
89+
const concreteType = getConcreteType(element);
8990

90-
// eslint-disable-next-line react-hooks/rules-of-hooks
91-
const config = useService('config.elementTemplateIconRenderer', false);
91+
// eslint-disable-next-line react-hooks/rules-of-hooks
92+
const config = useService('config.elementTemplateIconRenderer', false);
9293

93-
const { iconProperty = 'zeebe:modelerTemplateIcon' } = config || {};
94+
const { iconProperty = 'zeebe:modelerTemplateIcon' } = config || {};
9495

95-
const templateIcon = getBusinessObject(element).get(iconProperty);
96+
const templateIcon = getBusinessObject(element).get(iconProperty);
9697

97-
if (templateIcon) {
98-
return () => <img class="bio-properties-panel-header-template-icon" width="32" height="32" src={ templateIcon } />;
99-
}
98+
if (templateIcon) {
99+
return () => <img class="bio-properties-panel-header-template-icon" width="32" height="32" src={ templateIcon } />;
100+
}
100101

101-
return iconsByType[ concreteType ];
102-
},
102+
return iconsByType[ concreteType ];
103+
},
103104

104-
getTypeLabel: (element) => {
105-
const elementTemplates = getTemplatesService();
105+
getTypeLabel: (element) => {
106+
const elementTemplates = getTemplatesService();
106107

107-
if (elementTemplates) {
108-
const template = getTemplate(element, elementTemplates);
108+
if (elementTemplates) {
109+
const template = getTemplate(element, elementTemplates);
109110

110-
if (template && template.name) {
111-
return template.name;
111+
if (template && template.name) {
112+
return translate(template.name);
113+
}
112114
}
113-
}
114115

115-
const concreteType = getConcreteType(element);
116+
const concreteType = getConcreteType(element);
116117

117-
return concreteType
118-
.replace(/(\B[A-Z])/g, ' $1')
119-
.replace(/(\bNon Interrupting)/g, '($1)');
120-
}
118+
return translate(concreteType
119+
.replace(/(\B[A-Z])/g, ' $1')
120+
.replace(/(\bNon Interrupting)/g, '($1)'));
121+
}
122+
};
121123
};
122124

123125

‎test/spec/PanelHeaderProvider.spec.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,8 @@ describe('<PanelHeaderProvider>', function() {
128128
});
129129

130130
// when
131-
const elementLabel = PanelHeaderProvider.getElementLabel(element);
131+
const { getElementLabel } = PanelHeaderProvider(translateMock);
132+
const elementLabel = getElementLabel(element);
132133

133134
// then
134135
expect(elementLabel).to.equal('foo');
@@ -143,7 +144,8 @@ describe('<PanelHeaderProvider>', function() {
143144
});
144145

145146
// when
146-
const elementLabel = PanelHeaderProvider.getElementLabel(element);
147+
const { getElementLabel } = PanelHeaderProvider(translateMock);
148+
const elementLabel = getElementLabel(element);
147149

148150
// then
149151
expect(elementLabel).to.equal('foo');
@@ -162,7 +164,8 @@ describe('<PanelHeaderProvider>', function() {
162164
});
163165

164166
// when
165-
const elementLabel = PanelHeaderProvider.getElementLabel(element);
167+
const { getElementLabel } = PanelHeaderProvider(translateMock);
168+
const elementLabel = getElementLabel(element);
166169

167170
// then
168171
expect(elementLabel).to.equal('foo');
@@ -177,7 +180,8 @@ describe('<PanelHeaderProvider>', function() {
177180
});
178181

179182
// when
180-
const elementLabel = PanelHeaderProvider.getElementLabel(element);
183+
const { getElementLabel } = PanelHeaderProvider(translateMock);
184+
const elementLabel = getElementLabel(element);
181185

182186
// then
183187
expect(elementLabel).to.equal('foo');
@@ -905,7 +909,7 @@ class ElementTemplates {
905909
function createHeader(options = {}) {
906910
const {
907911
element = noopElement,
908-
headerProvider = PanelHeaderProvider,
912+
headerProvider = PanelHeaderProvider(translateMock),
909913
context = { getService: noop },
910914
container
911915
} = options;
@@ -931,4 +935,9 @@ function createElement(type, attrs) {
931935
};
932936

933937
return element;
938+
}
939+
940+
// Mock translate function for testing
941+
function translateMock(text) {
942+
return text;
934943
}

0 commit comments

Comments
 (0)