Merge pull request #83 from qoretechnologies/develop

v1.1.11
qoretechnologies · Sep 21, 2023 · 2ac9b60 · 2ac9b60
2 parents 001f755 + f78d425
commit 2ac9b60
Show file tree

Hide file tree

Showing 18 changed files with 290 additions and 210 deletions.
diff --git 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": {
@@ -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/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
@@ -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
@@ -1,14 +1,13 @@
 // @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';
 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/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/hocomponents/injectReqore.tsx 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/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/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}

diff --git 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
@@ -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;