EPMRPP-90338 || integrate UI-kit

app/package.json

@@ -25,6 +25,7 @@
     "@formatjs/intl-pluralrules": "1.3.9",
     "@formatjs/intl-relativetimeformat": "4.5.1",
     "@formatjs/intl-utils": "1.6.0",
+    "@reportportal/ui-kit": "^0.0.1-alpha.8",
     "axios": "1.6.4",
     "c3": "0.7.20",
     "chart.js": "2.9.4",
@@ -103,10 +104,10 @@
     "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.23.3",
     "@babel/preset-react": "7.23.3",
+    "@cfaester/enzyme-adapter-react-18": "0.7.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
     "@sowtame/webpack-subresource-integrity": "2.0.0",
     "@types/jest": "24.9.0",
-    "@cfaester/enzyme-adapter-react-18": "0.7.1",
     "axios-mock-adapter": "1.17.0",
     "babel-eslint": "10.0.3",
     "babel-loader": "8.2.3",

app/src/componentLibrary/autocompletes/common/autocompleteOptions.jsx

@@ -18,7 +18,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import { ScrollWrapper } from 'components/main/scrollWrapper';
-import { BubblesPreloader } from 'components/preloaders/bubblesPreloader';
+import { BubblesLoader } from '@reportportal/ui-kit';
 import { autocompleteVariantType, singleAutocompleteOptionVariantType } from './propTypes';
 import { AutocompletePrompt } from './autocompletePrompt';
 import { AutocompleteOption } from './autocompleteOption';
@@ -71,7 +71,7 @@ export class AutocompleteOptions extends Component {
       return (
         <>
           <AutocompletePrompt variant={variant}>
-            <BubblesPreloader />
+            <BubblesLoader />
           </AutocompletePrompt>
           {!createWithoutConfirmation && this.renderNewItem(options)}
         </>

app/src/componentLibrary/plainTable/plainTable.jsx

@@ -16,7 +16,7 @@
 
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
-import { BubblesPreloader } from 'components/preloaders/bubblesPreloader';
+import { BubblesLoader } from '@reportportal/ui-kit';
 import { PlainTableHeader } from './plainTableHeader';
 import { columnPropTypes } from './propTypes';
 import { PlainTableBody } from './plainTableBody';
@@ -26,7 +26,7 @@ const cx = classNames.bind(styles);
 
 export const PlainTable = ({ columns, data, actions, isLoading }) =>
   isLoading ? (
-    <BubblesPreloader />
+    <BubblesLoader />
   ) : (
     <div className={cx('table-container')}>
       <PlainTableHeader columns={columns} hasActions={Boolean(actions.length)} />

app/src/components/extensionLoader/extensionLoader.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ErrorBoundary } from 'components/containers/errorBoundary';
-import { BubblesPreloader } from 'components/preloaders/bubblesPreloader';
+import { BubblesLoader } from '@reportportal/ui-kit';
 import { createImportProps } from 'controllers/plugins/uiExtensions/createImportProps';
 import { ExtensionError } from './extensionError';
 import { extensionType } from './extensionTypes';
@@ -22,7 +22,7 @@ function ExtensionLoader({ extension, withPreloader, ...componentProps }) {
   const extensionImportProps = createImportProps(pluginName);
 
   return (
-    <React.Suspense fallback={withPreloader ? <BubblesPreloader /> : null}>
+    <React.Suspense fallback={withPreloader ? <BubblesLoader /> : null}>
       {Component ? <Component {...extensionImportProps} {...componentProps} /> : null}
     </React.Suspense>
   );

app/src/components/integrations/elements/bts/btsPropertiesForIssueForm/btsPropertiesForIssueForm.jsx

@@ -21,7 +21,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import track from 'react-tracking';
 import classNames from 'classnames/bind';
 import { fetch } from 'common/utils';
-import { BubblesPreloader } from 'components/preloaders/bubblesPreloader';
+import { BubblesLoader } from '@reportportal/ui-kit';
 import { projectIdSelector } from 'controllers/pages';
 import { projectInfoSelector } from 'controllers/project';
 import { showNotification, NOTIFICATION_TYPES } from 'controllers/notification';
@@ -414,7 +414,7 @@ export class BtsPropertiesForIssueForm extends Component {
     return (
       <div className={cx('bts-properties-for-issue-form')}>
         {loading && !this.state.issueType ? (
-          <BubblesPreloader customClassName={cx('center')} />
+          <BubblesLoader className={cx('center')} />
         ) : (
           <Fragment>
             {!disabled && (
@@ -451,7 +451,7 @@ export class BtsPropertiesForIssueForm extends Component {
               </Fragment>
             )}
             {loading ? (
-              <BubblesPreloader customClassName={cx('center')} />
+              <BubblesLoader className={cx('center')} />
             ) : (
               <Fragment>
                 <DynamicFieldsSection

app/src/components/integrations/elements/integrationSettings/integrationSettings.jsx

@@ -35,7 +35,7 @@ import {
   namedProjectIntegrationsSelector,
 } from 'controllers/plugins';
 import { INTEGRATIONS } from 'common/constants/settingsTabs';
-import { BubblesPreloader } from 'components/preloaders/bubblesPreloader';
+import { BubblesLoader } from '@reportportal/ui-kit';
 import { PLUGINS_PAGE_EVENTS } from 'components/main/analytics/events';
 import { redirect } from 'redux-first-router';
 import { INTEGRATION_FORM } from './integrationForm/constants';
@@ -130,7 +130,7 @@ export const IntegrationSettings = (props) => {
   return (
     <div className={cx('integration-settings')}>
       {loading ? (
-        <BubblesPreloader customClassName={cx('center')} />
+        <BubblesLoader className={cx('center')} />
       ) : (
         <>
           <ConnectionSection