Merge pull request #251 from SFTtech/milo/remove-deprecations

remove usages of deprecated mui components
SFTtech · Jan 2, 2025 · 269443b · 269443b
2 parents da64f61 + 28e2b9d
commit 269443b
Show file tree

Hide file tree

Showing 64 changed files with 474 additions and 407 deletions.
diff --git a/.github/workflows/frontend.yaml b/.github/workflows/frontend.yaml
@@ -17,7 +17,7 @@ jobs:
           cache: "npm"
           cache-dependency-path: frontend/package-lock.json
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --foreground-scripts
       - name: Check JavaScript formatting
         run: npx prettier --check .
 
@@ -35,7 +35,7 @@ jobs:
           cache: "npm"
           cache-dependency-path: frontend/package-lock.json
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --foreground-scripts
       - name: Build web app
         run: npx nx run-many --target test
 
@@ -53,7 +53,7 @@ jobs:
           cache: "npm"
           cache-dependency-path: frontend/package-lock.json
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --foreground-scripts
       - name: Build web app
         run: npx nx run-many --target lint
 
@@ -71,7 +71,7 @@ jobs:
           cache: "npm"
           cache-dependency-path: frontend/package-lock.json
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --foreground-scripts
       - name: Build web app
         run: npx nx build web
 
@@ -90,7 +90,7 @@ jobs:
   #         cache-dependency-path: frontend/package-lock.json
 
   #     - name: Install dependencies
-  #       run: npm ci
+  #       run: npm ci --foreground-scripts
 
   #     - name: Set up JDK 17
   #       uses: actions/setup-java@v3

diff --git a/.github/workflows/push_on_master.yaml b/.github/workflows/push_on_master.yaml
@@ -64,7 +64,7 @@ jobs:
         cache-dependency-path: frontend/package-lock.json
 
     - name: Install dependencies
-      run: npm ci
+      run: npm ci --foreground-scripts
       working-directory: frontend
 
     - name: Build API Image

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,12 +4,15 @@
 
 [Compare the full difference.](https://github.com/SFTtech/abrechnung/compare/v0.14.0...HEAD)
 
-**BREAKING**
+**BREAKING CHANGES**
+
 - changed config structure to only include the reverse-proxy base_url once in the `api` section
 - drop python 3.10 support
 
-**OTHER**
-- add Spanish and Tamil as supported languages
+**Features**
+
+- add Spanish, Tamil and Ukrainian as supported languages
+- improve translations of datetimes
 - rework group settings to just be a single page
 - allow archiving of groups
 

diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -9,7 +9,7 @@
     "overrides": [
         {
             "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-            "extends": ["eslint:recommended"],
+            "extends": ["eslint:recommended", "plugin:deprecation/recommended"],
             "rules": {
                 "@nx/enforce-module-boundaries": [
                     "error",
@@ -30,7 +30,7 @@
             "files": ["*.ts", "*.tsx"],
             "extends": ["plugin:@nx/typescript"],
             "rules": {
-                "@typescript-eslint/no-explicit-any": ["warn"],
+                "@typescript-eslint/no-explicit-any": "warn",
                 "@typescript-eslint/no-extra-semi": "error",
                 "no-extra-semi": "off"
             }

diff --git a/frontend/apps/mobile/.eslintrc.json b/frontend/apps/mobile/.eslintrc.json
@@ -1,17 +1,12 @@
 {
     "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
-    "ignorePatterns": ["!**/*", "public", ".cache", "node_modules"],
+    "ignorePatterns": ["!**/*", "public", ".cache", "node_modules", "babel.config.js", "metro.config.js"],
     "overrides": [
         {
             "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-            "rules": {}
-        },
-        {
-            "files": ["*.ts", "*.tsx"],
-            "rules": {}
-        },
-        {
-            "files": ["*.js", "*.jsx"],
+            "parserOptions": {
+                "project": ["apps/mobile/tsconfig.*?.json"]
+            },
             "rules": {}
         }
     ]

diff --git a/frontend/apps/mobile/tsconfig.spec.json b/frontend/apps/mobile/tsconfig.spec.json
@@ -6,6 +6,7 @@
         "types": ["jest", "node"]
     },
     "include": [
+        "test-setup.ts",
         "jest.config.ts",
         "src/**/*.test.ts",
         "src/**/*.spec.ts",

diff --git a/frontend/apps/web/.eslintrc.json b/frontend/apps/web/.eslintrc.json
@@ -4,14 +4,9 @@
     "overrides": [
         {
             "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-            "rules": {}
-        },
-        {
-            "files": ["*.ts", "*.tsx"],
-            "rules": {}
-        },
-        {
-            "files": ["*.js", "*.jsx"],
+            "parserOptions": {
+                "project": ["apps/web/tsconfig.*?.json"]
+            },
             "rules": {}
         }
     ]

diff --git a/frontend/apps/web/src/app/authenticated-layout/SidebarGroupList.tsx b/frontend/apps/web/src/app/authenticated-layout/SidebarGroupList.tsx
@@ -3,7 +3,7 @@ import { ListItemLink } from "@/components/style";
 import { useAppSelector } from "@/store";
 import { selectGroups, selectIsGuestUser } from "@abrechnung/redux";
 import { Add } from "@mui/icons-material";
-import { Grid, IconButton, List, ListItem, ListItemText, Tooltip } from "@mui/material";
+import { IconButton, List, ListItem, ListItemText, Tooltip } from "@mui/material";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -31,28 +31,24 @@ export const SidebarGroupList: React.FC<Props> = ({ activeGroupId }) => {
         <>
             <List sx={{ pt: 0 }}>
                 <ListItemLink to="/" sx={{ pt: 0, pb: 0 }}>
-                    <ListItemText secondary="Groups" />
+                    <ListItemText secondary={t("groups.list.header")} />
                 </ListItemLink>
-                <div>
-                    {groups.map((it) => (
-                        <ListItemLink
-                            key={it.id}
-                            to={`/groups/${it.id}`}
-                            selected={activeGroupId != null && activeGroupId === it.id}
-                        >
-                            <ListItemText primary={it.name} />
-                        </ListItemLink>
-                    ))}
-                </div>
+                {groups.map((it) => (
+                    <ListItemLink
+                        key={it.id}
+                        to={`/groups/${it.id}`}
+                        selected={activeGroupId != null && activeGroupId === it.id}
+                    >
+                        <ListItemText primary={it.name} />
+                    </ListItemLink>
+                ))}
                 {!isGuest && (
-                    <ListItem sx={{ padding: 0 }}>
-                        <Grid container justifyContent="center">
-                            <Tooltip title={t("groups.addGroup")}>
-                                <IconButton size="small" onClick={openGroupCreateModal}>
-                                    <Add />
-                                </IconButton>
-                            </Tooltip>
-                        </Grid>
+                    <ListItem sx={{ justifyContent: "center" }}>
+                        <Tooltip title={t("groups.addGroup")}>
+                            <IconButton size="small" onClick={openGroupCreateModal}>
+                                <Add />
+                            </IconButton>
+                        </Tooltip>
                     </ListItem>
                 )}
             </List>

diff --git a/frontend/apps/web/src/components/AddNewTagDialog.tsx b/frontend/apps/web/src/components/AddNewTagDialog.tsx
@@ -30,7 +30,7 @@ export const AddNewTagDialog: React.FC<Props> = ({ open, onCreate, onClose }) =>
     };
 
     const onKeyUp = (key: React.KeyboardEvent) => {
-        if (key.keyCode === 13) {
+        if (key.code === "Enter") {
             handleSave();
         }
     };
@@ -55,7 +55,7 @@ export const AddNewTagDialog: React.FC<Props> = ({ open, onCreate, onClose }) =>
                     value={tag}
                     error={error}
                     onKeyUp={onKeyUp}
-                    helperText={error ? "please input a tag name" : null}
+                    helperText={error ? t("common.tagNameRequiredError") : null}
                     onChange={handleChange}
                 />
             </DialogContent>

diff --git a/frontend/apps/web/src/components/LanguageSelect.tsx b/frontend/apps/web/src/components/LanguageSelect.tsx
@@ -24,6 +24,8 @@ export const LanguageSelect: React.FC<LanguageSelectProps> = (props) => {
             <MenuItem value="de-DE">{t("languages.de")}</MenuItem>
             <MenuItem value="es-ES">{t("languages.es")}</MenuItem>
             <MenuItem value="ta-LK">{t("languages.ta")}</MenuItem>
+            <MenuItem value="uk-UA">{t("languages.uk")}</MenuItem>
+            {/* <MenuItem value="bg-BG">{t("languages.bg")}</MenuItem> */}
         </Select>
     );
 };
diff --git a/frontend/apps/web/src/components/ShareSelect.tsx b/frontend/apps/web/src/components/ShareSelect.tsx
@@ -10,7 +10,7 @@ import {
     Chip,
     Divider,
     FormControlLabel,
-    Grid,
+    Grid2 as Grid,
     IconButton,
     InputAdornment,
     Table,
@@ -73,8 +73,8 @@ const ShareSelectRow: React.FC<RowProps> = ({
                     to={getAccountLink(account.group_id, account.type, account.id)}
                 >
                     <Grid container direction="row" alignItems="center">
-                        <Grid item>{getAccountIcon(account.type)}</Grid>
-                        <Grid item sx={{ ml: 1, display: "flex", flexDirection: "column" }}>
+                        <Grid>{getAccountIcon(account.type)}</Grid>
+                        <Grid display="flex" flexDirection="column" sx={{ ml: 1 }}>
                             <Typography variant="body2" component="span">
                                 {account.name}
                             </Typography>
@@ -321,11 +321,16 @@ export const ShareSelect: React.FC<ShareSelectProps> = ({
                                 )}
                             </TableCell>
                             <TableCell width="100px">
-                                <FormControlLabel
-                                    control={<Checkbox onChange={handleSelectAll} />}
-                                    checked={nSelected === accounts.length}
-                                    label={t("common.shares")}
-                                />
+                                {editable ? (
+                                    <FormControlLabel
+                                        control={<Checkbox onChange={handleSelectAll} />}
+                                        checked={nSelected === accounts.length}
+                                        disabled={!editable}
+                                        label={t("common.shares")}
+                                    />
+                                ) : (
+                                    t("common.shares")
+                                )}
                             </TableCell>
                             {additionalShareInfoHeader ?? null}
                         </TableRow>

diff --git a/frontend/apps/web/src/components/TagSelector.tsx b/frontend/apps/web/src/components/TagSelector.tsx
@@ -62,15 +62,17 @@ export const TagSelector: React.FC<Props> = ({
                 select
                 variant="standard"
                 value={value}
-                SelectProps={{
-                    multiple: true,
-                    renderValue: (selected: unknown) => (
-                        <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
-                            {(selected as string[]).map((value) => (
-                                <Chip key={value} label={value} variant="outlined" {...chipProps} />
-                            ))}
-                        </Box>
-                    ),
+                slotProps={{
+                    select: {
+                        multiple: true,
+                        renderValue: (selected: unknown) => (
+                            <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
+                                {(selected as string[]).map((value) => (
+                                    <Chip key={value} label={value} variant="outlined" {...chipProps} />
+                                ))}
+                            </Box>
+                        ),
+                    },
                 }}
                 onChange={handleChange}
                 disabled={!editable}

diff --git a/frontend/apps/web/src/components/accounts/AccountClearingListEntry.tsx b/frontend/apps/web/src/components/accounts/AccountClearingListEntry.tsx
@@ -1,13 +1,12 @@
 import { selectAccountBalances, useGroupCurrencySymbol } from "@abrechnung/redux";
 import { Box, ListItemAvatar, ListItemText, Tooltip, Typography } from "@mui/material";
-import { DateTime } from "luxon";
 import React from "react";
 import { balanceColor } from "@/core/utils";
 import { useAppSelector } from "@/store";
 import { getAccountLink } from "@/utils";
 import { ListItemLink, ClearingAccountIcon } from "../style";
 import { useTranslation } from "react-i18next";
-import { useFormatCurrency } from "@/hooks";
+import { useFormatCurrency, useFormatDatetime } from "@/hooks";
 import { ClearingAccount } from "@abrechnung/types";
 
 interface Props {
@@ -19,6 +18,7 @@ interface Props {
 export const AccountClearingListEntry: React.FC<Props> = ({ groupId, accountId, clearingAccount }) => {
     const { t } = useTranslation();
     const formatCurrency = useFormatCurrency();
+    const formatDatetime = useFormatDatetime();
     const balances = useAppSelector((state) => selectAccountBalances(state, groupId));
     const currency_symbol = useGroupCurrencySymbol(groupId);
     if (!currency_symbol) {
@@ -39,9 +39,11 @@ export const AccountClearingListEntry: React.FC<Props> = ({ groupId, accountId,
                     </Typography>
                 }
                 secondary={
-                    <Box sx={{ display: "flex", flexDirection: "column" }}>
+                    <Box component="span" display="flex" flexDirection="column">
                         <span>{clearingAccount.description}</span>
-                        {clearingAccount.date_info != null && <span>{clearingAccount.date_info}</span>}
+                        {clearingAccount.date_info != null && (
+                            <span>{formatDatetime(clearingAccount.date_info, "date")}</span>
+                        )}
                     </Box>
                 }
             />
@@ -58,10 +60,8 @@ export const AccountClearingListEntry: React.FC<Props> = ({ groupId, accountId,
                     </Typography>
                     <br />
                     <Typography component="span" sx={{ typography: "body2", color: "text.secondary" }}>
-                        {t("common.lastChangedWithTime", "", {
-                            datetime: DateTime.fromISO(clearingAccount.last_changed).toLocaleString(
-                                DateTime.DATETIME_FULL
-                            ),
+                        {t("common.lastChangedWithTime", {
+                            datetime: formatDatetime(clearingAccount.last_changed, "full"),
                         })}
                     </Typography>
                 </Typography>