From cd9648336e3afa8ce00b67d393d10714eb4544e9 Mon Sep 17 00:00:00 2001 From: Oliwia Gowor Date: Thu, 31 Oct 2024 11:53:53 +0100 Subject: [PATCH 1/6] fix: change render --- src/index.tsx | 8 +++++--- src/resources/Namespaces/YamlUpload/YamlUpload.js | 2 +- src/sidebar/NavItem.tsx | 5 ++--- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 86cfdde489..f8d2ba7e06 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,3 @@ -import ReactDOM from 'react-dom'; import i18next from 'i18next'; import yaml from 'js-yaml'; import { Suspense } from 'react'; @@ -25,6 +24,7 @@ import './styles/sapIllus-Fills.css'; import './styles/sapIllus-Layout.css'; import './styles/index.scss'; import './styles/fiori-helpers.scss'; +import { createRoot } from 'react-dom/client'; i18next .use(initReactI18next) @@ -54,7 +54,10 @@ i18next savePreviousPath(); -ReactDOM.render( +const container = document.getElementById('root'); +const root = createRoot(container!); + +root.render( @@ -68,5 +71,4 @@ ReactDOM.render( , - document.getElementById('root'), ); diff --git a/src/resources/Namespaces/YamlUpload/YamlUpload.js b/src/resources/Namespaces/YamlUpload/YamlUpload.js index d53a1d34b6..2184ca7448 100755 --- a/src/resources/Namespaces/YamlUpload/YamlUpload.js +++ b/src/resources/Namespaces/YamlUpload/YamlUpload.js @@ -26,7 +26,7 @@ function YamlUpload({ ?.join('---\n'); useEffect(() => { - if (!yamlContentString && editor) editor.getModel().setValue(''); + if (!yamlContentString && editor) editor.getModel()?.setValue(''); }, [editor, yamlContentString]); const updateYamlContent = useCallback( diff --git a/src/sidebar/NavItem.tsx b/src/sidebar/NavItem.tsx index cf1e2f907a..0a33242a9c 100644 --- a/src/sidebar/NavItem.tsx +++ b/src/sidebar/NavItem.tsx @@ -59,7 +59,6 @@ export function NavItem({ node, subItem = false }: NavItemProps) { icon: node.externalUrl ? 'action' : node.icon, text: t(node.label, { defaultValue: node.label }), selected: isNodeSelected(node), - key: node.pathSegment, onClick: (e: Event) => { if (node.dataSources) { let link = @@ -97,8 +96,8 @@ export function NavItem({ node, subItem = false }: NavItemProps) { }; if (subItem) { - return ; + return ; } - return ; + return ; } From 0255c914613db960a1c313e55d1c612e891bca46 Mon Sep 17 00:00:00 2001 From: Oliwia Gowor Date: Thu, 31 Oct 2024 11:54:24 +0100 Subject: [PATCH 2/6] fix: adjust css names --- src/components/App/ContentWrapper/ContentWrapper.scss | 2 +- .../Namespaces/YamlUpload/ResourceValidationResult.js | 2 +- src/sidebar/Sidebar.scss | 6 +++--- src/styles/index.scss | 10 +++++----- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/App/ContentWrapper/ContentWrapper.scss b/src/components/App/ContentWrapper/ContentWrapper.scss index 2ba961af0d..ffd2baf09c 100644 --- a/src/components/App/ContentWrapper/ContentWrapper.scss +++ b/src/components/App/ContentWrapper/ContentWrapper.scss @@ -1,5 +1,5 @@ :root { - --solidBg: var(--_ui5-v1-24-0_fcl_solid_bg); + --solidBg: var(--_ui5-v2-3-0_fcl_solid_bg); } #content-wrap { diff --git a/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js b/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js index d5baaaaecb..cd91b6273e 100755 --- a/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js +++ b/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js @@ -84,7 +84,7 @@ const ValidationWarnings = ({ resource, validationSchema }) => { showDefaultIcon state={ValueState.Warning} style={{ - marginLeft: '-0.3125rem', //set icon in one line with expand arrow. The value from class `--_ui5-v1-24-0_panel_content_padding` is divided by 2 + marginLeft: '-0.3125rem', //set icon in one line with expand arrow. The value from class `--_ui5-v2-3-0_panel_content_padding` is divided by 2 ...spacing.sapUiSmallMarginEnd, }} /> diff --git a/src/sidebar/Sidebar.scss b/src/sidebar/Sidebar.scss index e06de8506e..847fdb7d52 100644 --- a/src/sidebar/Sidebar.scss +++ b/src/sidebar/Sidebar.scss @@ -1,10 +1,10 @@ :root { - --sidebar-padding: var(--_ui5-v1-24-0_side_navigation_padding); - --sidebar-width: var(--_ui5-v1-24-0_side_navigation_width); + --sidebar-padding: var(--_ui5-v2-3-0_side_navigation_padding); + --sidebar-width: var(--_ui5-v2-3-0_side_navigation_width); } .ui5-content-density-compact { - --_ui5-v1-24-0_side_navigation_padding: 0.2rem 0.7rem 0.75rem 0.75rem !important; + --_ui5-v2-3-0_side_navigation_padding: 0.2rem 0.7rem 0.75rem 0.75rem !important; } .sidebar__content { diff --git a/src/styles/index.scss b/src/styles/index.scss index e76145aeae..82b38627eb 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -3,11 +3,11 @@ @import './wizard-dialog.scss'; :root { - --card-box-shadow: var(--_ui5-v1-24-0_card_box_shadow); - --card-border: var(--_ui5-v1-24-0_card_border); - --card-border-radius: var(--_ui5-v1-24-0_card_border-radius); - --card-border: var(--_ui5-v1-24-0_card_border); - --ui5-v1-24-0_table_bottom_border: none !important; + --card-box-shadow: var(--_ui5-v2-3-0_card_box_shadow); + --card-border: var(--_ui5-v2-3-0_card_border); + --card-border-radius: var(--_ui5-v2-3-0_card_border-radius); + --card-border: var(--_ui5-v2-3-0_card_border); + --ui5-v2-3-0_table_bottom_border: none !important; } html { From 41fb5717eb84b7219dae759360678a09a0bbeb80 Mon Sep 17 00:00:00 2001 From: Oliwia Gowor Date: Thu, 31 Oct 2024 12:06:39 +0100 Subject: [PATCH 3/6] fix: change imports for Toolbar --- .../ResourceForm/components/CollapsibleSection.js | 4 +++- .../components/ResourceGraph/ResourceGraph.tsx | 5 +++-- src/shared/components/UI5Panel/UI5Panel.tsx | 13 ++++--------- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/shared/ResourceForm/components/CollapsibleSection.js b/src/shared/ResourceForm/components/CollapsibleSection.js index 870841e2af..b3740d0bab 100644 --- a/src/shared/ResourceForm/components/CollapsibleSection.js +++ b/src/shared/ResourceForm/components/CollapsibleSection.js @@ -1,9 +1,11 @@ import { useEffect, useRef, useState } from 'react'; import classnames from 'classnames'; import { ResourceFormWrapper } from './Wrapper'; -import { Panel, Toolbar, ToolbarSpacer } from '@ui5/webcomponents-react'; +import { Panel } from '@ui5/webcomponents-react'; import { Title } from './Title'; import './CollapsibleSection.scss'; +import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js'; +import { ToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js'; export function CollapsibleSection({ disabled = false, diff --git a/src/shared/components/ResourceGraph/ResourceGraph.tsx b/src/shared/components/ResourceGraph/ResourceGraph.tsx index 9a7806de18..b34696b9a1 100644 --- a/src/shared/components/ResourceGraph/ResourceGraph.tsx +++ b/src/shared/components/ResourceGraph/ResourceGraph.tsx @@ -15,9 +15,10 @@ import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants'; import { useFeature } from 'hooks/useFeature'; import { K8sResource } from 'types'; import { ResourceGraphConfig } from './types'; -import { Panel, Title, Toolbar, ToolbarSpacer } from '@ui5/webcomponents-react'; - import { spacing } from '@ui5/webcomponents-react-base'; +import { Panel, Title } from '@ui5/webcomponents-react'; +import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js'; +import { ToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js'; import './ResourceGraph.scss'; function ResourceGraph({ diff --git a/src/shared/components/UI5Panel/UI5Panel.tsx b/src/shared/components/UI5Panel/UI5Panel.tsx index 0d285e8f55..8850c9b6df 100644 --- a/src/shared/components/UI5Panel/UI5Panel.tsx +++ b/src/shared/components/UI5Panel/UI5Panel.tsx @@ -1,13 +1,8 @@ -import { - Panel, - Text, - Title, - Toolbar, - ToolbarSeparator, - ToolbarSpacer, -} from '@ui5/webcomponents-react'; - import { spacing } from '@ui5/webcomponents-react-base'; +import { Panel, Text, Title } from '@ui5/webcomponents-react'; +import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js'; +import { ToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js'; +import { ToolbarSeparator } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSeparator/index.js'; import './UI5Panel.scss'; import { CSSProperties, ReactNode, useEffect } from 'react'; From 980211bd0b3ce75c71cc997cb4a61bf30788af15 Mon Sep 17 00:00:00 2001 From: Oliwia Gowor Date: Thu, 31 Oct 2024 14:16:46 +0100 Subject: [PATCH 4/6] fix: change imports for tables --- src/shared/components/GenericList/GenericList.js | 2 +- src/shared/components/GenericList/components.js | 14 +++++--------- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/shared/components/GenericList/GenericList.js b/src/shared/components/GenericList/GenericList.js index ae773c72a1..73283d1615 100644 --- a/src/shared/components/GenericList/GenericList.js +++ b/src/shared/components/GenericList/GenericList.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React, { useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { Table } from '@ui5/webcomponents-react'; +import { Table } from '@ui5/webcomponents-react-compat/dist/components/Table/index.js'; import { useNavigate } from 'react-router-dom'; import { BodyFallback, diff --git a/src/shared/components/GenericList/components.js b/src/shared/components/GenericList/components.js index 1c7ad07d21..3f48b14865 100644 --- a/src/shared/components/GenericList/components.js +++ b/src/shared/components/GenericList/components.js @@ -1,13 +1,9 @@ import { useState } from 'react'; -import { - Button, - FlexBox, - Icon, - Text, - TableCell, - TableColumn, - TableRow, -} from '@ui5/webcomponents-react'; +import { Button, FlexBox, Icon, Text } from '@ui5/webcomponents-react'; +import { TableCell } from '@ui5/webcomponents-react-compat/dist/components/TableCell/index.js'; +import { TableColumn } from '@ui5/webcomponents-react-compat/dist/components/TableColumn/index.js'; +import { TableRow } from '@ui5/webcomponents-react-compat/dist/components/TableRow/index.js'; + import ListActions from 'shared/components/ListActions/ListActions'; import { spacing } from '@ui5/webcomponents-react-base'; From 803fdd07808d795dcd11e4a454f58b96cb62590c Mon Sep 17 00:00:00 2001 From: Oliwia Gowor Date: Mon, 21 Oct 2024 15:47:39 +0200 Subject: [PATCH 5/6] fix: rename list comp. & badge --- src/components/KymaModules/KymaModulesList.js | 10 ++++----- src/components/KymaModules/ModulesCard.js | 6 ++--- src/header/Header.tsx | 10 ++++----- .../YamlUpload/ResourceValidationResult.js | 11 +++++----- .../YamlUpload/YamlResourcesList.js | 6 ++--- .../ExpandableListItem/ExpandableListItem.tsx | 6 ++--- .../components/GenericList/SortModalPanel.js | 22 +++++++++---------- src/shared/components/Labels/Labels.js | 6 ++--- .../components/PodTemplate/components.js | 20 ++++++----------- 9 files changed, 44 insertions(+), 53 deletions(-) diff --git a/src/components/KymaModules/KymaModulesList.js b/src/components/KymaModules/KymaModulesList.js index c808ad2a45..8a3a2b1aa9 100644 --- a/src/components/KymaModules/KymaModulesList.js +++ b/src/components/KymaModules/KymaModulesList.js @@ -8,7 +8,7 @@ import { Button, FlexBox, Text, - Badge, + Tag, } from '@ui5/webcomponents-react'; import { HintButton } from 'shared/components/DescriptionHint/DescriptionHint'; @@ -191,9 +191,9 @@ export default function KymaModulesList({ resource?.channel || kymaResource?.spec?.channel, ), ) ? ( - + {t('kyma-modules.beta')} - + ) : null} , // Namespace @@ -204,14 +204,14 @@ export default function KymaModulesList({ ? moduleStatus?.channel : EMPTY_TEXT_PLACEHOLDER} {isChannelOverriden ? ( - {t('kyma-modules.channel-overridden')} - + ) : ( '' )} diff --git a/src/components/KymaModules/ModulesCard.js b/src/components/KymaModules/ModulesCard.js index 08411eb1aa..d30b2b3f28 100644 --- a/src/components/KymaModules/ModulesCard.js +++ b/src/components/KymaModules/ModulesCard.js @@ -5,7 +5,7 @@ import { Option, Panel, Select, - StandardListItem, + ListItemStandard, Text, Title, } from '@ui5/webcomponents-react'; @@ -28,7 +28,7 @@ export default function ModulesCard({ return ( - setCheckbox(module, !isChecked(module.name), index)} > @@ -52,7 +52,7 @@ export default function ModulesCard({ SAP - +
{module.docsUrl && ( { return ( - + {name} - + ); }), - + {t('clusters.overview.title-all-clusters')} - , + , ]; const openNewWindow = (link: string) => { diff --git a/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js b/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js index cd91b6273e..286155d4d8 100755 --- a/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js +++ b/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js @@ -6,10 +6,9 @@ import { MessageStrip, ObjectStatus, Panel, - Toolbar, - ToolbarSpacer, - ValueState, } from '@ui5/webcomponents-react'; +import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js'; +import { ToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js'; import { getExtendedValidateResourceState, validateResourcesState, @@ -82,7 +81,7 @@ const ValidationWarnings = ({ resource, validationSchema }) => { { ]; const statusIcon = validateResources.isEnabled ? ( warnings.flat().length !== 0 ? ( - + ) : ( - + ) ) : (
diff --git a/src/resources/Namespaces/YamlUpload/YamlResourcesList.js b/src/resources/Namespaces/YamlUpload/YamlResourcesList.js index 215bdcd296..0c459c94f5 100755 --- a/src/resources/Namespaces/YamlUpload/YamlResourcesList.js +++ b/src/resources/Namespaces/YamlUpload/YamlResourcesList.js @@ -2,7 +2,7 @@ import React from 'react'; import { Card, CardHeader, - CustomListItem, + ListItemCustom, FlexBox, Icon, List, @@ -162,7 +162,7 @@ export function YamlResourcesList({ resourcesData }) { {resources.map(r => ( - + - + ))} diff --git a/src/shared/components/ExpandableListItem/ExpandableListItem.tsx b/src/shared/components/ExpandableListItem/ExpandableListItem.tsx index 545afc3a9b..1f82c25ca8 100644 --- a/src/shared/components/ExpandableListItem/ExpandableListItem.tsx +++ b/src/shared/components/ExpandableListItem/ExpandableListItem.tsx @@ -1,5 +1,5 @@ import { ReactNode, useState } from 'react'; -import { Icon, StandardListItem } from '@ui5/webcomponents-react'; +import { Icon, ListItemStandard } from '@ui5/webcomponents-react'; import { StatusBadge } from '../StatusBadge/StatusBadge'; import { useTranslation } from 'react-i18next'; import { spacing } from '@ui5/webcomponents-react-base'; @@ -29,7 +29,7 @@ export const ExpandableListItem = ({ return ( <> - setExpanded(!expanded)} className="expandable-item" > @@ -57,7 +57,7 @@ export const ExpandableListItem = ({ )}
- + {expanded && ( <> {content && ( diff --git a/src/shared/components/GenericList/SortModalPanel.js b/src/shared/components/GenericList/SortModalPanel.js index 39a064caba..db19b5e2bc 100644 --- a/src/shared/components/GenericList/SortModalPanel.js +++ b/src/shared/components/GenericList/SortModalPanel.js @@ -1,8 +1,8 @@ import { useState } from 'react'; import { Button, - CustomListItem, - GroupHeaderListItem, + ListItemCustom, + ListItemGroup, List, RadioButton, Text, @@ -72,10 +72,8 @@ export const SortModalPanel = ({ }} accessibleName="sortOrderList" > - - {t('common.sorting.sort-order')} - - + {t('common.sorting.sort-order')} + setOrder(event.target.value)} /> {t('common.sorting.asc')} - - + + setOrder(event.target.value)} /> {t('common.sorting.desc')} - + - {t('common.sorting.sort-by')} + {t('common.sorting.sort-by')} {sortBy && ( <> {Object.entries(sortBy).flatMap(([value]) => { return ( - + - + ); })} diff --git a/src/shared/components/Labels/Labels.js b/src/shared/components/Labels/Labels.js index 8a3f81d7ea..5c234da31d 100644 --- a/src/shared/components/Labels/Labels.js +++ b/src/shared/components/Labels/Labels.js @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants'; -import { Badge, Label } from '@ui5/webcomponents-react'; +import { Tag, Label } from '@ui5/webcomponents-react'; import { spacing } from '@ui5/webcomponents-react-base'; import './Labels.scss'; @@ -51,7 +51,7 @@ export const Labels = ({ ) : null}
{separatedLabels.map((label, id) => ( - SHORTENING_TRESHOLD ? shortenLabel(label) : label} - + ))}
diff --git a/src/shared/components/PodTemplate/components.js b/src/shared/components/PodTemplate/components.js index f82acf01e9..7a90d2a053 100644 --- a/src/shared/components/PodTemplate/components.js +++ b/src/shared/components/PodTemplate/components.js @@ -1,17 +1,11 @@ import { useTranslation } from 'react-i18next'; import { getPorts } from '../GetContainersPorts'; import { useUrl } from 'hooks/useUrl'; -import { - List, - Label, - GroupHeaderListItem, - Table as UI5Table, - TableColumn, - TableRow, - TableCell, - Text, - Title, -} from '@ui5/webcomponents-react'; +import { List, Label, Text, Title } from '@ui5/webcomponents-react'; +import { Table as UI5Table } from '@ui5/webcomponents-react-compat/dist/components/Table/index.js'; +import { TableColumn } from '@ui5/webcomponents-react-compat/dist/components/TableColumn/index.js'; +import { TableRow } from '@ui5/webcomponents-react-compat/dist/components/TableRow/index.js'; +import { TableCell } from '@ui5/webcomponents-react-compat/dist/components/TableCell/index.js'; import { Labels } from '../Labels/Labels'; import { PodTemplateRow } from './PodTemplateRow'; import { Link } from '../Link/Link'; @@ -51,7 +45,7 @@ function ContainerComponent({ container }) { return ( <> - {container.name} + {container.name} - {name} + {name} {typeLabel}} /> {k8sResource && ( Date: Thu, 31 Oct 2024 14:59:03 +0100 Subject: [PATCH 6/6] fix: fix imports --- .../ClusterValidation/ClusterValidation.tsx | 2 +- src/shared/components/PodTemplate/components.js | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx b/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx index 5fead74f8f..94a59325ee 100644 --- a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx +++ b/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx @@ -18,9 +18,9 @@ import { Card, CardHeader, FlexBox, - Loader, ProgressIndicator, } from '@ui5/webcomponents-react'; +import { Loader } from '@ui5/webcomponents-react-compat/dist/components/Loader/index.js'; import { ClusterValidationConfigurationDialog } from './ClusterValidationConfiguration'; import { resourcesState } from 'state/resourcesAtom'; diff --git a/src/shared/components/PodTemplate/components.js b/src/shared/components/PodTemplate/components.js index 7a90d2a053..33e6242cd2 100644 --- a/src/shared/components/PodTemplate/components.js +++ b/src/shared/components/PodTemplate/components.js @@ -1,7 +1,13 @@ import { useTranslation } from 'react-i18next'; import { getPorts } from '../GetContainersPorts'; import { useUrl } from 'hooks/useUrl'; -import { List, Label, Text, Title } from '@ui5/webcomponents-react'; +import { + List, + Label, + Text, + Title, + ListItemGroup, +} from '@ui5/webcomponents-react'; import { Table as UI5Table } from '@ui5/webcomponents-react-compat/dist/components/Table/index.js'; import { TableColumn } from '@ui5/webcomponents-react-compat/dist/components/TableColumn/index.js'; import { TableRow } from '@ui5/webcomponents-react-compat/dist/components/TableRow/index.js';