replaced select in preferences

resources/web/deployment.yaml

@@ -16,7 +16,7 @@ spec:
     spec:
       containers:
         - name: busola
-          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2576
+          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2589
           imagePullPolicy: Always
           resources:
             requests:

src/components/Preferences/LanguageSettings.tsx

@@ -1,31 +1,28 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSetRecoilState } from 'recoil';
-import { Select } from 'fundamental-react';
+import { Select, Option } from '@ui5/webcomponents-react';
 import { languageAtom } from 'state/preferences/languageAtom';
-import { Option } from 'fundamental-react/lib/Select/Select';
 
 const AVAILABLE_LANGUAGES = [{ key: 'en', text: 'English' }];
 
 export default function LanguageSettings() {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const setLanguage = useSetRecoilState(languageAtom);
 
-  const selectLanguage = (
-    event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>,
-    language: Option,
-  ) => {
-    setLanguage(language.key);
+  const onChange = (event: any) => {
+    const selectedLanguage = event.detail.selectedOption.value;
+    setLanguage(selectedLanguage);
   };
 
   return (
     <div className="preferences-row">
       <span className="fd-has-color-status-4">{t('settings.language')}</span>
-      <Select
-        options={AVAILABLE_LANGUAGES}
-        selectedKey={i18n.language}
-        onSelect={selectLanguage}
-      />
+      <Select onChange={onChange}>
+        {AVAILABLE_LANGUAGES.map(language => (
+          <Option value={language.key}>{language.text}</Option>
+        ))}
+      </Select>
     </div>
   );
 }

src/components/Preferences/OtherSettings.tsx

@@ -1,29 +1,29 @@
 import { useTranslation } from 'react-i18next';
-import { useRecoilState } from 'recoil';
-import { Select } from 'fundamental-react';
+import { useSetRecoilState } from 'recoil';
+import { Select, Option } from '@ui5/webcomponents-react';
 import { pageSizeState } from 'state/preferences/pageSizeAtom';
 const AVAILABLE_PAGE_SIZES = [10, 20, 50];
 
 export default function OtherSettings() {
   const { t } = useTranslation();
 
-  const [pageSize, setPageSize] = useRecoilState(pageSizeState);
+  const setPageSize = useSetRecoilState(pageSizeState);
 
-  const pageSizeOptions = AVAILABLE_PAGE_SIZES.map(s => ({
-    key: s.toString(),
-    text: s.toString(),
-  }));
+  const onChange = (event: any) => {
+    const selectedSize = event.detail.selectedOption.value;
+    setPageSize(parseInt(selectedSize));
+  };
 
   return (
     <div className="preferences-row">
       <span className="fd-has-color-status-4">
         {t('settings.other.default-page-size')}
       </span>
-      <Select
-        options={pageSizeOptions}
-        selectedKey={pageSize.toString()}
-        onSelect={(_, { key }) => setPageSize(parseInt(key))}
-      />
+      <Select onChange={onChange}>
+        {AVAILABLE_PAGE_SIZES.map(size => (
+          <Option value={size.toString()}>{size.toString()}</Option>
+        ))}
+      </Select>
     </div>
   );
 }