Merge branch 'develop' into feat/FOROME-1227

# Conflicts:
#	src/components/solution-control/solution-control.tsx

.azure/pipelines/openshift_front_deploy.yml

@@ -1,4 +1,5 @@
 trigger: none
+pr: none
 
 pool:
   vmImage: "ubuntu-20.04"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "anfisa-react-client",
-  "version": "0.6.64",
+  "version": "0.6.65",
   "private": true,
   "dependencies": {
     "@monaco-editor/react": "4.3.1",

src/components/breadcrumbs/breadcrumbs.tsx

@@ -6,10 +6,10 @@ import { observer } from 'mobx-react-lite'
 import { copyToClipboard } from '@core/copy-to-clipboard'
 import { t } from '@i18n'
 import variantStore from '@store/ws/variant'
-import { DropDown } from '@ui/dropdown'
 import { Icon } from '@ui/icon'
 import { showToast } from '@utils/notifications/showToast'
 import breadcrumbsStore from './breadcrumbs.store'
+import { SelectSecondaryDataset } from './select-preset-secondary-dataset'
 
 export interface IBreadcrumbsProps {
   className?: string
@@ -80,27 +80,26 @@ export const Breadcrumbs = observer<IBreadcrumbsProps>(
           )
         })}
         {(!isDatasetInSecondary || isCurrentSingleOption) && (
-          <Fragment>
+          <>
             <span className="mx-2">/</span>
             <div className={hasSecondarySelect ? 'shrink-1 min-w-0' : ''}>
               <div className="whitespace-nowrap overflow-hidden text-ellipsis">
                 {datasetName}
               </div>
             </div>
-          </Fragment>
+          </>
         )}
         {hasSecondarySelect && (
-          <Fragment>
+          <>
             <span className="mx-2">/</span>
             <div className="shrink-0 grow-0">
-              <DropDown
-                options={secondaryOptions}
-                value={isDatasetInSecondary ? dataset.name : ''}
-                onSelect={option => onChangeDataset(option.value)}
-                placeholder={t('header.selectSecondaryPlaceholder')}
+              <SelectSecondaryDataset
+                datasetList={secondaryOptions}
+                selectedDataset={isDatasetInSecondary ? dataset.name : ''}
+                onChangeDataset={onChangeDataset}
               />
             </div>
-          </Fragment>
+          </>
         )}
         <Icon
           name="CopyLink"

src/components/breadcrumbs/select-preset-secondary-dataset/index.ts

@@ -0,0 +1 @@
+export * from './select-secondary-dataset'

src/components/breadcrumbs/select-preset-secondary-dataset/select-secondary-dataset-popover.tsx

@@ -0,0 +1,36 @@
+import styles from '@components/solution-control/solution-control-popover/solution-control-popover.module.css'
+
+import { MenuList, MenuListItem } from '@ui/menu-list'
+import { Popover } from '@ui/popover'
+import { IPopoverBaseProps } from '@ui/popover/popover.interface'
+import { popoverOffset } from '@pages/ws/ws.constants'
+
+interface ISelectSecondaryDatasetPopoverProps extends IPopoverBaseProps {
+  datasetList: string[]
+  selectedDataset: string
+  onApply: (datasetName: string) => void
+  onClose: () => void
+}
+
+export const SelectSecondaryDatasetPopover = ({
+  datasetList,
+  selectedDataset,
+  onApply,
+  onClose,
+  ...popoverProps
+}: ISelectSecondaryDatasetPopoverProps) => (
+  <Popover onClose={onClose} offset={popoverOffset} {...popoverProps}>
+    <section className={styles.solutionControlCard}>
+      <MenuList className={styles.solutionControlCard__list} wrap="nowrap">
+        {datasetList?.map(datasetName => (
+          <MenuListItem
+            key={datasetName}
+            label={datasetName}
+            isSelected={selectedDataset === datasetName}
+            onClick={() => onApply(datasetName)}
+          />
+        ))}
+      </MenuList>
+    </section>
+  </Popover>
+)

src/components/breadcrumbs/select-preset-secondary-dataset/select-secondary-dataset.tsx

@@ -0,0 +1,50 @@
+import { observer } from 'mobx-react-lite'
+
+import { usePopover } from '@core/hooks/use-popover'
+import { t } from '@i18n'
+import { SolutionControlButton } from '@components/solution-control/solution-control-button'
+import { SelectSecondaryDatasetPopover } from './select-secondary-dataset-popover'
+
+interface ISelectSecondaryDatasetProps {
+  onChangeDataset: (name: string) => void
+  selectedDataset: string
+  datasetList: string[]
+}
+
+export const SelectSecondaryDataset = observer(
+  ({
+    selectedDataset,
+    datasetList,
+    onChangeDataset,
+  }: ISelectSecondaryDatasetProps) => {
+    const { popoverAnchor, isPopoverOpen, onToggle, closePopover } =
+      usePopover()
+
+    const handleChangeDataset = (datasetName: string) => {
+      onChangeDataset(datasetName)
+
+      closePopover()
+    }
+
+    return (
+      <>
+        <SolutionControlButton
+          solutionName={selectedDataset}
+          controlName={t('header.secondaryPlaceholder')}
+          isOpen={isPopoverOpen}
+          onClick={e => onToggle(e.currentTarget)}
+          onMouseUp={event => event.stopPropagation()}
+        />
+
+        <SelectSecondaryDatasetPopover
+          isOpen={isPopoverOpen}
+          onClose={closePopover}
+          anchorEl={popoverAnchor}
+          datasetList={datasetList}
+          selectedDataset={selectedDataset}
+          onApply={handleChangeDataset}
+        />
+      </>
+    )
+  },
+)

src/components/conditions/numeric/strictness-select/strictness-select-button.tsx

@@ -11,7 +11,7 @@ interface IStrictnessSelectButtonProps extends IPopoverButtonBaseProps {
 export const StrictnessSelectButton = ({
   isOpen,
   disabled,
-  onClick,
+  onShowPopover,
   value,
 }: IStrictnessSelectButtonProps): ReactElement => (
   <button
@@ -22,7 +22,7 @@ export const StrictnessSelectButton = ({
         : 'cursor-pointer text-black  hover:text-blue-bright',
       isOpen && 'text-blue-bright',
     )}
-    onClick={e => onClick(e.currentTarget)}
+    onClick={e => onShowPopover(e.currentTarget)}
   >
     <span
       className={cn(

src/components/conditions/numeric/strictness-select/strictness-select.tsx

@@ -21,7 +21,7 @@ export const StrictnessSelect = ({
     <>
       <StrictnessSelectButton
         isOpen={isPopoverOpen}
-        onClick={onToggle}
+        onShowPopover={onToggle}
         value={value}
         disabled={isDisabled}
       />

src/components/export-report/export-report-button.tsx

@@ -11,7 +11,11 @@ import { IPopoverButtonBaseProps } from '@ui/popover/popover.interface'
 import { MainTableDataCy } from '../data-testid/main-table.cy'
 
 export const ExportReportButton = observer(
-  ({ disabled, isOpen, onClick }: IPopoverButtonBaseProps): ReactElement => (
+  ({
+    disabled,
+    isOpen,
+    onShowPopover,
+  }: IPopoverButtonBaseProps): ReactElement => (
     <Button
       disabled={disabled}
       text={t('general.exportReport')}
@@ -21,7 +25,7 @@ export const ExportReportButton = observer(
       padding="dense"
       variant="primary-dark"
       prepend={<Icon name="Export" />}
-      onClick={e => onClick(e.currentTarget)}
+      onClick={e => onShowPopover(e.currentTarget)}
       style={{
         pointerEvents: operationsStore.isExportingReport ? 'none' : 'inherit',
         backgroundColor: !disabled && theme('colors.blue.secondary'),

src/components/export-report/export-report.tsx

@@ -35,7 +35,7 @@ export const ExportReport = observer((): ReactElement => {
     <>
       <ExportReportButton
         isOpen={isPopoverOpen}
-        onClick={onToggle}
+        onShowPopover={onToggle}
         disabled={disabled}
       />
 

src/components/solution-control/solution-control-button/solution-control-button.tsx

@@ -5,13 +5,15 @@ import cn from 'classnames'
 
 import { t } from '@i18n'
 import { Icon } from '@ui/icon'
+import { Loader } from '@ui/loader'
 
 interface ISolutionControlButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
   solutionName: string | undefined
   controlName: string
   isOpen: boolean
-  isModified: boolean
+  isModified?: boolean
+  isFetchingSolutions?: boolean
 }
 
 export const SolutionControlButton = ({
@@ -20,6 +22,7 @@ export const SolutionControlButton = ({
   controlName,
   isOpen,
   isModified,
+  isFetchingSolutions,
   ...buttonProps
 }: ISolutionControlButtonProps): ReactElement => {
   return (
@@ -28,7 +31,11 @@ export const SolutionControlButton = ({
       {...buttonProps}
     >
       <span className={styles.solutionControlButton__label}>
-        {solutionName || t('solutionControl.selectSolution', { controlName })}
+        {isFetchingSolutions ? (
+          <Loader size="xs" className="pb-2" />
+        ) : (
+          solutionName || t('solutionControl.selectSolution', { controlName })
+        )}
       </span>
       {isModified && (
         <span className={cn(styles.solutionControlButton__icon_modified)}>