Skip to content

Commit d92c549

Browse files
PiTremPiTrem
committed
feat(I18N): admin UI #2729
Squashed commit of the following: commit 3cae5b8 Author: Adrian Herrmann <headri@web.de> Date: Fri Oct 24 09:14:12 2025 +0000 fix Allocated space per user commit d28422b Author: Adrian Herrmann <headri@web.de> Date: Fri Oct 24 09:00:08 2025 +0000 Added language switch to nav commit 9769996 Author: Adrian Herrmann <headri@web.de> Date: Thu Oct 23 14:34:43 2025 +0000 Added i18n to admin home and dashboard
1 parent 0ec7144 commit d92c549

File tree

7 files changed

+272
-51
lines changed

7 files changed

+272
-51
lines changed

‎app/javascript/src/apps/admin/AdminDashboard.js‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import React from 'react';
22
import {
33
InputGroup, Card, Form, Button
44
} from 'react-bootstrap';
5+
import propType from 'prop-types';
56
import AdminFetcher from 'src/fetchers/AdminFetcher';
7+
import { injectIntl, FormattedMessage } from 'react-intl';
68

7-
export default class AdminDashboard extends React.Component {
9+
class AdminDashboard extends React.Component {
810
constructor(props) {
911
super(props);
1012
this.state = {
@@ -51,36 +53,55 @@ export default class AdminDashboard extends React.Component {
5153
const {
5254
diskAvailable, diskPercentUsed, allocatedUserSpace
5355
} = this.state;
56+
const { intl } = this.props;
57+
5458
const className = diskPercentUsed > 80 ? 'text-danger' : '';
5559

60+
const formattedDiskAvailable = intl.formatNumber(diskAvailable);
61+
const formattedDiskPercentUsed = intl.formatNumber(diskPercentUsed / 100, {
62+
style: 'percent',
63+
minimumFractionDigits: 2,
64+
maximumFractionDigits: 2,
65+
});
66+
5667
return (
5768
<Card style={{ width: '30rem' }}>
5869
<Card.Body className="p-0">
59-
<InputGroup.Text>Disk Available (MB)</InputGroup.Text>
70+
71+
{/* Available disk space */}
72+
<InputGroup.Text>
73+
<FormattedMessage id="dashboard-disk_available" />
74+
</InputGroup.Text>
6075
<Form.Control
6176
type="text"
62-
defaultValue={diskAvailable || ''}
6377
readOnly
78+
value={formattedDiskAvailable || ''}
6479
/>
65-
<InputGroup.Text>Disk Percent Used (%)</InputGroup.Text>
80+
81+
{/* Disk percent used */}
82+
<InputGroup.Text>
83+
<FormattedMessage id="dashboard-disk_percent_used" />
84+
</InputGroup.Text>
6685
<Form.Control
6786
type="text"
6887
className={className}
69-
defaultValue={`${diskPercentUsed}%` || ''}
7088
readOnly
89+
value={formattedDiskPercentUsed || ''}
7190
/>
72-
<InputGroup.Text>Default User Allocated Space (MB)</InputGroup.Text>
91+
92+
{/* Allocated space per user */}
93+
<InputGroup.Text>
94+
<FormattedMessage id="dashboard-default_user_allocated_space" />
95+
</InputGroup.Text>
7396
<InputGroup>
7497
<Form.Control
7598
type="number"
7699
min="0"
77100
defaultValue={allocatedUserSpace || ''}
78101
onChange={(event) => this.setState({ allocatedUserSpace: event.target.value })}
79102
/>
80-
<Button
81-
variant="warning"
82-
onClick={() => this.handleSaveBtn()}
83-
>
103+
<InputGroup.Text>MB</InputGroup.Text>
104+
<Button variant="warning" onClick={this.handleSaveBtn}>
84105
Save
85106
</Button>
86107
</InputGroup>
@@ -97,3 +118,11 @@ export default class AdminDashboard extends React.Component {
97118
return (<div />);
98119
}
99120
}
121+
AdminDashboard.propTypes = {
122+
intl: propType.shape({
123+
formatMessage: propType.func.isRequired,
124+
formatNumber: propType.func.isRequired,
125+
}).isRequired
126+
};
127+
128+
export default injectIntl(AdminDashboard);

‎app/javascript/src/apps/admin/AdminHome.js‎

Lines changed: 78 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
2-
import { Row, Col, Nav, NavItem, Container } from 'react-bootstrap';
2+
import {
3+
Row, Col, Nav, NavItem, Container, Button, InputGroup
4+
} from 'react-bootstrap';
35
import BaseNavigation from 'src/components/navigation/BaseNavigation';
46
import Notifications from 'src/components/Notifications';
57
import AdminDashboard from 'src/apps/admin/AdminDashboard';
@@ -14,12 +16,16 @@ import ChemSpectraLayouts from 'src/apps/admin/ChemSpectraLayouts';
1416
import DevicesList from 'src/apps/admin/devices/DevicesList';
1517
// import TemplateManagement from 'src/apps/admin/TemplateManagement';
1618
import ThirdPartyApp from 'src/apps/admin/ThirdPartyApp';
19+
import { IntlProvider, FormattedMessage } from 'react-intl';
20+
import messagesDE from 'src/apps/admin/i18n/de.json';
21+
import messagesEN from 'src/apps/admin/i18n/en.json';
1722

1823
class AdminHome extends React.Component {
1924
constructor(props) {
2025
super();
2126
this.state = {
2227
pageIndex: 0,
28+
locale: 'en',
2329
};
2430
this.handleSelect = this.handleSelect.bind(this);
2531
}
@@ -30,6 +36,16 @@ class AdminHome extends React.Component {
3036
});
3137
}
3238

39+
getMessages() {
40+
const { locale } = this.state;
41+
const locales = {
42+
en: messagesEN,
43+
de: messagesDE,
44+
};
45+
46+
return { ...messagesEN, ...(locales[locale] || {}) };
47+
}
48+
3349
mainContent() {
3450
const { pageIndex } = this.state;
3551
switch (pageIndex) {
@@ -55,65 +71,96 @@ class AdminHome extends React.Component {
5571
return (
5672
<Nav className="flex-column fs-5 gap-3 mt-2" variant="pills" activeKey={pageIndex} onSelect={this.handleSelect}>
5773
<NavItem>
58-
<Nav.Link eventKey={0}>Dashboard</Nav.Link>
74+
<InputGroup>
75+
<Button onClick={() => this.setState({ locale: 'en' })}>English</Button>
76+
<Button onClick={() => this.setState({ locale: 'de' })}>Deutsch</Button>
77+
</InputGroup>
78+
</NavItem>
79+
<NavItem>
80+
<Nav.Link eventKey={0}>
81+
<FormattedMessage id="navigation-dashboard" />
82+
</Nav.Link>
5983
</NavItem>
6084
<NavItem>
61-
<Nav.Link eventKey={1}>User Management</Nav.Link>
85+
<Nav.Link eventKey={1}>
86+
<FormattedMessage id="navigation-user_management" />
87+
</Nav.Link>
6288
</NavItem>
6389
<NavItem>
64-
<Nav.Link eventKey={9}>Devices</Nav.Link>
90+
<Nav.Link eventKey={9}>
91+
<FormattedMessage id="navigation-devices" />
92+
</Nav.Link>
6593
</NavItem>
6694
<NavItem>
67-
<Nav.Link eventKey={4}>Groups</Nav.Link>
95+
<Nav.Link eventKey={4}>
96+
<FormattedMessage id="navigation-groups" />
97+
</Nav.Link>
6898
</NavItem>
6999
<NavItem>
70-
<Nav.Link eventKey={7}>UI features</Nav.Link>
100+
<Nav.Link eventKey={7}>
101+
<FormattedMessage id="navigation-UI_features" />
102+
</Nav.Link>
71103
</NavItem>
72104
<NavItem>
73-
<Nav.Link eventKey={8}>Text Templates</Nav.Link>
105+
<Nav.Link eventKey={8}>
106+
<FormattedMessage id="navigation-text_templates" />
107+
</Nav.Link>
74108
</NavItem>
75109
<NavItem>
76-
<Nav.Link eventKey={2}>Message Publish</Nav.Link>
110+
<Nav.Link eventKey={2}>
111+
<FormattedMessage id="navigation-message_publish" />
112+
</Nav.Link>
77113
</NavItem>
78114
<NavItem>
79-
<Nav.Link eventKey={5}>Load OLS Terms</Nav.Link>
115+
<Nav.Link eventKey={5}>
116+
<FormattedMessage id="navigation-load_OLS_terms" />
117+
</Nav.Link>
80118
</NavItem>
81119
{/* <NavItem>
82-
<Nav.Link eventKey={12}>Report-template Management</Nav.Link>
83-
</NavItem> */}
120+
<Nav.Link eventKey={12}>Report-template Management</Nav.Link>
121+
</NavItem> */}
84122
<NavItem>
85-
<Nav.Link eventKey={13}>Delayed Jobs</Nav.Link>
123+
<Nav.Link eventKey={13}>
124+
<FormattedMessage id="navigation-delayed_jobs" />
125+
</Nav.Link>
86126
</NavItem>
87127
<NavItem>
88-
<Nav.Link eventKey={14}>ChemSpectra Layouts</Nav.Link>
128+
<Nav.Link eventKey={14}>
129+
<FormattedMessage id="navigation-ChemSpectra_layouts" />
130+
</Nav.Link>
89131
</NavItem>
90132
<NavItem>
91-
<Nav.Link eventKey={15}>Third Party Apps</Nav.Link>
133+
<Nav.Link eventKey={15}>
134+
<FormattedMessage id="navigation-third_party_apps" />
135+
</Nav.Link>
92136
</NavItem>
93137
</Nav>
94138
);
95139
}
96140

97141
render() {
142+
const { locale } = this.state;
98143
return (
99-
<div>
100-
<Container fluid>
101-
<Row className="mb-3">
102-
<BaseNavigation />
103-
</Row>
104-
<div className="d-flex gap-4">
105-
{this.renderTree()}
106-
<div className="flex-grow-1">
107-
{this.mainContent()}
144+
<IntlProvider messages={this.getMessages()} locale={locale} defaultLocale="en">
145+
<div>
146+
<Container fluid>
147+
<Row className="mb-3">
148+
<BaseNavigation />
149+
</Row>
150+
<div className="d-flex gap-4">
151+
{this.renderTree()}
152+
<div className="flex-grow-1">
153+
{this.mainContent()}
154+
</div>
108155
</div>
109-
</div>
110-
<Row>
111-
<Col>
112-
<Notifications />
113-
</Col>
114-
</Row>
115-
</Container>
116-
</div>
156+
<Row>
157+
<Col>
158+
<Notifications />
159+
</Col>
160+
</Row>
161+
</Container>
162+
</div>
163+
</IntlProvider>
117164
);
118165
}
119166
}

‎app/javascript/src/apps/admin/i18n/de.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"navigation-user_management": "Benutzerverwaltung",
3+
"navigation-devices": "Geräte",
4+
"navigation-groups": "Gruppen",
5+
"navigation-UI_features": "UI-Funktionen",
6+
"navigation-text_templates": "Textvorlagen",
7+
"navigation-message_publish": "Nachrichten senden",
8+
"navigation-load_OLS_terms": "OLS-Begriffe laden",
9+
"navigation-delayed_jobs": "Verzögerte Jobs",
10+
"navigation-third_party_apps": "Apps von Drittanbietern",
11+
"dashboard-disk_available" : "verfügbarer Speicherplatz (MB)",
12+
"dashboard-disk_percent_used": "belegter Speicherplatz (%)",
13+
"dashboard-default_user_allocated_space": "Standard-Speicherplatz pro Benutzer (MB)"
14+
}

‎app/javascript/src/apps/admin/i18n/en.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"navigation-dashboard": "Dashboard",
3+
"navigation-user_management": "User Management",
4+
"navigation-devices": "Devices",
5+
"navigation-groups": "Groups",
6+
"navigation-UI_features": "UI Features",
7+
"navigation-text_templates": "Text Templates",
8+
"navigation-message_publish": "Message Publish",
9+
"navigation-load_OLS_terms": "Load OLS Terms",
10+
"navigation-delayed_jobs": "Delayed Jobs",
11+
"navigation-ChemSpectra_layouts": "ChemSpectra Layouts",
12+
"navigation-third_party_apps": "Third Party Apps",
13+
"dashboard-disk_available": "Disk Available (MB)",
14+
"dashboard-disk_percent_used": "Disk Percent Used (%)",
15+
"dashboard-default_user_allocated_space": "Default User Allocated Space (MB)"
16+
}

‎db/schema.rb‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2660,29 +2660,53 @@
26602660
create_trigger :logidze_on_attachments, sql_definition: <<-SQL
26612661
CREATE TRIGGER logidze_on_attachments BEFORE INSERT OR UPDATE ON public.attachments FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
26622662
SQL
2663-
create_trigger :logidze_on_research_plans, sql_definition: <<-SQL
2664-
CREATE TRIGGER logidze_on_research_plans BEFORE INSERT OR UPDATE ON public.research_plans FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2663+
create_trigger :logidze_on_chemicals, sql_definition: <<-SQL
2664+
CREATE TRIGGER logidze_on_chemicals BEFORE INSERT OR UPDATE ON public.chemicals FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
26652665
SQL
2666-
create_trigger :logidze_on_reactions_samples, sql_definition: <<-SQL
2667-
CREATE TRIGGER logidze_on_reactions_samples BEFORE INSERT OR UPDATE ON public.reactions_samples FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2666+
create_trigger :logidze_on_containers, sql_definition: <<-SQL
2667+
CREATE TRIGGER logidze_on_containers BEFORE INSERT OR UPDATE ON public.containers FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2668+
SQL
2669+
create_trigger :logidze_on_device_descriptions, sql_definition: <<-SQL
2670+
CREATE TRIGGER logidze_on_device_descriptions BEFORE INSERT OR UPDATE ON public.device_descriptions FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2671+
SQL
2672+
create_trigger :logidze_on_elemental_compositions, sql_definition: <<-SQL
2673+
CREATE TRIGGER logidze_on_elemental_compositions BEFORE INSERT OR UPDATE ON public.elemental_compositions FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2674+
SQL
2675+
create_trigger :lab_trg_layers_changes, sql_definition: <<-SQL
2676+
CREATE TRIGGER lab_trg_layers_changes AFTER UPDATE ON public.layers FOR EACH ROW EXECUTE FUNCTION lab_record_layers_changes()
26682677
SQL
26692678
create_trigger :update_users_matrix_trg, sql_definition: <<-SQL
26702679
CREATE TRIGGER update_users_matrix_trg AFTER INSERT OR UPDATE ON public.matrices FOR EACH ROW EXECUTE FUNCTION update_users_matrix()
26712680
SQL
2681+
create_trigger :logidze_on_reactions, sql_definition: <<-SQL
2682+
CREATE TRIGGER logidze_on_reactions BEFORE INSERT OR UPDATE ON public.reactions FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2683+
SQL
2684+
create_trigger :logidze_on_reactions_samples, sql_definition: <<-SQL
2685+
CREATE TRIGGER logidze_on_reactions_samples BEFORE INSERT OR UPDATE ON public.reactions_samples FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2686+
SQL
26722687
create_trigger :logidze_on_research_plan_metadata, sql_definition: <<-SQL
26732688
CREATE TRIGGER logidze_on_research_plan_metadata BEFORE INSERT OR UPDATE ON public.research_plan_metadata FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
26742689
SQL
2690+
create_trigger :logidze_on_research_plans, sql_definition: <<-SQL
2691+
CREATE TRIGGER logidze_on_research_plans BEFORE INSERT OR UPDATE ON public.research_plans FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2692+
SQL
26752693
create_trigger :logidze_on_research_plans_wellplates, sql_definition: <<-SQL
26762694
CREATE TRIGGER logidze_on_research_plans_wellplates BEFORE INSERT OR UPDATE ON public.research_plans_wellplates FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
26772695
SQL
2678-
create_trigger :logidze_on_chemicals, sql_definition: <<-SQL
2679-
CREATE TRIGGER logidze_on_chemicals BEFORE INSERT OR UPDATE ON public.chemicals FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2696+
create_trigger :logidze_on_residues, sql_definition: <<-SQL
2697+
CREATE TRIGGER logidze_on_residues BEFORE INSERT OR UPDATE ON public.residues FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
26802698
SQL
2681-
create_trigger :logidze_on_device_descriptions, sql_definition: <<-SQL
2682-
CREATE TRIGGER logidze_on_device_descriptions BEFORE INSERT OR UPDATE ON public.device_descriptions FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2699+
create_trigger :logidze_on_samples, sql_definition: <<-SQL
2700+
CREATE TRIGGER logidze_on_samples BEFORE INSERT OR UPDATE ON public.samples FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
26832701
SQL
2684-
create_trigger :lab_trg_layers_changes, sql_definition: <<-SQL
2685-
CREATE TRIGGER lab_trg_layers_changes AFTER UPDATE ON public.layers FOR EACH ROW EXECUTE FUNCTION lab_record_layers_changes()
2702+
create_trigger :logidze_on_screens, sql_definition: <<-SQL
2703+
CREATE TRIGGER logidze_on_screens BEFORE INSERT OR UPDATE ON public.screens FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2704+
SQL
2705+
create_trigger :logidze_on_wellplates, sql_definition: <<-SQL
2706+
CREATE TRIGGER logidze_on_wellplates BEFORE INSERT OR UPDATE ON public.wellplates FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
2707+
SQL
2708+
create_trigger :logidze_on_wells, sql_definition: <<-SQL
2709+
CREATE TRIGGER logidze_on_wells BEFORE INSERT OR UPDATE ON public.wells FOR EACH ROW WHEN ((COALESCE(current_setting('logidze.disabled'::text, true), ''::text) <> 'on'::text)) EXECUTE FUNCTION logidze_logger('null', 'updated_at')
26862710
SQL
26872711

26882712
create_view "v_samples_collections", sql_definition: <<-SQL

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"react-html-id": "^0.1.5",
8383
"react-inlinesvg": "0.8.4",
8484
"react-input-autosize": "1.1.0",
85+
"react-intl": "^7.1.14",
8586
"react-json-editor-ajrm": "^2.5.10",
8687
"react-markdown": "^6.0.2",
8788
"react-molviewer": "^1.1.3",

0 commit comments

Comments
 (0)