From 41fe6617b7f218e9a23da3ada8dda559d71d5bb1 Mon Sep 17 00:00:00 2001
From: Foxhoundn <filip.witosz@gmail.com>
Date: Wed, 20 Sep 2023 06:24:27 +0000
Subject: [PATCH 1/5] Do not leak header content to the main content when
 screen gets narrow. Closes #76

---
 package.json                       |  2 +-
 src/js/components/topbar/index.tsx | 36 +++++++++++++++++-------------
 src/js/views/root.tsx              |  2 +-
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index b2ddf123..bc0f5670 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qorus-ui",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "Qorus UI",
   "author": "Qore Technologies",
   "repository": {
diff --git a/src/js/components/topbar/index.tsx b/src/js/components/topbar/index.tsx
index aba4fb05..4e26785a 100644
--- a/src/js/components/topbar/index.tsx
+++ b/src/js/components/topbar/index.tsx
@@ -163,7 +163,7 @@ class Topbar extends Component {
     const [countryCode] = this.props.locale.split('-');
 
     return (
-      <ReqoreHeader>
+      <ReqoreHeader style={{ minWidth: 700 }}>
         <ReqoreNavbarGroup>
           <img src={light ? logo : whiteLogo} className="qore-small-logo" />
           <span className="topbar-instance-on">on</span>
@@ -186,21 +186,25 @@ class Topbar extends Component {
           </ReqoreNavbarGroup>
         )}
         <ReqoreNavbarGroup position="right">
-          <ReqoreControlGroup stack>
-            <ReqoreInput
-              flat
-              id="quickSearch"
-              icon="SearchLine"
-              placeholder={intl.formatMessage({
-                id: 'system.global-search',
-              })}
-              value={this.state.quickSearchValue}
-              onChange={(e: any) => this.setState({ quickSearchValue: e.target.value })}
-            />
-            {this.renderSearchMenu()}
-            <ReqoreButton icon="SearchLine" flat onClick={() => this.handleSubmit()} />
-          </ReqoreControlGroup>
-          <ReqoreNavbarDivider />
+          {!this.props.isTablet && (
+            <>
+              <ReqoreControlGroup stack>
+                <ReqoreInput
+                  flat
+                  id="quickSearch"
+                  icon="SearchLine"
+                  placeholder={intl.formatMessage({
+                    id: 'system.global-search',
+                  })}
+                  value={this.state.quickSearchValue}
+                  onChange={(e: any) => this.setState({ quickSearchValue: e.target.value })}
+                />
+                {this.renderSearchMenu()}
+                <ReqoreButton icon="SearchLine" flat onClick={() => this.handleSubmit()} />
+              </ReqoreControlGroup>
+              <ReqoreNavbarDivider />
+            </>
+          )}
           <ReqoreNavbarGroup position="right">
             <ReqoreNavbarItem
               interactive
diff --git a/src/js/views/root.tsx b/src/js/views/root.tsx
index 971e5a42..e7acb253 100644
--- a/src/js/views/root.tsx
+++ b/src/js/views/root.tsx
@@ -397,7 +397,7 @@ export default class Root extends Component {
               <div className="root__center">
                 {!isMaximized && (
                   <Sidebar
-                    isCollapsed={this.props.sidebarOpen === false}
+                    isCollapsed={this.props.sidebarOpen === false || isTablet}
                     // @ts-ignore ts-migrate(2339) FIXME: Property 'pathname' does not exist on type 'Object... Remove this comment to see the full error message
                     path={this.props.location.pathname}
                     items={menuWithPlugins}

From ab7be8cff7df70e806d7eacdbd515e73e00a96c6 Mon Sep 17 00:00:00 2001
From: Foxhoundn <filip.witosz@gmail.com>
Date: Wed, 20 Sep 2023 14:15:44 +0000
Subject: [PATCH 2/5] Connection updates

---
 package.json                                 |   2 +-
 src/js/views/system/connections/controls.tsx |  46 ++++++-
 src/js/views/system/connections/options.tsx  | 124 ++++++++-----------
 src/js/views/system/connections/pane.tsx     |  28 ++++-
 yarn.lock                                    |   8 +-
 5 files changed, 129 insertions(+), 79 deletions(-)

diff --git a/package.json b/package.json
index bc0f5670..1a3fd76e 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@blueprintjs/datetime": "^3.15.2",
     "@blueprintjs/select": "^3.11.2",
     "@monaco-editor/react": "^4.5.2",
-    "@qoretechnologies/reqore": "^0.37.3",
+    "@qoretechnologies/reqore": "^0.37.6",
     "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.197",
     "@types/node": "^16.7.13",
diff --git a/src/js/views/system/connections/controls.tsx b/src/js/views/system/connections/controls.tsx
index a3ccd187..151012f1 100644
--- a/src/js/views/system/connections/controls.tsx
+++ b/src/js/views/system/connections/controls.tsx
@@ -1,12 +1,47 @@
-import { ReqoreButton, ReqoreControlGroup, useReqoreProperty } from '@qoretechnologies/reqore';
+import {
+  ReqoreButton,
+  ReqoreControlGroup,
+  ReqoreModal,
+  ReqoreSpinner,
+  useReqoreProperty,
+} from '@qoretechnologies/reqore';
+import { useEffect } from 'react';
 import { injectIntl } from 'react-intl';
+import { useAsyncRetry } from 'react-use';
 import compose from 'recompose/compose';
 import withHandlers from 'recompose/withHandlers';
 import { WebIDEButton } from '../../../components/WebIDEButton';
 import withModal from '../../../hocomponents/modal';
+import settings from '../../../settings';
 import actions from '../../../store/api/actions';
+import { put } from '../../../store/api/utils';
 import PingModal from './modals/ping';
 
+const OAuth2Modal = ({ name, closeModal, ...rest }: any) => {
+  const redirect_uri = window.location.href;
+  const { loading, value } = useAsyncRetry(async () => {
+    const data = await put(
+      `${settings.REST_BASE_URL}/connections/${name}/oauth2AuthRequestUri?redirect_uri=${redirect_uri}`
+    );
+
+    return data;
+  });
+
+  useEffect(() => {
+    if (value) {
+      //console.log(value);
+      window.location.href = value;
+    }
+  }, [value]);
+
+  return (
+    <ReqoreModal {...rest} isOpen intent="info" label={`OAuth2 Access request for ${name}`}>
+      {loading && <ReqoreSpinner centered>Loading...</ReqoreSpinner>}
+      {value && <ReqoreSpinner centered>Redirecting...</ReqoreSpinner>}
+    </ReqoreModal>
+  );
+};
+
 const RemoteControls = ({
   intl,
   enabled,
@@ -31,6 +66,11 @@ const RemoteControls = ({
   ...rest
 }) => {
   const confirmAction = useReqoreProperty('confirmAction');
+  const addModal = useReqoreProperty('addModal');
+
+  const handleOauthClick = () => {
+    addModal(<OAuth2Modal name={name} />);
+  };
 
   return (
     <ReqoreControlGroup size={big ? undefined : 'small'} fluid={false}>
@@ -91,9 +131,7 @@ const RemoteControls = ({
           icon="RemoteControlLine"
           tooltip="Grant OAuth2 Access"
           intent="info"
-          onClick={() => {
-            window.location.href = redirectUri;
-          }}
+          onClick={handleOauthClick}
         />
       )}
       <WebIDEButton type="connection" id={connid} big={big} />
diff --git a/src/js/views/system/connections/options.tsx b/src/js/views/system/connections/options.tsx
index 79e30853..d46ec313 100644
--- a/src/js/views/system/connections/options.tsx
+++ b/src/js/views/system/connections/options.tsx
@@ -11,10 +11,12 @@ import {
   ReqoreInput,
   ReqoreKeyValueTable,
   ReqoreMessage,
+  ReqoreP,
   ReqorePanel,
   ReqoreVerticalSpacer,
 } from '@qoretechnologies/reqore';
 import { ReqoreTextEffect } from '@qoretechnologies/reqore/dist/components/Effect';
+import ReactMarkdown from 'react-markdown';
 import settings from '../../../settings';
 import { get } from '../../../store/api/utils';
 
@@ -33,56 +35,6 @@ const StyledSensitive = styled.span`
   background-color: #000;
 `;
 
-const Option: Function = ({
-  // @ts-ignore ts-migrate(2339) FIXME: Property 'objKey' does not exist on type 'Object'.
-  objKey,
-  // @ts-ignore ts-migrate(2339) FIXME: Property 'value' does not exist on type 'Object'.
-  value,
-  // @ts-ignore ts-migrate(2339) FIXME: Property 'onEdit' does not exist on type 'Object'.
-  onEdit,
-  // @ts-ignore ts-migrate(2339) FIXME: Property 'onDelete' does not exist on type 'Object... Remove this comment to see the full error message
-  onDelete,
-  // @ts-ignore ts-migrate(2339) FIXME: Property 'canEdit' does not exist on type 'Object'... Remove this comment to see the full error message
-  canEdit,
-  // @ts-ignore ts-migrate(2339) FIXME: Property 'sensitive' does not exist on type 'Objec... Remove this comment to see the full error message
-  sensitive,
-}: // @ts-ignore ts-migrate(2724) FIXME: 'React' has no exported member named 'Element'. Di... Remove this comment to see the full error message
-Object) => {
-  const [isShown, setIsShown] = useState(false);
-
-  const handleEditClick = (): void => {
-    onEdit('key', objKey);
-    onEdit('originalKey', objKey);
-    onEdit('value', typeof value === 'object' ? JSON.stringify(value) : value.toString());
-  };
-
-  const handleDeleteClick = (): void => {
-    onDelete(objKey);
-  };
-
-  const renderValue = () => {
-    if (typeof value === 'object' || !sensitive || isShown) {
-      return JSON.stringify(value);
-    }
-
-    return <StyledSensitive onClick={() => setIsShown(!isShown)} />;
-  };
-
-  return (
-    <div className="conn-options-item" style={{ whiteSpace: 'break-spaces' }}>
-      "{objKey}": {renderValue()}{' '}
-      {canEdit && (
-        <div className="pull-right">
-          <ReqoreControlGroup stack size="small">
-            <ReqoreButton icon="EditLine" onClick={handleEditClick} />
-            <ReqoreButton icon="DeleteBinLine" intent="danger" onClick={handleDeleteClick} />
-          </ReqoreControlGroup>
-        </div>
-      )}
-    </div>
-  );
-};
-
 export const ConnectionOptionValue = ({ sensitive, DefaultComponent, value }: any) => {
   const [show, setShow] = useState(!sensitive);
 
@@ -105,7 +57,7 @@ export const ConnectionOptionValue = ({ sensitive, DefaultComponent, value }: an
   );
 };
 
-export default class ConnectionOptions extends Component {
+class ConnectionOptions extends Component {
   props: Props = this.props;
 
   state: {
@@ -218,7 +170,17 @@ export default class ConnectionOptions extends Component {
             headerSize={3}
             keyIcon="Settings4Line"
             keyAlign="right"
+            keyTooltip={(key) => ({
+              content: (
+                <ReactMarkdown>
+                  {this.state.optionsData[this.props.urlProtocol][key]?.desc}
+                </ReactMarkdown>
+              ),
+              delay: 300,
+              maxWidth: '300px',
+            })}
             valueIcon="PriceTagLine"
+            valueTooltip={(value) => JSON.stringify(value)}
             valueRenderer={(data, DefaultComponent) => (
               <ConnectionOptionValue
                 {...data}
@@ -226,26 +188,48 @@ export default class ConnectionOptions extends Component {
                 DefaultComponent={DefaultComponent}
               />
             )}
-            rowActions={(option, value) => [
-              {
-                icon: 'EditLine',
-                onClick: () => {
-                  this.changeData('key', option);
-                  this.changeData('originalKey', option);
-                  this.changeData(
-                    'value',
-                    typeof value === 'object' ? JSON.stringify(value) : value.toString()
-                  );
+            rowActions={{
+              width: 120,
+              actions: (option, value) => [
+                {
+                  icon: 'InformationLine',
+                  tooltip: {
+                    title: option,
+                    handler: 'click',
+                    placement: 'left',
+
+                    content: (
+                      <>
+                        <ReqoreP>{JSON.stringify(value)}</ReqoreP>
+                        <ReqoreMessage margin="top" intent="info" opaque={false}>
+                          <ReactMarkdown>
+                            {this.state.optionsData[this.props.urlProtocol][option]?.desc}
+                          </ReactMarkdown>
+                        </ReqoreMessage>
+                      </>
+                    ),
+                  },
                 },
-              },
-              {
-                icon: 'DeleteBinLine',
-                intent: 'danger',
-                onClick: () => {
-                  this.handleDelete(option);
+                {
+                  icon: 'EditLine',
+                  onClick: () => {
+                    this.changeData('key', option);
+                    this.changeData('originalKey', option);
+                    this.changeData(
+                      'value',
+                      typeof value === 'object' ? JSON.stringify(value) : value.toString()
+                    );
+                  },
                 },
-              },
-            ]}
+                {
+                  icon: 'DeleteBinLine',
+                  intent: 'danger',
+                  onClick: () => {
+                    this.handleDelete(option);
+                  },
+                },
+              ],
+            }}
           />
         ) : (
           <ReqoreMessage intent="warning" margin="top">
@@ -304,3 +288,5 @@ export default class ConnectionOptions extends Component {
     );
   }
 }
+
+export default ConnectionOptions;
diff --git a/src/js/views/system/connections/pane.tsx b/src/js/views/system/connections/pane.tsx
index 7bd73836..e1cf628a 100644
--- a/src/js/views/system/connections/pane.tsx
+++ b/src/js/views/system/connections/pane.tsx
@@ -10,6 +10,7 @@ import { includes, lowerCase, size } from 'lodash';
 import { Component } from 'react';
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
 import { compose } from 'recompose';
 import mapProps from 'recompose/mapProps';
 import { createSelector } from 'reselect';
@@ -40,6 +41,7 @@ const viewSelector = createSelector([remoteSelector, attrsSelector], (remote, at
   editable: attrs.editable,
 }));
 
+@withRouter
 class ConnectionsPane extends Component {
   props: {
     remote: any;
@@ -66,6 +68,10 @@ class ConnectionsPane extends Component {
   } = {
     error: null,
     options: null,
+    status: this.props.location?.query?.status,
+    messageTitle: this.props.location?.query?.messageTitle,
+    message: this.props.location?.query?.message,
+    messageDuration: this.props.location?.query?.messageDuration,
   };
 
   componentDidMount() {
@@ -150,11 +156,12 @@ class ConnectionsPane extends Component {
   };
 
   render() {
+    console.log(this.props);
     // @ts-ignore ts-migrate(2339) FIXME: Property 'deps' does not exist on type 'Object'.
     const { deps, alerts, locked, url_hash } = this.props.remote;
     // @ts-ignore ts-migrate(2339) FIXME: Property 'paneTab' does not exist on type '{ remot... Remove this comment to see the full error message
     const { paneTab, paneId, remoteType, dispatchAction } = this.props;
-    const { isPassLoaded } = this.state;
+    const { isPassLoaded, status, message, messageTitle, messageDuration } = this.state;
 
     const canEdit = !locked && this.props.canEdit;
     // @ts-ignore ts-migrate(2339) FIXME: Property 'canDelete' does not exist on type '{ rem... Remove this comment to see the full error message
@@ -199,6 +206,25 @@ class ConnectionsPane extends Component {
           },
         ]}
       >
+        {status && (
+          <ReqoreMessage
+            margin="both"
+            intent={status}
+            opaque={false}
+            title={messageTitle}
+            duration={messageDuration}
+            onFinish={() => {
+              this.setState({
+                status: null,
+                message: null,
+                messageTitle: null,
+                messageDuration: null,
+              });
+            }}
+          >
+            {message}
+          </ReqoreMessage>
+        )}
         <SimpleTabs activeTab={paneTab}>
           <SimpleTab name="detail">
             {this.state.error && (
diff --git a/yarn.lock b/yarn.lock
index 02fd70dd..74a4ea0e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2130,10 +2130,10 @@
     chokidar "^3.5.3"
     fs-extra "^10.0.1"
 
-"@qoretechnologies/reqore@^0.37.3":
-  version "0.37.3"
-  resolved "https://registry.yarnpkg.com/@qoretechnologies/reqore/-/reqore-0.37.3.tgz#b6a77a5acde0d4ab75728127ed7b6292b7802279"
-  integrity sha512-PB33Vi7q8K7cx+5oSf/10tmk55D74tfYbK/E58AjSK59d0TITusqtaJ29AeK3AbVMxSAHBAeVTtqtft4vUeFxw==
+"@qoretechnologies/reqore@^0.37.6":
+  version "0.37.6"
+  resolved "https://registry.yarnpkg.com/@qoretechnologies/reqore/-/reqore-0.37.6.tgz#ac2ecbcddfd116f60ffe442893038c290d00551e"
+  integrity sha512-YeryfvQruN45DrXpSYOyBQ23lP/nmUd+j/U7c4N9YvsG+CvUgSOStPfUzNm5BBf9tilNt1SP4c4GhMxsixjTcA==
   dependencies:
     "@popperjs/core" "^2.11.6"
     "@react-spring/web" "^9.6.1"

From 964f3139988074a98d8315a02b4efb3ecf7962a6 Mon Sep 17 00:00:00 2001
From: Foxhoundn <filip.witosz@gmail.com>
Date: Thu, 21 Sep 2023 07:17:43 +0000
Subject: [PATCH 3/5] Closes #81, Closes #80

---
 src/js/components/confirm_dialog/index.tsx    | 73 ++++++++++---------
 src/js/components/modal/index.tsx             |  4 +-
 src/js/components/sla_control/index.tsx       | 42 +++++------
 src/js/hocomponents/injectReqore.tsx          | 21 ++++++
 src/js/views/services/pane/index.tsx          | 14 ++--
 .../services/tabs/methods/modal_code.tsx      | 29 ++++----
 .../views/services/tabs/methods/modal_run.tsx | 10 ++-
 src/js/views/services/tabs/methods/row.tsx    | 11 ++-
 .../views/system/slas/detail/events/view.tsx  |  7 +-
 src/js/views/system/slas/detail/index.tsx     | 26 +++----
 10 files changed, 128 insertions(+), 109 deletions(-)
 create mode 100644 src/js/hocomponents/injectReqore.tsx

diff --git a/src/js/components/confirm_dialog/index.tsx b/src/js/components/confirm_dialog/index.tsx
index 0f6580a9..28eb0c4b 100644
--- a/src/js/components/confirm_dialog/index.tsx
+++ b/src/js/components/confirm_dialog/index.tsx
@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import { useReqoreProperty } from '@qoretechnologies/reqore';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import compose from 'recompose/compose';
 import pure from 'recompose/onlyUpdateForKeys';
@@ -21,38 +21,43 @@ const ConfirmDialog: Function = ({
   // @ts-ignore ts-migrate(2339) FIXME: Property 'intl' does not exist on type 'Props'.
   intl,
 }: // @ts-ignore ts-migrate(2724) FIXME: 'React' has no exported member named 'Element'. Di... Remove this comment to see the full error message
-Props) => (
-  <Modal
-    hasFooter
-    onEnterPress={() => {
-      onConfirm();
-    }}
-  >
-    <Modal.Header titleId="confirmdialog" onClose={onClose}>
-      <FormattedMessage id="dialog.please-confirm-action" />
-    </Modal.Header>
-    <Modal.Body>
-      <Box top>
-        <Alert bsStyle="warning">{children}</Alert>
-      </Box>
-    </Modal.Body>
-    <Modal.Footer>
-      <Controls>
-        <Button
-          label={intl.formatMessage({ id: 'button.cancel' })}
-          action={onClose}
-          btnStyle="default"
-          big
-        />
-        <Button
-          label={intl.formatMessage({ id: 'button.confirm' })}
-          action={onConfirm}
-          btnStyle="success"
-          big
-        />
-      </Controls>
-    </Modal.Footer>
-  </Modal>
-);
+Props) => {
+  const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
+
+  return (
+    <Modal
+      hasFooter
+      onEnterPress={() => {
+        onConfirm();
+      }}
+      zIndex={getAndIncreaseZIndex()}
+    >
+      <Modal.Header titleId="confirmdialog" onClose={onClose}>
+        <FormattedMessage id="dialog.please-confirm-action" />
+      </Modal.Header>
+      <Modal.Body>
+        <Box top>
+          <Alert bsStyle="warning">{children}</Alert>
+        </Box>
+      </Modal.Body>
+      <Modal.Footer>
+        <Controls>
+          <Button
+            label={intl.formatMessage({ id: 'button.cancel' })}
+            action={onClose}
+            btnStyle="default"
+            big
+          />
+          <Button
+            label={intl.formatMessage({ id: 'button.confirm' })}
+            action={onConfirm}
+            btnStyle="success"
+            big
+          />
+        </Controls>
+      </Modal.Footer>
+    </Modal>
+  );
+};
 
 export default compose(pure(['children']), injectIntl)(ConfirmDialog);
diff --git a/src/js/components/modal/index.tsx b/src/js/components/modal/index.tsx
index 9019251d..ab4c71a3 100644
--- a/src/js/components/modal/index.tsx
+++ b/src/js/components/modal/index.tsx
@@ -1,4 +1,5 @@
 /* @flow */
+import { ReqoreBackdrop } from '@qoretechnologies/reqore';
 import React, { Component } from 'react';
 import _Draggable from 'react-draggable';
 import ResizeHandle from '../resize/handle';
@@ -7,7 +8,6 @@ import Body from './body';
 import Footer from './footer';
 import Header from './header';
 import Manager from './manager';
-import { ReqoreBackdrop } from '@qoretechnologies/reqore';
 
 const Draggable: any = _Draggable;
 
@@ -156,7 +156,7 @@ export default class Modal extends Component {
   // @ts-ignore ts-migrate(2724) FIXME: 'React' has no exported member named 'Element'. Di... Remove this comment to see the full error message
   render() {
     return (
-      <ReqoreBackdrop>
+      <ReqoreBackdrop zIndex={this.props.zIndex} onClose={this.getHeader()?.props?.onClose}>
         <div
           className={`bp3-dialog-container ${this.props.hasFooter ? 'has-footer' : ''}`}
           // @ts-ignore ts-migrate(2322) FIXME: Type 'Function' is not assignable to type 'LegacyR... Remove this comment to see the full error message
diff --git a/src/js/components/sla_control/index.tsx b/src/js/components/sla_control/index.tsx
index ee548f4f..b5e24014 100644
--- a/src/js/components/sla_control/index.tsx
+++ b/src/js/components/sla_control/index.tsx
@@ -1,6 +1,6 @@
 // @flow
-import { Button, ControlGroup, Intent } from '@blueprintjs/core';
-import React from 'react';
+import { Intent } from '@blueprintjs/core';
+import { ReqoreButton, ReqoreControlGroup, ReqoreDropdown } from '@qoretechnologies/reqore';
 import compose from 'recompose/compose';
 import pure from 'recompose/onlyUpdateForKeys';
 import withHandlers from 'recompose/withHandlers';
@@ -8,7 +8,6 @@ import withState from 'recompose/withState';
 import NoData from '../../components/nodata';
 import withModal from '../../hocomponents/modal';
 import ConfirmDialog from '../confirm_dialog';
-import Dropdown, { Control as Toggle, Item } from '../dropdown';
 
 type Props = {
   canModify: boolean;
@@ -36,39 +35,32 @@ const SLAControl: Function = ({
 Props) => {
   if (canModify) {
     return (
-      <ControlGroup>
+      <ReqoreControlGroup>
         {slas.length > 0 ? (
           // @ts-ignore ts-migrate(2769) FIXME: No overload matches this call.
-          <Dropdown>
-            {/* @ts-ignore ts-migrate(2739) FIXME: Type '{ children: string; small: true; }' is missi... Remove this comment to see the full error message */}
-            <Toggle small>{slavalue || 'None'}</Toggle>
-            {slas.map(
-              // @ts-ignore ts-migrate(2724) FIXME: 'React' has no exported member named 'Element'. Di... Remove this comment to see the full error message
-              (sla: any) => (
-                <Item
-                  // @ts-ignore ts-migrate(2339) FIXME: Property 'slaid' does not exist on type 'Object'.
-                  key={sla.slaid}
-                  // @ts-ignore ts-migrate(2339) FIXME: Property 'name' does not exist on type 'Object'.
-                  title={sla.name}
-                  // @ts-ignore ts-migrate(2769) FIXME: No overload matches this call.
-                  action={handleSlaChange}
-                />
-              )
-            )}
-          </Dropdown>
+          <ReqoreDropdown
+            items={slas.map((sla) => ({
+              label: sla.name,
+              value: sla.name,
+              selected: slavalue === sla.name,
+            }))}
+            onItemSelect={({ label }) => {
+              handleSlaChange(null, label);
+            }}
+            label={slavalue || 'None'}
+          />
         ) : (
           <p>{slavalue || 'None'}</p>
         )}
         {slavalue && slavalue !== 'None' && (
-          <Button
-            icon="cross"
+          <ReqoreButton
+            icon="CloseLine"
             intent={Intent.DANGER}
             // @ts-ignore ts-migrate(2322) FIXME: Type 'Function' is not assignable to type '((event... Remove this comment to see the full error message
             onClick={handleRemoveClick}
-            className="bp3-small"
           />
         )}
-      </ControlGroup>
+      </ReqoreControlGroup>
     );
   }
 
diff --git a/src/js/hocomponents/injectReqore.tsx b/src/js/hocomponents/injectReqore.tsx
new file mode 100644
index 00000000..9af6b2af
--- /dev/null
+++ b/src/js/hocomponents/injectReqore.tsx
@@ -0,0 +1,21 @@
+/* @flow */
+import { useReqoreProperty } from '@qoretechnologies/reqore';
+import { IReqoreContext } from '@qoretechnologies/reqore/dist/context/ReqoreContext';
+
+/**
+ * A high-order component that provides an easy access to
+ * opening and closing a modal
+ */
+export default (
+    reqoreProperty?: keyof IReqoreContext
+  ): Function =>
+  (Component) => {
+    return (props) => {
+      const property = useReqoreProperty(reqoreProperty);
+
+      return <Component {...{
+        ...props,
+        [reqoreProperty]: property
+      }} />;
+    };
+  };
diff --git a/src/js/views/services/pane/index.tsx b/src/js/views/services/pane/index.tsx
index 3e63aa61..b8692428 100644
--- a/src/js/views/services/pane/index.tsx
+++ b/src/js/views/services/pane/index.tsx
@@ -112,24 +112,24 @@ export default class ServicesDetail extends Component {
       'Detail',
       {
         title: 'Config',
-        suffix: `(${configItemsCount})`,
+        suffix: `${configItemsCount}`,
       },
       'Code',
-      { title: 'Methods', suffix: `(${size(methods)})` },
+      { title: 'Methods', suffix: `${size(methods)}` },
       'Log',
       // @ts-ignore ts-migrate(2339) FIXME: Property 'process' does not exist on type 'Object'... Remove this comment to see the full error message
-      { title: 'Process', suffix: `(${service.process ? 1 : 0})` },
+      { title: 'Process', suffix: `${service.process ? 1 : 0}` },
       // @ts-ignore ts-migrate(2339) FIXME: Property 'mappers' does not exist on type 'Object'... Remove this comment to see the full error message
-      { title: 'Mappers', suffix: `(${size(service.mappers)})` },
+      { title: 'Mappers', suffix: `${size(service.mappers)}` },
       // @ts-ignore ts-migrate(2339) FIXME: Property 'vmaps' does not exist on type 'Object'.
-      { title: 'Valuemaps', suffix: `(${size(service.vmaps)})` },
+      { title: 'Valuemaps', suffix: `${size(service.vmaps)}` },
       {
         title: 'Resources',
         // @ts-ignore ts-migrate(2339) FIXME: Property 'resources' does not exist on type 'Objec... Remove this comment to see the full error message
-        suffix: `(${size(service.resources)} / ${size(
+        suffix: `${size(service.resources)} / ${size(
           // @ts-ignore ts-migrate(2339) FIXME: Property 'resource_files' does not exist on type '... Remove this comment to see the full error message
           service.resource_files
-        )})`,
+        )}`,
       },
       'Authlabels',
       'Releases',
diff --git a/src/js/views/services/tabs/methods/modal_code.tsx b/src/js/views/services/tabs/methods/modal_code.tsx
index b246ba14..004dd1b6 100644
--- a/src/js/views/services/tabs/methods/modal_code.tsx
+++ b/src/js/views/services/tabs/methods/modal_code.tsx
@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import { useReqoreProperty } from '@qoretechnologies/reqore';
 import Modal from '../../../../components/modal';
 import SourceCode from '../../../../components/source_code';
 
@@ -12,17 +12,20 @@ const ServiceMethodModal: Function = ({
   onClose,
   method,
 }: // @ts-ignore ts-migrate(2724) FIXME: 'React' has no exported member named 'Element'. Di... Remove this comment to see the full error message
-Props) => (
-  <Modal>
-    <Modal.Header titleId="methodsTableModalLabel" onClose={onClose}>
-      {/* @ts-ignore ts-migrate(2339) FIXME: Property 'name' does not exist on type 'Object'. */}
-      Source code for {method.name}
-    </Modal.Header>
-    <Modal.Body>
-      {/* @ts-ignore ts-migrate(2769) FIXME: No overload matches this call. */}
-      <SourceCode>{method.body}</SourceCode>
-    </Modal.Body>
-  </Modal>
-);
+Props) => {
+  const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
+  return (
+    <Modal zIndex={getAndIncreaseZIndex()}>
+      <Modal.Header titleId="methodsTableModalLabel" onClose={onClose}>
+        {/* @ts-ignore ts-migrate(2339) FIXME: Property 'name' does not exist on type 'Object'. */}
+        Source code for {method.name}
+      </Modal.Header>
+      <Modal.Body>
+        {/* @ts-ignore ts-migrate(2769) FIXME: No overload matches this call. */}
+        <SourceCode>{method.body}</SourceCode>
+      </Modal.Body>
+    </Modal>
+  );
+};
 
 export default ServiceMethodModal;
diff --git a/src/js/views/services/tabs/methods/modal_run.tsx b/src/js/views/services/tabs/methods/modal_run.tsx
index 538d35c2..f449bd1f 100644
--- a/src/js/views/services/tabs/methods/modal_run.tsx
+++ b/src/js/views/services/tabs/methods/modal_run.tsx
@@ -1,16 +1,18 @@
 // @flow
 import yaml from 'js-yaml';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { connect } from 'react-redux';
 import Box from '../../../../components/box';
 import { Control as Button, Controls as ButtonGroup } from '../../../../components/controls';
 import Dropdown, { Control, Item } from '../../../../components/dropdown';
 import Modal from '../../../../components/modal';
 import PaneItem from '../../../../components/pane_item';
+import injectReqore from '../../../../hocomponents/injectReqore';
 import settings from '../../../../settings';
 import { fetchJson, fetchWithNotifications } from '../../../../store/api/utils';
 
 @connect()
+@injectReqore('getAndIncreaseZIndex')
 export default class ModalRun extends Component {
   props: {
     method: any;
@@ -136,7 +138,11 @@ export default class ModalRun extends Component {
     const { service } = this.props;
 
     return (
-      <Modal hasFooter onResizeStop={this.handleModalResize}>
+      <Modal
+        hasFooter
+        onResizeStop={this.handleModalResize}
+        zIndex={this.props.getAndIncreaseZIndex()}
+      >
         <Modal.Header titleId="errorsTableModalLabel" onClose={this.handleCancel}>
           {/* @ts-ignore ts-migrate(2339) FIXME: Property 'name' does not exist on type 'Object'. */}
           Method execution for {service.name} service
diff --git a/src/js/views/services/tabs/methods/row.tsx b/src/js/views/services/tabs/methods/row.tsx
index 451307ae..8cba509e 100644
--- a/src/js/views/services/tabs/methods/row.tsx
+++ b/src/js/views/services/tabs/methods/row.tsx
@@ -1,5 +1,4 @@
 // @flow
-import React from 'react';
 import compose from 'recompose/compose';
 import mapProps from 'recompose/mapProps';
 import pure from 'recompose/onlyUpdateForKeys';
@@ -7,7 +6,7 @@ import withHandlers from 'recompose/withHandlers';
 import { ActionColumn } from '../../../../components/ActionColumn';
 import ContentByType from '../../../../components/ContentByType';
 // @ts-ignore ts-migrate(2306) FIXME: File '/workspace/qorus-webapp/src/js/components/co... Remove this comment to see the full error message
-import { Control as Button, Controls } from '../../../../components/controls';
+import { ReqoreButton, ReqoreControlGroup } from '@qoretechnologies/reqore';
 import NameColumn from '../../../../components/NameColumn';
 import { Td, Tr } from '../../../../components/new_table';
 import SLAControl from '../../../../components/sla_control';
@@ -55,10 +54,10 @@ Props) => (
     {/* @ts-ignore ts-migrate(2339) FIXME: Property 'name' does not exist on type 'Object'. */}
     <NameColumn name={method.name} />
     <ActionColumn>
-      <Controls>
-        <Button icon="play" onClick={handleRunClick} />
-        <Button icon="code" onClick={handleCodeClick} />
-      </Controls>
+      <ReqoreControlGroup stack size="small">
+        <ReqoreButton icon="PlayLine" onClick={handleRunClick} />
+        <ReqoreButton icon="CodeLine" onClick={handleCodeClick} />
+      </ReqoreControlGroup>
     </ActionColumn>
     <Td className="narrow">
       {/* @ts-ignore ts-migrate(2339) FIXME: Property 'locktype' does not exist on type 'Object... Remove this comment to see the full error message */}
diff --git a/src/js/views/system/slas/detail/events/view.tsx b/src/js/views/system/slas/detail/events/view.tsx
index 03da0601..0f5abf18 100644
--- a/src/js/views/system/slas/detail/events/view.tsx
+++ b/src/js/views/system/slas/detail/events/view.tsx
@@ -1,5 +1,4 @@
 // @flow
-import React from 'react';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import lifecycle from 'recompose/lifecycle';
@@ -46,7 +45,7 @@ const EventsView: Function = ({
   collection,
 }: // @ts-ignore ts-migrate(2724) FIXME: 'React' has no exported member named 'Element'. Di... Remove this comment to see the full error message
 Props) => (
-  <Flex display="initial">
+  <Flex display="flex">
     {collection.length ? (
       <EventsTable
         sortData={sortData}
@@ -57,9 +56,7 @@ Props) => (
     ) : (
       <NoData />
     )}
-    {canLoadMore && (
-      <Button label={`Load ${limit} more...`} btnStyle="success" big onClick={handleLoadMore} />
-    )}
+    {canLoadMore && <Button label={`Load ${limit} more...`} big onClick={handleLoadMore} />}
   </Flex>
 );
 
diff --git a/src/js/views/system/slas/detail/index.tsx b/src/js/views/system/slas/detail/index.tsx
index 827f1556..22d906eb 100644
--- a/src/js/views/system/slas/detail/index.tsx
+++ b/src/js/views/system/slas/detail/index.tsx
@@ -1,16 +1,14 @@
 // @flow
 import moment from 'moment';
-import React from 'react';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import mapProps from 'recompose/mapProps';
 import pure from 'recompose/onlyUpdateForKeys';
 import { createSelector } from 'reselect';
-import Box from '../../../../components/box';
-import { Breadcrumbs, Crumb, CrumbTabs } from '../../../../components/breadcrumbs';
 import Flex from '../../../../components/Flex';
-import Headbar from '../../../../components/Headbar';
 import { SimpleTab, SimpleTabs } from '../../../../components/SimpleTabs';
+import Box from '../../../../components/box';
+import { Breadcrumbs, Crumb, CrumbTabs } from '../../../../components/breadcrumbs';
 import { DATE_FORMATS } from '../../../../constants/dates';
 import patch from '../../../../hocomponents/patchFuncArgs';
 import queryControl from '../../../../hocomponents/queryControl';
@@ -47,16 +45,14 @@ const SLADetail: Function = ({
 }: // @ts-ignore ts-migrate(2724) FIXME: 'React' has no exported member named 'Element'. Di... Remove this comment to see the full error message
 Props) => (
   <Flex>
-    <Headbar>
-      <Breadcrumbs>
-        <Crumb link="/slas"> SLAs </Crumb>
-        <Crumb>
-          {/* @ts-ignore ts-migrate(2339) FIXME: Property 'name' does not exist on type 'Object'. */}
-          {sla.name} <small>({sla.slaid})</small>
-        </Crumb>
-        <CrumbTabs tabs={['Events', 'Sources', 'Performance']} defaultTab="events" />
-      </Breadcrumbs>
-    </Headbar>
+    <Breadcrumbs>
+      <Crumb link="/slas"> SLAs </Crumb>
+      <Crumb>
+        {/* @ts-ignore ts-migrate(2339) FIXME: Property 'name' does not exist on type 'Object'. */}
+        {sla.name} <small>({sla.slaid})</small>
+      </Crumb>
+      <CrumbTabs tabs={['Performance', 'Events', 'Sources']} defaultTab="performance" />
+    </Breadcrumbs>
     <Box top>
       <SimpleTabs activeTab={tabQuery}>
         <SimpleTab name="events">
@@ -121,7 +117,7 @@ export default compose(
   patch('load', ['fetchParams', 'id']),
   sync('meta'),
   // @ts-ignore ts-migrate(2554) FIXME: Expected 3 arguments, but got 1.
-  withTabs('events'),
+  withTabs('performance'),
   pure(['location', 'children']),
   unsync()
 )(SLADetail);

From 036df5d7d91a92ae5fa37c85ffec659c9bc431f6 Mon Sep 17 00:00:00 2001
From: Foxhoundn <filip.witosz@gmail.com>
Date: Thu, 21 Sep 2023 08:23:01 +0000
Subject: [PATCH 4/5] Send redirect_uri in body

---
 src/js/views/system/connections/controls.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/js/views/system/connections/controls.tsx b/src/js/views/system/connections/controls.tsx
index 151012f1..54a0f565 100644
--- a/src/js/views/system/connections/controls.tsx
+++ b/src/js/views/system/connections/controls.tsx
@@ -19,10 +19,13 @@ import PingModal from './modals/ping';
 
 const OAuth2Modal = ({ name, closeModal, ...rest }: any) => {
   const redirect_uri = window.location.href;
+
   const { loading, value } = useAsyncRetry(async () => {
-    const data = await put(
-      `${settings.REST_BASE_URL}/connections/${name}/oauth2AuthRequestUri?redirect_uri=${redirect_uri}`
-    );
+    const data = await put(`${settings.REST_BASE_URL}/connections/${name}/oauth2AuthRequestUri`, {
+      body: JSON.stringify({
+        redirect_uri,
+      }),
+    });
 
     return data;
   });

From e79e6fd937b80af25c1ab3e874a9b939b85da163 Mon Sep 17 00:00:00 2001
From: Foxhoundn <filip.witosz@gmail.com>
Date: Thu, 21 Sep 2023 08:30:40 +0000
Subject: [PATCH 5/5] Remove unwanted queries when message disappears

---
 src/js/hocomponents/modal.tsx                |  4 ----
 src/js/views/system/connections/controls.tsx |  1 -
 src/js/views/system/connections/pane.tsx     | 11 ++++++++++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/js/hocomponents/modal.tsx b/src/js/hocomponents/modal.tsx
index fa90c638..aa3eeef5 100644
--- a/src/js/hocomponents/modal.tsx
+++ b/src/js/hocomponents/modal.tsx
@@ -13,18 +13,14 @@ export default (): Function => (Component) => {
     const removeModal = useReqoreProperty('removeModal');
 
     const handleOpenModal = (Modal) => {
-      console.log(addModal);
       const id = addModal(Modal);
       setModalId(id);
     };
 
-    console.log(modalId);
-
     return (
       <Component
         openModal={handleOpenModal}
         closeModal={() => {
-          console.log(modalId);
           removeModal(modalId);
         }}
         {...props}
diff --git a/src/js/views/system/connections/controls.tsx b/src/js/views/system/connections/controls.tsx
index 54a0f565..12cebcc7 100644
--- a/src/js/views/system/connections/controls.tsx
+++ b/src/js/views/system/connections/controls.tsx
@@ -32,7 +32,6 @@ const OAuth2Modal = ({ name, closeModal, ...rest }: any) => {
 
   useEffect(() => {
     if (value) {
-      //console.log(value);
       window.location.href = value;
     }
   }, [value]);
diff --git a/src/js/views/system/connections/pane.tsx b/src/js/views/system/connections/pane.tsx
index e1cf628a..df87fa72 100644
--- a/src/js/views/system/connections/pane.tsx
+++ b/src/js/views/system/connections/pane.tsx
@@ -25,6 +25,7 @@ import PaneItem from '../../../components/pane_item';
 import LogContainer from '../../../containers/log';
 import { attrsSelector } from '../../../helpers/remotes';
 import { getDependencyObjectLink } from '../../../helpers/system';
+import queryControl from '../../../hocomponents/queryControl';
 import showIfPassed from '../../../hocomponents/show-if-passed';
 import withDispatch from '../../../hocomponents/withDispatch';
 import settings from '../../../settings';
@@ -156,7 +157,6 @@ class ConnectionsPane extends Component {
   };
 
   render() {
-    console.log(this.props);
     // @ts-ignore ts-migrate(2339) FIXME: Property 'deps' does not exist on type 'Object'.
     const { deps, alerts, locked, url_hash } = this.props.remote;
     // @ts-ignore ts-migrate(2339) FIXME: Property 'paneTab' does not exist on type '{ remot... Remove this comment to see the full error message
@@ -214,6 +214,11 @@ class ConnectionsPane extends Component {
             title={messageTitle}
             duration={messageDuration}
             onFinish={() => {
+              this.props.changeStatusQuery(undefined);
+              this.props.changeMessageQuery(undefined);
+              this.props.changeMessageTitleQuery(undefined);
+              this.props.changeMessageDurationQuery(undefined);
+
               this.setState({
                 status: null,
                 message: null,
@@ -352,5 +357,9 @@ export default compose(
     remote: { ...remote, url: settings.IS_HTTP ? remote.url : remote.safeUrl },
     ...rest,
   })),
+  queryControl('status'),
+  queryControl('message'),
+  queryControl('messageTitle'),
+  queryControl('messageDuration'),
   injectIntl
 )(ConnectionsPane);