Docker image for apm

.dockerignore

@@ -24,6 +24,10 @@ contrib
 docker-examples
 website
 systemd
+e2e
+assets
+types
+scripts
 
 # output from test runs and similar things
 *.log

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "endOfLine": "lf",
+  "endOfLine": "auto",
   "useTabs": false,
   "printWidth": 100,
   "tabWidth": 2,

.vscode/settings.json

@@ -1,10 +1,14 @@
 // Place your settings in this file to overwrite default and user settings.
 {
   "files.exclude": {
+    "**/node_modules/**/node_modules": true,
     "**/build": false,
     "**/coverage": true,
     ".idea": true,
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": false,
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
 }

Dockerfile

@@ -11,7 +11,7 @@ RUN apk --no-cache add openssl ca-certificates wget && \
 
 WORKDIR /opt/verdaccio-build
 COPY . .
-RUN npm -g i pnpm@8.9.0 && \
+RUN npm -g i pnpm@8.14.0 && \
     pnpm config set registry $VERDACCIO_BUILD_REGISTRY && \
     pnpm install --frozen-lockfile --ignore-scripts && \
     rm -Rf test && \
@@ -40,7 +40,8 @@ RUN mkdir -p /verdaccio/storage /verdaccio/plugins /verdaccio/conf
 COPY --from=builder /opt/verdaccio-build .
 
 RUN ls packages/config/src/conf
-ADD packages/config/src/conf/docker.yaml /verdaccio/conf/config.yaml
+ADD config.yaml /verdaccio/conf/config.yaml
+ADD abappm /verdaccio/abappm
 
 RUN adduser -u $VERDACCIO_USER_UID -S -D -h $VERDACCIO_APPDIR -g "$VERDACCIO_USER_NAME user" -s /sbin/nologin $VERDACCIO_USER_NAME && \
     chmod -R +x $VERDACCIO_APPDIR/packages/verdaccio/bin $VERDACCIO_APPDIR/docker-bin && \

abappm/README.md

@@ -0,0 +1,3 @@
+# abapPM
+
+Assets for Verdaccio

config.yaml

@@ -0,0 +1,225 @@
+#
+# This is the default configuration file. It allows all users to do anything,
+# please read carefully the documentation and best practices to
+# improve security.
+#
+# Do not configure host and port under `listen` in this file
+# as it will be ignored when using docker.
+# see https://verdaccio.org/docs/en/docker#docker-and-custom-port-configuration
+#
+# Look here for more config file examples:
+# https://github.com/verdaccio/verdaccio/tree/5.x/conf
+#
+# Read about the best practices
+# https://verdaccio.org/docs/best
+
+# path to a directory with all packages
+storage: /verdaccio/storage/data
+
+# path to a directory with plugins to include
+plugins: /verdaccio/plugins
+
+# https://verdaccio.org/docs/webui
+web:
+  enable: true
+  title: apm - A Package Manager for ABAP
+  logo: /verdaccio/abappm/apm_banner_gray.png
+  favicon: /verdaccio/abappm/apm.ico
+  primary_color: '#a0a0a0'
+  darkMode: true
+  gravatar: true
+  # by default packages are ordercer ascendant (asc|desc)
+  # sort_packages: asc
+  # convert your UI to the dark side
+  # darkMode: true
+  # html_cache: true
+  # by default all features are displayed
+  # login: true
+  pkgManagers:
+    - apm
+  showInfo: false
+  # showSettings: true
+  # In combination with darkMode you can force specific theme
+  # showThemeSwitch: true
+  # showFooter: true
+  # showSearch: false
+  # showRaw: true
+  # showDownloadTarball: true
+  #  HTML tags injected after manifest <scripts/>
+  # scriptsBodyAfter:
+  #    - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'
+  #  HTML tags injected before ends </head>
+  metaScripts:
+    - '<meta name="robots" content="noindex" />'
+  #    - '<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>'
+  #    - '<script type="text/javascript" src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"></script>'
+  #  HTML tags injected first child at <body/>
+  scriptsbodyBefore:
+    - '<div id="beta" style="color:white;background-color:blue;margin:auto;text-align:center;font-size:12px;"><strong>***BETA***</strong>  All published packages will be deleted before go-live!  <strong>***BETA***</strong></div>'
+  #  Public path for template manifest scripts (only manifest)
+  publicPath: https://registry.abappm.com/
+
+auth:
+  htpasswd:
+    file: /verdaccio/storage/htpasswd
+    # Maximum amount of users allowed to register, defaults to "+inf".
+    # You can set this to -1 to disable registration.
+    max_users: 10
+    algorithm: bcrypt
+
+# https://verdaccio.org/docs/configuration#uplinks
+# a list of other known repositories we can talk to
+uplinks:
+
+# Learn how to protect your packages
+# https://verdaccio.org/docs/protect-your-dependencies/
+# https://verdaccio.org/docs/configuration#packages
+packages:
+  '@*/*':
+    # scoped packages
+    access: none
+    publish: none
+    unpublish: none
+    #access: $all
+    #publish: $authenticated
+    #unpublish: $authenticated
+    #proxy: npmjs
+
+  '**':
+    # allow all users (including non-authenticated users) to read and
+    # publish all packages
+    #
+    # you can specify usernames/groupnames (depending on your auth plugin)
+    # and three keywords: "$all", "$anonymous", "$authenticated"
+    access: $all
+
+    # allow all known users to publish/publish packages
+    # (anyone can register by default, remember?)
+    publish: $authenticated
+    unpublish: $authenticated
+
+    # if package is not available locally, proxy requests to 'npmjs' registry
+    # proxy: npmjs
+
+# To improve your security configuration and  avoid dependency confusion
+# consider removing the proxy property for private packages
+# https://verdaccio.org/docs/best#remove-proxy-to-increase-security-at-private-packages
+
+# https://verdaccio.org/docs/configuration#server
+# You can specify HTTP/1.1 server keep alive timeout in seconds for incoming connections.
+# A value of 0 makes the http server behave similarly to Node.js versions prior to 8.0.0, which did not have a keep-alive timeout.
+# WORKAROUND: Through given configuration you can workaround following issue https://github.com/verdaccio/verdaccio/issues/301. Set to 0 in case 60 is not enough.
+server:
+  keepAliveTimeout: 60
+
+# https://verdaccio.org/docs/configuration#offline-publish
+publish:
+  check_owner: true
+#   allow_offline: false
+
+# https://verdaccio.org/docs/configuration#url-prefix
+# url_prefix: /verdaccio/
+# VERDACCIO_PUBLIC_URL='https://somedomain.org';
+# url_prefix: '/my_prefix'
+# // url -> https://somedomain.org/my_prefix/
+# VERDACCIO_PUBLIC_URL='https://somedomain.org';
+# url_prefix: '/'
+# // url -> https://somedomain.org/
+# VERDACCIO_PUBLIC_URL='https://somedomain.org/first_prefix';
+# url_prefix: '/second_prefix'
+# // url -> https://somedomain.org/second_prefix/'
+url_prefix: '/'
+
+# https://verdaccio.org/docs/configuration#security
+security:
+  api:
+    legacy: false
+    jwt:
+      sign:
+        expiresIn: 29d
+  #       verify:
+  #         someProp: [value]
+  web:
+    sign:
+      expiresIn: 1h # 1 hour by default
+#     verify:
+#       someProp: [value]
+
+# https://verdaccio.org/docs/configuration#user-rate-limit
+# userRateLimit:
+#   windowMs: 50000
+#   max: 1000
+
+# https://verdaccio.org/docs/configuration#max-body-size
+max_body_size: 1mb
+
+# https://verdaccio.org/docs/configuration#listen-port
+# listen:
+# - localhost:4873            # default value
+# - http://localhost:4873     # same thing
+# - 0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
+# - https://example.org:4873  # if you want to use https
+# - "[::1]:4873"                # ipv6
+# - unix:/tmp/verdaccio.sock    # unix socket
+
+# The HTTPS configuration is useful if you do not consider use a HTTP Proxy
+# https://verdaccio.org/docs/configuration#https
+# https:
+#   key: ./path/verdaccio-key.pem
+#   cert: ./path/verdaccio-cert.pem
+#   ca: ./path/verdaccio-csr.pem
+
+# https://verdaccio.org/docs/configuration#proxy
+# http_proxy: http://something.local/
+# https_proxy: https://something.local/
+
+# https://verdaccio.org/docs/configuration#notifications
+# notify:
+#   method: POST
+#   headers: [{ "Content-Type": "application/json" }]
+#   endpoint: https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken
+#   content: '{"color":"green","message":"New package published: * {{ name }}*","notify":true,"message_format":"text"}'
+
+# https://verdaccio.org/docs/logger
+# log settings
+log: { type: stdout, format: pretty, level: http }
+# { type: file, path: /verdaccio/storage/verdaccio.log, level: info }
+
+# experiments:
+#  # support for npm token command
+#  token: false
+#  # enable tarball URL redirect for hosting tarball with a different server, the tarball_url_redirect can be a template string
+#  tarball_url_redirect: 'https://mycdn.com/verdaccio/${packageName}/${filename}'
+#  # the tarball_url_redirect can be a function, takes packageName and filename and returns the url, when working with a js configuration file
+#  tarball_url_redirect(packageName, filename) {
+#    const signedUrl = // generate a signed url
+#    return signedUrl;
+#  }
+
+# translate your registry, api i18n not available yet
+# i18n:
+# list of the available translations https://github.com/verdaccio/verdaccio/blob/master/packages/plugins/ui-theme/src/i18n/ABOUT_TRANSLATIONS.md
+#   web: en-US
+
+middlewares:
+  audit:
+    enabled: true
+#  install-counts:
+#    enabled: true
+#    redis:
+#      host: red-ckfit036fquc73egihn0
+#      port: 6379
+
+# Using Redis as storage
+# https://github.com/openupm/verdaccio-redis-storage
+#store:
+#  storage-proxy:
+#    database_backend: redis-storage
+#    search_backend: redis-storage
+#    packument_backend: redis-storage
+#    tarball_backend: '@verdaccio/local-storage'
+#    backends:
+#      '@verdaccio/local-storage': {}
+#      redis-storage:
+#        host: red-ckfit036fquc73egihn0
+#        port: 6379

jest/config.js

@@ -1,5 +1,7 @@
 module.exports = {
   moduleFileExtensions: ['ts', 'js'],
+  maxWorkers: 3,
+  testTimeout: 20000,
   transform: {
     '^.+\\.(js|ts)$': 'babel-jest',
   },

packages/core/types/src/configuration.ts

@@ -77,7 +77,7 @@ export type FlagsConfig = {
   changePassword?: boolean;
 };
 
-export type PackageManagers = 'pnpm' | 'yarn' | 'npm';
+export type PackageManagers = 'pnpm' | 'yarn' | 'npm' | 'apm';
 
 // FUTURE: WebConf and TemplateUIOptions should be merged .
 export type CommonWebConf = {

packages/plugins/ui-theme/package.json

@@ -39,6 +39,7 @@
     "friendly-errors-webpack-plugin": "1.7.0",
     "harmony-reflect": "1.6.2",
     "highlight.js": "11.9.0",
+    "highlightjs-sap-abap": "0.3.0",
     "history": "4.10.1",
     "html-webpack-plugin": "5.6.0",
     "i18next": "20.6.1",

packages/plugins/ui-theme/src/i18n/crowdin/ui.json

@@ -132,9 +132,11 @@
       "title": "Contributors"
     },
     "engines": {
+      "apm-version": "apm Version",
       "npm-version": "Npm Version",
       "pnpm-version": "Pnpm Version",
       "yarn-version": "Yarn Version",
+      "abap": "ABAP Release",
       "node-js": "Node.js"
     }
   },

packages/ui-components/package.json

@@ -9,6 +9,7 @@
   "types": "build/index.d.ts",
   "scripts": {
     "test": "cross-env TZ=UTC jest --config jest/jest.config.js",
+    "test:snap": "cross-env TZ=UTC jest --config jest/jest.config.js --updateSnapshot",
     "test:html": "cross-env TZ=UTC jest --config jest/jest.config.js --coverage-reporters=html",
     "clean": "rimraf ./build",
     "type-check": "tsc --noEmit -p tsconfig.build.json",
@@ -36,6 +37,7 @@
     "dayjs": "1.11.10",
     "dompurify": "3.0.8",
     "highlight.js": "11.9.0",
+    "highlightjs-sap-abap": "0.3.0",
     "history": "4.10.1",
     "i18next": "20.6.1",
     "js-base64": "3.7.6",

packages/ui-components/src/components/ActionBar/ActionBarAction.tsx

@@ -20,7 +20,7 @@ export const Fab = styled(FabMUI)<{ theme?: Theme }>(({ theme }) => ({
   '&:hover': {
     color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
   },
-  color: theme?.palette.white,
+  color: theme?.palette.mode === 'light' ? theme?.palette.black : theme?.palette.white,
 }));
 
 type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL' | 'RAW_DATA';

packages/ui-components/src/components/Engines/Engines.tsx

@@ -6,7 +6,7 @@ import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { PackageMetaInterface } from '../../types/packageMeta';
-import { NodeJS, Npm, Pnpm, Yarn } from '../Icons';
+import { ABAP as Abap, Apm, NodeJS, Npm, Pnpm, Yarn } from '../Icons';
 import { EngineListItem, StyledText } from './styles';
 
 /**
@@ -36,7 +36,14 @@ const EngineItem: FC<EngineItemProps> = ({ title, element, engineText }) => (
 
 interface EngineMetadata extends Omit<PackageMetaInterface, 'latest'> {
   latest: {
-    engines?: { npm?: string; node?: string; pnpm?: string; yarn?: string };
+    engines?: {
+      abap?: string;
+      apm?: string;
+      npm?: string;
+      node?: string;
+      pnpm?: string;
+      yarn?: string;
+    };
   };
 }
 
@@ -61,6 +68,22 @@ const Engine: React.FC<Props> = ({ packageMeta }) => {
 
   return (
     <Grid container={true}>
+      {engines.abap ? (
+        <EngineItem
+          element={<Abap />}
+          engineText={engines.abap}
+          title={t('sidebar.engines.abap')}
+        />
+      ) : null}
+
+      {engines.apm ? (
+        <EngineItem
+          element={<Apm />}
+          engineText={engines.apm}
+          title={t('sidebar.engines.apm-version')}
+        />
+      ) : null}
+
       {engines.node ? (
         <EngineItem
           element={<NodeJS />}

packages/ui-components/src/components/Engines/styles.ts

@@ -6,7 +6,7 @@ import { Theme } from '../../Theme';
 
 export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
   fontWeight: props.theme?.fontWeight.bold,
-  textTransform: 'capitalize',
+  // textTransform: 'capitalize', // apm
 }));
 
 export const EngineListItem = styled(ListItem)({

packages/ui-components/src/components/Icons/DevsIcons/ABAP.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const icon = require('./abap.svg');
+
+export function ABAP() {
+  return <img alt="ABAP" height="20" src={icon} width="20" />;
+}

packages/ui-components/src/components/Icons/DevsIcons/ABAPModule.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const icon = require('./abapmodule.svg');
+
+export function ABAPModule() {
+  return <img alt="ABAP module" height="15" src={icon} width="58" />;
+}

packages/ui-components/src/components/Icons/DevsIcons/abap.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="240px" height="240px">
+    <g>
+        <path fill="#1976d2" d="M0,12v24h25l23-24H0z"/>
+    </g>
+</svg>

packages/ui-components/src/components/Icons/DevsIcons/abapmodule.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 112 32" width="112" height="32" xmlns="http://www.w3.org/2000/svg">
+  <rect width="112" height="32" style="fill: rgb(0, 68, 204);"/>
+  <text style="fill: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 28px; font-weight: 700; white-space: pre;" x="6" y="26">module</text>
+</svg>

packages/ui-components/src/components/Icons/DevsIcons/index.ts

@@ -3,3 +3,5 @@ export { CommonJS } from './CommonJS';
 export { ES6Modules } from './ES6Module';
 export { NodeJS } from './NodeJS';
 export { Git } from './Git';
+export { ABAP } from './ABAP';
+export { ABAPModule } from './ABAPModule';

packages/ui-components/src/components/Icons/Managers/Apm.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const icon = require('./apm.svg');
+
+export function Apm() {
+  return <img alt="apm package manager" height="20" src={icon} width="20" />;
+}

packages/ui-components/src/components/Icons/Managers/apm.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 232 255" width="232" height="255">
+  <g>
+    <path id="1b" d="M 0 62 L 116 120 L 116 254 L 0 196 L 0 62 Z" stroke="#808080" stroke-width="2.5" fill="#000000" stroke-miterlimit="1"/>
+    <path id="1w" d="M 116 120 L 116 254 L 232 196 L 232 62 L 116 120 Z" stroke="#808080" stroke-width="2.5" fill="#FFFFFF" stroke-miterlimit="1"/>
+    <path id="1g" d="M 0 62 L 116 2 L 232 62 L 116 120 L 0 62 Z" stroke="#808080" stroke-width="2.5" fill="#808080" stroke-miterlimit="1"/>
+  </g>
+</svg>

packages/ui-components/src/components/Icons/Managers/index.ts

@@ -1,3 +1,4 @@
+export { Apm } from './Apm';
 export { Npm } from './Npm';
 export { Pnpm } from './Pnpm';
 export { Yarn } from './Yarn';

packages/ui-components/src/components/Install/Install.tsx

@@ -36,8 +36,9 @@ const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) =
 
   const hasNpm = configOptions?.pkgManagers?.includes('npm');
   const hasYarn = configOptions?.pkgManagers?.includes('yarn');
-  const hasPnpm = configOptions?.pkgManagers?.includes('pnpm') ?? true;
+  const hasPnpm = configOptions?.pkgManagers?.includes('pnpm');
-  const hasPkgManagers = hasNpm || hasPnpm || hasYarn;
+  const hasApm = configOptions?.pkgManagers?.includes('apm'); // apm
+  const hasPkgManagers = hasNpm || hasPnpm || hasYarn || hasApm; // apm
 
   return hasPkgManagers ? (
     <>
@@ -50,6 +51,13 @@ const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) =
           </Wrapper>
         }
       >
+        {hasApm && (
+          <InstallListItem
+            dependencyManager={DependencyManager.APM}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
+        )}
         {hasNpm && (
           <InstallListItem
             dependencyManager={DependencyManager.NPM}

packages/ui-components/src/components/Install/InstallListItem.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import { useSettings } from '../../providers/PersistenceSettingProvider';
 import CopyToClipBoard from '../CopyClipboard';
-import { Npm, Pnpm, Yarn } from '../Icons';
+import { Apm, Npm, Pnpm, Yarn } from '../Icons';
 
 const InstallItem = styled(ListItem)({
   padding: 0,
@@ -28,6 +28,7 @@ const PackageMangerAvatar = styled(Avatar)({
 });
 
 export enum DependencyManager {
+  APM = 'apm',
   NPM = 'npm',
   YARN = 'yarn',
   PNPM = 'pnpm',
@@ -59,6 +60,23 @@ const InstallListItem: React.FC<Interface> = ({
   const isLatest = localSettings[packageName]?.latest ?? false;
   const isGlobal = localSettings[packageName]?.global ?? false;
   switch (dependencyManager) {
+    case DependencyManager.APM:
+      return (
+        <InstallItem data-testid={'installListItem-apm'}>
+          <PackageMangerAvatar alt="apm" sx={{ bgcolor: theme.palette.white }}>
+            <Apm />
+          </PackageMangerAvatar>
+          <InstallListItemText
+            primary={
+              <CopyToClipBoard
+                dataTestId="installApm"
+                text={`apm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
+                title={`apm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
+              />
+            }
+          />
+        </InstallItem>
+      );
     case DependencyManager.NPM:
       return (
         <InstallItem data-testid={'installListItem-npm'}>

packages/ui-components/src/components/Readme/utils.ts

@@ -7,6 +7,10 @@ const marked = new Marked(
     async: false,
     highlight(code, lang) {
       const hljs = require('highlight.js');
+      // >>> apm
+      const hlabap = require('highlightjs-sap-abap');
+      hljs.registerLanguage('abap', hlabap);
+      // <<< apm
       const language = hljs.getLanguage(lang) ? lang : 'plaintext';
       return hljs.highlight(code, { language }).value;
     },

packages/ui-components/src/components/Search/styles.ts

@@ -14,7 +14,10 @@ export const StyledTextField = styled(TextField)<{ theme?: Theme }>((props) => (
       border: 'none',
     },
     ':after': {
-      borderColor: props.theme?.palette.white,
+      borderColor:
+        props.theme?.palette.mode === 'light'
+          ? props.theme?.palette.black
+          : props.theme?.palette.white,
     },
     ':hover:before': {
       content: 'none',
@@ -31,11 +34,15 @@ export const StyledTextField = styled(TextField)<{ theme?: Theme }>((props) => (
   },
   '& .MuiInputBase-input': {
     [`@media screen and (min-width: ${props.theme?.breakPoints.medium}px)`]: {
-      color: props.theme?.palette.white,
+      color:
+        props.theme?.palette.mode === 'light'
+          ? props.theme?.palette.black
+          : props.theme?.palette.white,
     },
   },
 }));
 
 export const StyledInputAdornment = styled(InputAdornment)<{ theme?: Theme }>((props) => ({
-  color: props.theme?.palette.white,
+  color:
+    props.theme?.palette.mode === 'light' ? props.theme?.palette.black : props.theme?.palette.white,
 }));

packages/ui-components/src/components/SideBarTitle/SideBarTitle.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Theme } from '../../Theme';
 import Heading from '../Heading';
-import { CommonJS, ES6Modules, TypeScript } from '../Icons';
+import { ABAPModule, CommonJS, TypeScript } from '../Icons';
 import { formatDate, formatDateDistance } from './utils';
 
 export type ModuleType = 'commonjs' | 'module';
@@ -34,7 +34,7 @@ const ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {
   } else if (module === 'module') {
     return (
       <Icon>
-        <ES6Modules />
+        <ABAPModule />
       </Icon>
     );
   } else {

packages/ui-components/src/sections/Header/styles.ts

@@ -47,7 +47,7 @@ export const SearchWrapper = styled('div')({
 export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
     theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
-  color: theme?.palette.white,
+  color: theme?.palette.mode === 'light' ? theme?.palette.black : theme?.palette.white,
   minHeight: 60,
   display: 'flex',
   justifyContent: 'center',

packages/ui-components/src/test/test-react-testing-library.tsx

@@ -1,4 +1,5 @@
 import { StyledEngineProvider } from '@mui/material/styles';
+import { configure } from '@testing-library/dom';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';
@@ -10,6 +11,8 @@ import PersistenceSettingProvider from '../providers/PersistenceSettingProvider'
 import { Store } from '../store/store';
 import i18nConfig from './i18n-config';
 
+configure({ asyncUtilTimeout: 10000 });
+
 const renderWithStore = (ui: React.ReactElement<any>, store: Store) =>
   render(ui, {
     wrapper: ({ children }) => (