feat(global): INFRA-1100 bump react to 18.3 and Next.js to latest (#6509)

* feat(global): INFRA-1100 make OSS apps work on latest next

* feat: INFRA-1100 make submodules worn on latest next

* feat(global): bump react to 18.x

* deps(ui): bump storybook to latest

* feat(condo): bump next to latest in condo

* feat(condo): make condo buildable on Next@15 and React@18

* deps(condo): INFRA-1100 bump next to latest

* deps(global): INFRA-1100 remove rc-table

* deps(global): INFRA-1100 make condo work on latest Next

* chore(global): INFRA-1100 sync yarn.lock

* chore(global): INFRA-1100 bump next 15.4.5 -> 15.4.6

* chore(global): INFRA-1100 sync yarn.lock

* chore(global): INFRA-1100 fix semgrep and deps linting issues

* refactor(global): INFRA-1100 remove legacy recorder

* refactor(global): INFRA-1100 remove redundant dep and temp disable windows build

* chore(global): INFRA-1100 sync submodules to main

Author: SavelevMatthew

.github/workflows/nodejs.condo.ci.yml

@@ -284,7 +284,9 @@ jobs:
     if: ${{ needs.detect-changes.outputs.open-condo == 'true' }}
     strategy:
       matrix:
-        os: [ ubuntu-22.04, windows-latest ]
+#        TODO: Fix windows "too many files open" runner issue
+#        os: [ ubuntu-22.04, windows-latest ]
+        os: [ ubuntu-22.04 ]
         node-version: [ 22.x ]
         python-version: [ 3.13 ]
     runs-on: ${{ matrix.os }}

.helm

@@ -33,14 +33,14 @@
     "graphql-tag": "^2.12.6",
     "lodash": "^4.17.21",
     "openid-client": "4.7.4",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-router-dom": "5.2.0",
     "uuid": "^8.3.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
     "@types/node": "^22",
-    "@types/react": "^17.0.2",
+    "@types/react": "^18.3.1",
     "jest": "^29.7.0",
     "jest-jasmine2": "^29.7.0",
     "typescript": "^5.8.3"

apps/address-service/package.json

@@ -359,7 +359,7 @@ const ReceiptSection: React.FC<IReceiptSectionProps> = ({ section, currencyCode
 
 const InvoiceSection: React.FC<IInvoiceSectionProps> = ({ section, currencyCode }) => {
     const intl = useIntl()
-    const InvoiceTitle = intl.formatMessage({ id: 'acquiringReceipt.invoice.title' }, pick(section, ['number', 'date']))
+    const InvoiceTitle = intl.formatMessage({ id: 'acquiringReceipt.invoice.title' }, pick(section, 'number', 'date'))
     const TaxRegimeTitle = intl.formatMessage({ id: 'acquiringReceipt.taxRegime' })
     const TaxRegimeModeTitle = intl.formatMessage({ id: `acquiringReceipt.taxRegime.${section.taxRegime}` as FormatjsIntl.Message['ids'] })
 

apps/announcements

@@ -1,12 +1,12 @@
-import { DownOutlined } from '@ant-design/icons'
 import { TicketGroupedCounter } from '@app/condo/schema'
 import styled from '@emotion/styled'
 import { Skeleton, Typography, List } from 'antd'
 import get from 'lodash/get'
 import dynamic from 'next/dynamic'
 import React, { useRef, useEffect, useState, useCallback } from 'react'
-import InfiniteScroll from 'react-infinite-scroller'
+import InfiniteScroll from 'react-infinite-scroll-component'
 
+import { ChevronDown } from '@open-condo/icons'
 import { useIntl } from '@open-condo/next/intl'
 
 import TicketChart, {
@@ -62,7 +62,7 @@ const EMPTY_CONTAINER_STYLE: React.CSSProperties = {
     alignItems: 'start',
 }
 
-const TicketChartView: React.FC<ITicketAnalyticsPageChartProps> = (props) => {
+const TicketChartView: React.FC<React.PropsWithChildren<ITicketAnalyticsPageChartProps>> = (props) => {
     const {
         children,
         data,
@@ -196,7 +196,7 @@ const TicketChartView: React.FC<ITicketAnalyticsPageChartProps> = (props) => {
                         option={option}/>
                     {barChartPagedRenderEnabled ? (
                         <Button style={{ width: '100%', marginTop: 16 }} type='ghost' onClick={loadMore}>
-                            {LoadMoreTitle} <DownOutlined />
+                            {LoadMoreTitle} <ChevronDown />
                         </Button>
                     ) : null}
                     {children}
@@ -251,10 +251,11 @@ const TicketChartView: React.FC<ITicketAnalyticsPageChartProps> = (props) => {
                 />
                 <ScrollContainer height={infiniteScrollContainerHeight}>
                     <InfiniteScroll
-                        initialLoad={false}
-                        loadMore={loadMore}
                         hasMore={hasMore}
-                        useWindow={false}>
+                        dataLength={seriesRef.current.length}
+                        next={loadMore}
+                        loader={null}
+                    >
                         <List
                             grid={{ gutter: 24, xs: 1, sm: 1, md: 1, lg: 1, xl: 2, xxl: 2 }}
                             dataSource={seriesRef.current}

apps/billing-connector

@@ -1,5 +1,4 @@
-import { Skeleton, Table, TableColumnsType } from 'antd'
-import { TableProps as RcTableProps } from 'rc-table/lib/Table'
+import { Skeleton, Table, TableColumnsType, TableProps } from 'antd'
 import React from 'react'
 
 import { useIntl } from '@open-condo/next/intl'
@@ -14,7 +13,7 @@ interface ITicketAnalyticsPageListViewProps extends ITicketAnalyticsPageWidgetPr
 }
 
 export const getScrollConfig = (isSmall: boolean) => {
-    const config: RcTableProps['scroll'] & { scrollToFirstRowOnChange?: boolean } = {
+    const config: TableProps<unknown>['scroll'] & { scrollToFirstRowOnChange?: boolean } = {
         scrollToFirstRowOnChange: true,
     }
 

apps/callcenter

@@ -45,7 +45,7 @@ const PaymentByPropertyDataMapper = (paidTitle: string): PaymentChart => new Pay
         table: (_, data, restTableOptions) => {
             const dataSource = []
 
-            const tableColumns = Object.entries(restTableOptions.translations).map(([key, title]) => ({
+            const tableColumns = Object.entries(restTableOptions.translations as Record<string, string>).map(([key, title]) => ({
                 key,
                 title,
                 dataIndex: key,