@scaleflex/widget-explorer 0.0.1

package/lib/components/AssetsList/ListView/ListView.utils.js

@@ -0,0 +1,30 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { LIST_VIEW_COLS_IDS } from '@scaleflex/widget-utils/lib/constants';
+var getDefaultColumns = function getDefaultColumns(_ref) {
+  var _ref$isAssetsColumns = _ref.isAssetsColumns,
+    isAssetsColumns = _ref$isAssetsColumns === void 0 ? false : _ref$isAssetsColumns,
+    _ref$selectedListView = _ref.selectedListViewCols,
+    selectedListViewCols = _ref$selectedListView === void 0 ? [] : _ref$selectedListView,
+    _ref$selectedListView2 = _ref.selectedListViewFoldersCols,
+    selectedListViewFoldersCols = _ref$selectedListView2 === void 0 ? [] : _ref$selectedListView2,
+    isFastToken = _ref.isFastToken;
+  var getRestColumns = function getRestColumns() {
+    if (isAssetsColumns) {
+      var columns = selectedListViewCols;
+      if (isFastToken) {
+        columns = columns.filter(function (col) {
+          return col !== LIST_VIEW_COLS_IDS.LABELS;
+        });
+      }
+      return columns;
+    }
+    return selectedListViewFoldersCols;
+  };
+  return [LIST_VIEW_COLS_IDS.NAME].concat(_toConsumableArray(getRestColumns()));
+};
+export { getDefaultColumns };

package/lib/components/AssetsList/ListView/SearchListView/index.js

@@ -0,0 +1,109 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Notification } from '@scaleflex/ui/core';
+import { useExplorerI18n } from '../../../../hooks';
+import { useSearchView } from '../../SearchView.hook';
+import ListViewFilesSkeleton from '../FilesSkeleton';
+import ListViewFoldersSkeleton from '../FoldersSkeleton';
+import FilesAccordion from '../FilesAccordion';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var SearchListView = function SearchListView(_ref) {
+  var onScroll = _ref.onScroll,
+    tableHeadStickTop = _ref.tableHeadStickTop,
+    containerWidth = _ref.containerWidth,
+    handleContextMenuToggle = _ref.handleContextMenuToggle,
+    handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
+    openCurrentFolderContextMenu = _ref.openCurrentFolderContextMenu,
+    sortProps = _ref.sortProps,
+    visibleColumns = _ref.visibleColumns,
+    setVisibleColumns = _ref.setVisibleColumns,
+    children = _ref.children;
+  var _useSearchView = useSearchView(),
+    searchViewDetails = _useSearchView.searchViewDetails,
+    isNotificationVisible = _useSearchView.isNotificationVisible,
+    setIsNotificationVisible = _useSearchView.setIsNotificationVisible;
+  var i18n = useExplorerI18n();
+  var renderContent = function renderContent() {
+    var _ref2 = searchViewDetails || {},
+      showSkeletonLoader = _ref2.showSkeletonLoader,
+      noResultsContent = _ref2.noResultsContent,
+      itemsDetails = _ref2.itemsDetails;
+    if (showSkeletonLoader) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(ListViewFoldersSkeleton, {}), /*#__PURE__*/_jsx(ListViewFilesSkeleton, {})]
+      });
+    }
+    if (noResultsContent) return children || noResultsContent;
+    if (itemsDetails) {
+      var firstRowLabel = itemsDetails.firstRowLabel,
+        _itemsDetails$firstRo = itemsDetails.firstRowFilesUuids,
+        firstRowFilesUuids = _itemsDetails$firstRo === void 0 ? [] : _itemsDetails$firstRo,
+        _itemsDetails$firstRo2 = itemsDetails.firstRowIsNoMoreFiles,
+        firstRowIsNoMoreFiles = _itemsDetails$firstRo2 === void 0 ? true : _itemsDetails$firstRo2,
+        firstRowFetchNextFiles = itemsDetails.firstRowFetchNextFiles,
+        _itemsDetails$firstRo3 = itemsDetails.firstRowLoading,
+        firstRowLoading = _itemsDetails$firstRo3 === void 0 ? false : _itemsDetails$firstRo3,
+        _itemsDetails$showSec = itemsDetails.showSecondRow,
+        showSecondRow = _itemsDetails$showSec === void 0 ? true : _itemsDetails$showSec,
+        secondRowLabel = itemsDetails.secondRowLabel,
+        _itemsDetails$secondR = itemsDetails.secondRowFilesUuids,
+        secondRowFilesUuids = _itemsDetails$secondR === void 0 ? [] : _itemsDetails$secondR,
+        _itemsDetails$secondR2 = itemsDetails.secondRowIsNoMoreFiles,
+        secondRowIsNoMoreFiles = _itemsDetails$secondR2 === void 0 ? true : _itemsDetails$secondR2,
+        secondRowFetchNextFiles = itemsDetails.secondRowFetchNextFiles,
+        _itemsDetails$secondR3 = itemsDetails.secondRowLoading,
+        secondRowLoading = _itemsDetails$secondR3 === void 0 ? false : _itemsDetails$secondR3,
+        infoMessage = itemsDetails.infoMessage;
+      var commonProps = {
+        onScroll: onScroll,
+        sortProps: sortProps,
+        containerWidth: containerWidth,
+        visibleColumns: visibleColumns,
+        setVisibleColumns: setVisibleColumns,
+        tableHeadStickTop: tableHeadStickTop,
+        handleContextMenuToggle: handleContextMenuToggle,
+        openCurrentFolderContextMenu: openCurrentFolderContextMenu,
+        handleNavigatingThroughArrows: handleNavigatingThroughArrows
+      };
+      var renderInfoMessage = function renderInfoMessage() {
+        if (!(infoMessage && isNotificationVisible)) return;
+        return /*#__PURE__*/_jsx("div", {
+          className: "filerobot-Provider-ItemCategory-wrapper",
+          children: /*#__PURE__*/_jsx(Notification, {
+            status: "info",
+            message: infoMessage,
+            onClose: function onClose() {
+              return setIsNotificationVisible(false);
+            }
+          })
+        });
+      };
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [renderInfoMessage(), children, firstRowFilesUuids.length > 0 && /*#__PURE__*/_jsx(FilesAccordion, _objectSpread({
+          label: firstRowLabel,
+          noMoreFiles: firstRowIsNoMoreFiles,
+          loading: firstRowLoading,
+          filesUuids: firstRowFilesUuids,
+          fetchNextFiles: firstRowFetchNextFiles,
+          hideAccordionHeader: !firstRowLabel
+        }, commonProps)), showSecondRow && /*#__PURE__*/_jsx(FilesAccordion, _objectSpread({
+          label: secondRowLabel || i18n('searchExtendedWithCountLabel', {
+            files_count: (secondRowFilesUuids === null || secondRowFilesUuids === void 0 ? void 0 : secondRowFilesUuids.length) || 0
+          }),
+          noMoreFiles: secondRowIsNoMoreFiles,
+          loading: secondRowLoading,
+          filesUuids: secondRowFilesUuids,
+          fetchNextFiles: secondRowFetchNextFiles
+        }, commonProps))]
+      });
+    }
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: renderContent()
+  });
+};
+export default SearchListView;

package/lib/components/AssetsList/ListView/index.js

@@ -0,0 +1,203 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import { useExplorer, useToLocaleNumber } from '../../../hooks';
+import { selectIsExplorerPluginLoading } from '../../../slices/common.slice';
+import { selectFoldersStats, selectIsFolderFilesRecursiveFetch, selectNoMoreFolders } from '../../../slices/folders.slice';
+import { selectIsFoldersView, selectIsSearchMode } from '../../../slices/views.slice';
+import { scrollToTopButtonToggled, topSectionElevated } from '../../../slices/topSection.slice';
+import { selectFilesStats, selectIsNoMoreFiles } from '../../../slices/files.slice';
+import FoldersSection from './FoldersSection';
+import Styled from '../AssetsList.styled';
+import ListViewFoldersSkeleton from './FoldersSkeleton';
+import ListViewFilesSkeleton from './FilesSkeleton';
+import SearchListView from './SearchListView';
+import InfiniteScroll from '../../InfiniteScroll/InfiniteScroll';
+import { getDefaultColumns } from './ListView.utils';
+import FilesAccordion from './FilesAccordion';
+import { selectIsAiSearch, selectIsSimilarSearchActive } from '../../../slices/search.slice';
+import { selectIsFiltersActive } from '../../../slices/filters.slice';
+
+// TODO: This component needs to be refactored, to split FoldersSection with its skeleton/selectors/functions into a component
+// and another for FilesSection. or maybe compose it with GridView as they are almost similar?
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var ListView = function ListView(_ref) {
+  var foldersUuids = _ref.foldersUuids,
+    filesUuids = _ref.filesUuids,
+    hasFolders = _ref.hasFolders,
+    hasFiles = _ref.hasFiles,
+    isFoldersLoading = _ref.isFoldersLoading,
+    isFilesLoading = _ref.isFilesLoading,
+    tableHeadStickTop = _ref.tableHeadStickTop,
+    handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
+    containerWidth = _ref.containerWidth,
+    handleContextMenuToggle = _ref.handleContextMenuToggle,
+    sortProps = _ref.sortProps,
+    hideAccordionHeader = _ref.hideAccordionHeader,
+    fetchNextFiles = _ref.fetchNextFiles,
+    fetchNextFolders = _ref.fetchNextFolders,
+    openFolderOnClick = _ref.openFolderOnClick,
+    openCurrentFolderContextMenu = _ref.openCurrentFolderContextMenu,
+    scrollableElem = _ref.scrollableElem;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    selectedListViewCols = _useExplorer$opts.selectedListViewCols,
+    selectedListViewFoldersCols = _useExplorer$opts.selectedListViewFoldersCols,
+    isFastToken = _useExplorer$opts.isFastToken;
+  var toLocaleNumber = useToLocaleNumber();
+  var loading = useSelector(selectIsExplorerPluginLoading);
+  var isSearchMode = useSelector(selectIsSearchMode);
+  var isFiltersActive = useSelector(selectIsFiltersActive);
+  var noMoreFiles = useSelector(selectIsNoMoreFiles);
+  var noMoreFolders = useSelector(selectNoMoreFolders);
+  var isFoldersView = useSelector(selectIsFoldersView);
+  var isAiSearch = useSelector(selectIsAiSearch);
+  var isSimilarSearchActive = useSelector(selectIsSimilarSearchActive);
+  var _useSelector = useSelector(selectFoldersStats),
+    foldersStatsLoading = _useSelector.loading,
+    totalFoldersCount = _useSelector.totalFoldersCount,
+    totalFilesCount = _useSelector.totalFilesCount;
+  var _useSelector2 = useSelector(selectFilesStats),
+    filesStatsLoading = _useSelector2.loading,
+    filesCount = _useSelector2.filesCount;
+  var isFolderFilesFetchedRecursively = useSelector(selectIsFolderFilesRecursiveFetch);
+  var isFiltersOrSearchActive = isFiltersActive || isSearchMode;
+  var _useState = useState(!isFiltersOrSearchActive),
+    _useState2 = _slicedToArray(_useState, 2),
+    showFolders = _useState2[0],
+    setShowFolders = _useState2[1];
+  var _useState3 = useState(getDefaultColumns({
+      isAssetsColumns: true,
+      selectedListViewCols: selectedListViewCols,
+      isFastToken: isFastToken
+    })),
+    _useState4 = _slicedToArray(_useState3, 2),
+    assetsListVisibleColumns = _useState4[0],
+    setAssetsListVisibleColumns = _useState4[1];
+  var _useState5 = useState(getDefaultColumns({
+      selectedListViewFoldersCols: selectedListViewFoldersCols
+    })),
+    _useState6 = _slicedToArray(_useState5, 2),
+    foldersListVisibleColumns = _useState6[0],
+    setFoldersListVisibleColumns = _useState6[1];
+  var foldersLength = (foldersUuids === null || foldersUuids === void 0 ? void 0 : foldersUuids.length) || 0;
+  var filesLength = filesUuids.length;
+  var showFoldersSection = (hasFolders || isFoldersView && isFoldersLoading) && !isAiSearch && !isFolderFilesFetchedRecursively;
+  useUpdateEffect(function () {
+    // Auto Collapse/Fold the folders accordion on applying the first filter.
+    setShowFolders(!isFiltersActive);
+  }, [isFiltersActive]);
+  useUpdateEffect(function () {
+    // Auto Collapse/Fold the folders accordion on applying the first search.
+    setShowFolders(!isSearchMode);
+  }, [isSearchMode]);
+  var handleToggleFolders = function handleToggleFolders() {
+    setShowFolders(!showFolders);
+  };
+  var onScroll = function onScroll(e) {
+    if ((e === null || e === void 0 ? void 0 : e.target.scrollTop) > 0) {
+      dispatch(topSectionElevated(true));
+    }
+    if ((e === null || e === void 0 ? void 0 : e.target.scrollTop) >= 500) {
+      dispatch(scrollToTopButtonToggled(true));
+    }
+    if ((e === null || e === void 0 ? void 0 : e.target.scrollTop) === 0) {
+      dispatch(topSectionElevated(false));
+      dispatch(scrollToTopButtonToggled(false));
+    }
+  };
+  var getFilesCount = function getFilesCount() {
+    var isFilesLoading = !isFoldersView && filesStatsLoading;
+    var isLoadingState = filesStatsLoading && foldersStatsLoading;
+    if (isFilesLoading || isLoadingState) return '...';
+    return toLocaleNumber(filesCount || totalFilesCount || filesLength);
+  };
+  var foldersSection = showFoldersSection && /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isFoldersLoading && /*#__PURE__*/_jsx(ListViewFoldersSkeleton, {
+      hideAccordionHeader: hideAccordionHeader
+    }), hasFolders && !isFoldersLoading && /*#__PURE__*/_jsx(Styled.Accordion, {
+      expanded: showFolders,
+      hideHeader: hideAccordionHeader,
+      label: i18n(isFiltersOrSearchActive ? 'foldersViewSubFoldersWithCountLabel' : 'foldersViewFoldersWithCountLabel', {
+        folders_count: foldersStatsLoading ? '...' : toLocaleNumber(totalFoldersCount || foldersLength)
+      }),
+      onClick: loading ? null : handleToggleFolders,
+      detailStyle: {
+        paddingLeft: 24,
+        paddingRight: 24
+      },
+      onContextMenu: function onContextMenu(e) {
+        return e.stopPropagation();
+      },
+      hideIcon: loading,
+      children: /*#__PURE__*/_jsx(InfiniteScroll, {
+        dataLength: foldersUuids.length,
+        next: fetchNextFolders,
+        hasMore: !noMoreFolders,
+        scrollableTarget: scrollableElem,
+        targetedScrollElement: "foldersScrollableElement",
+        onScroll: onScroll,
+        hideOverflow: true,
+        children: /*#__PURE__*/_jsx(FoldersSection, {
+          foldersUuids: foldersUuids,
+          handleContextMenuToggle: handleContextMenuToggle,
+          handleNavigatingThroughArrows: handleNavigatingThroughArrows,
+          containerWidth: containerWidth,
+          visibleColumns: foldersListVisibleColumns,
+          setVisibleColumns: setFoldersListVisibleColumns,
+          openCurrentFolderContextMenu: openCurrentFolderContextMenu,
+          openFolderOnClick: openFolderOnClick
+        })
+      })
+    })]
+  });
+  if (isSearchMode && !isAiSearch) {
+    return /*#__PURE__*/_jsx(SearchListView, {
+      onScroll: onScroll,
+      sortProps: sortProps,
+      containerWidth: containerWidth,
+      tableHeadStickTop: tableHeadStickTop,
+      visibleColumns: assetsListVisibleColumns,
+      setVisibleColumns: setAssetsListVisibleColumns,
+      handleContextMenuToggle: handleContextMenuToggle,
+      handleNavigatingThroughArrows: handleNavigatingThroughArrows,
+      openCurrentFolderContextMenu: openCurrentFolderContextMenu,
+      children: foldersSection
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [foldersSection, isFilesLoading && /*#__PURE__*/_jsx(ListViewFilesSkeleton, {
+      hideAccordionHeader: hideAccordionHeader
+    }), hasFiles && !isFilesLoading && /*#__PURE__*/_jsx(FilesAccordion, {
+      hideAccordionHeader: hideAccordionHeader,
+      loading: loading,
+      visibleColumns: assetsListVisibleColumns,
+      containerWidth: containerWidth,
+      fetchNextFiles: fetchNextFiles,
+      filesUuids: filesUuids,
+      handleContextMenuToggle: handleContextMenuToggle,
+      handleNavigatingThroughArrows: handleNavigatingThroughArrows,
+      noMoreFiles: noMoreFiles,
+      onScroll: onScroll,
+      openCurrentFolderContextMenu: openCurrentFolderContextMenu,
+      setVisibleColumns: setAssetsListVisibleColumns,
+      sortProps: sortProps,
+      tableHeadStickTop: tableHeadStickTop,
+      label: i18n(isFiltersActive ? 'explorerFilesAccordionSearchResults' : 'mutualizedFilesWithCountLabel', {
+        files_count: getFilesCount()
+      }),
+      scrollableElem: scrollableElem,
+      isSimilarSearchActive: isSimilarSearchActive,
+      isAiSearch: isAiSearch
+    })]
+  });
+};
+export default ListView;

package/lib/components/AssetsList/ScrollToTop.js

@@ -0,0 +1,70 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { ArrowUp } from '@scaleflex/icons';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { selectShowScrollToTopButton } from '../../slices/topSection.slice';
+import Styled from './AssetsList.styled';
+
+// TODO: Check if it's possible to do this more dynamic through css maybe and avoid the states if possible? otherwise it's fine to keep it like that.
+import { jsx as _jsx } from "react/jsx-runtime";
+var ScrollToTop = function ScrollToTop(_ref) {
+  var scrollableElem = _ref.scrollableElem;
+  var showScrollToTopButton = useSelector(selectShowScrollToTopButton);
+  var _useCore = useCore(),
+    on = _useCore.on,
+    off = _useCore.off;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isProgressPanelMinimized = _useState2[0],
+    setIsProgressPanelMinimized = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isProgressPanelOpened = _useState4[0],
+    setIsProgressPanelOpened = _useState4[1];
+  var showButton = showScrollToTopButton && (isProgressPanelOpened ? isProgressPanelMinimized : true);
+  var handleProgressPanelMinimize = function handleProgressPanelMinimize(value) {
+    setIsProgressPanelMinimized(value);
+  };
+  var handleProgressPanelToggle = function handleProgressPanelToggle(value) {
+    setIsProgressPanelOpened(value);
+  };
+  useEffect(function () {
+    on('progressPanel-minimize', handleProgressPanelMinimize);
+    on('progressPanel-toggle', handleProgressPanelToggle);
+    return function () {
+      off('progressPanel-minimize', handleProgressPanelMinimize);
+      off('progressPanel-toggle', handleProgressPanelToggle);
+    };
+  }, []);
+  var scrollToTop = function scrollToTop() {
+    if (scrollableElem) {
+      scrollableElem.scrollTo({
+        top: 0
+      });
+    }
+  };
+
+  // It's wrapper should have the position: relative as it has absolute position relative to its wrapper HTML element.
+  return showButton && /*#__PURE__*/_jsx(Styled.ScrollToTopButton, {
+    isProgressPanelMinimized: isProgressPanelMinimized,
+    size: "lg",
+    color: "basic",
+    onClick: scrollToTop,
+    children: function children(props) {
+      return /*#__PURE__*/_jsx(ArrowUp, _objectSpread({}, props));
+    }
+  });
+};
+export default ScrollToTop;

package/lib/components/AssetsList/SearchView.hook.js

@@ -0,0 +1,241 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useDispatch, useSelector } from 'react-redux';
+import { useEffect, useMemo, useState } from 'react';
+import { Spinner } from '@scaleflex/widget-common';
+import { NoResult } from '@scaleflex/icons';
+import { Label } from '@scaleflex/ui/core';
+import { useExplorerI18n, useToLocaleNumber } from '../../hooks';
+import { fetchNextExtendedSearch, fetchNextQuickSearch, selectExactSearchUuids, selectExtendedSearchUuids, selectIsExtendFetching, selectIsNoMoreExactSearch, selectIsNoMoreExtendedSearch, selectIsQuickFetching, selectSearchQuery } from '../../slices/search.slice';
+import Placeholder from '../Filters/Placeholder';
+// import SearchTestPannel from './__SearchTestPannel'
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+window.toggleSearchPanel = function () {
+  var isEnabled = localStorage.getItem('enableSearchPanel') === '1';
+  if (isEnabled) {
+    localStorage.removeItem('enableSearchPanel');
+  } else {
+    localStorage.setItem('enableSearchPanel', '1');
+  }
+  window.location.reload();
+};
+
+// const isEnabledSearchPanel = localStorage.getItem('enableSearchPanel') === '1'
+
+export var useSearchView = function useSearchView() {
+  var dispatch = useDispatch();
+  var i18n = useExplorerI18n();
+  var toLocaleNumber = useToLocaleNumber();
+  var searchQuery = useSelector(selectSearchQuery);
+  var isQuickSearchFetching = useSelector(selectIsQuickFetching);
+  var isExtendedSearchFetching = useSelector(selectIsExtendFetching);
+  var exactMatchSearchUuids = useSelector(selectExactSearchUuids) || [];
+  var extendedSearchUuids = useSelector(selectExtendedSearchUuids) || [];
+  var isNoMoreExactSearchFiles = useSelector(selectIsNoMoreExactSearch);
+  var isNoMoreExtendedSearchFiles = useSelector(selectIsNoMoreExtendedSearch);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isNotificationVisible = _useState2[0],
+    setIsNotificationVisible = _useState2[1];
+  var fetchExactSearchNext = function fetchExactSearchNext() {
+    return dispatch(fetchNextQuickSearch());
+  };
+  var fetchExtendedSearchNext = function fetchExtendedSearchNext() {
+    return dispatch(fetchNextExtendedSearch());
+  };
+  var searchViewDetails = useMemo(function () {
+    var details = {
+      noResultsContent: null,
+      showSkeletonLoader: false,
+      itemsDetails: null
+    };
+
+    /**
+     * This function covers different view cases (all details is here https://scaleflexhq.atlassian.net/browse/FRA-1603):
+     * 1. QUICK and EXTENDED is loading.
+     *    Search results (...)
+     * 2. QUICK received and EXTENDED still loading.
+     *    2.1 more than 10 assets with relevance 1 from QUICK.
+     *      Exact match (...) + Extended search is running... + NOT SHOW extended results with relevance < 1 (show previews)
+     *    2.2 less than 10 assets with relevance 1 from QUICK
+     *      Exact match (...) + Extended search is running... + SHOW extended results with relevance < 1 and show previews at the bottom
+     *    2.3 0 assets with relevance 1
+     *      Exact match (...)
+     * 3. Received QUICK and EXTENDED
+     *    3.1 both Exact and Extended assets exists
+     *      3.1.1 Default case
+     *        Exact match (6) + Extended search (40)
+     *      3.1.2 >= 2000 results
+     *        Exact match (250) + Extended search (1800) + Warning "Search “Blue” is too wide and the search may not captured all the files.
+     *        Make more precise search to get get more specific result."
+     *    3.2 Exact === 0 && Extended > 0
+     *      Exact match (0) + Warning "This search has produced no exact results, so we have extended it to results with low relevancy." + Extended search (350)
+     *    3.3 Exact > 0 && Extended === 0
+     *      Exact match (4)
+     *    3.4 Exact === 0 && Extended === 0
+     *      Search results (0) + No match icon
+     */
+
+    // Removed the isExtendedSearchFetching check cause sometimes the extended finishes before quick which is not logical
+    // but if that happened, then no results would be shown instead: https://scaleflexhq.atlassian.net/browse/FRA-6170
+    if (isQuickSearchFetching) {
+      // CASE 1
+      return _objectSpread(_objectSpread({}, details), {}, {
+        showSkeletonLoader: true,
+        firstRowLabel: i18n('searchResultsWithCountLabel', {
+          files_count: '...'
+        })
+      });
+    }
+    var firstRowLabel = i18n('searchExactMatchWithCountLabel', {
+      files_count: toLocaleNumber(exactMatchSearchUuids === null || exactMatchSearchUuids === void 0 ? void 0 : exactMatchSearchUuids.length)
+    });
+    if (!isQuickSearchFetching && isExtendedSearchFetching) {
+      // CASE 2
+      var secondRowLabel = /*#__PURE__*/_jsxs("div", {
+        style: {
+          display: 'flex'
+        },
+        children: [/*#__PURE__*/_jsx(Spinner, {
+          size: 18,
+          style: {
+            marginRight: 11
+          }
+        }), i18n('searchExtendedLoadingLabel')]
+      });
+      if (exactMatchSearchUuids.length > 10) {
+        // CASE 2.1
+        return _objectSpread(_objectSpread({}, details), {}, {
+          itemsDetails: {
+            firstRowFilesUuids: exactMatchSearchUuids,
+            firstRowIsNoMoreFiles: isNoMoreExactSearchFiles,
+            firstRowLabel: firstRowLabel,
+            firstRowFetchNextFiles: fetchExactSearchNext,
+            secondRowLoading: true,
+            secondRowLabel: secondRowLabel
+          }
+        });
+      }
+      if (exactMatchSearchUuids.length > 0) {
+        // CASE 2.2
+        return _objectSpread(_objectSpread({}, details), {}, {
+          itemsDetails: {
+            firstRowFilesUuids: exactMatchSearchUuids,
+            firstRowIsNoMoreFiles: isNoMoreExactSearchFiles,
+            firstRowFetchNextFiles: fetchExactSearchNext,
+            firstRowLabel: firstRowLabel,
+            secondRowFilesUuids: extendedSearchUuids,
+            secondRowLoading: true,
+            secondRowLabel: secondRowLabel
+          }
+        });
+      }
+
+      // CASE 2.3
+      return _objectSpread(_objectSpread({}, details), {}, {
+        itemsDetails: {
+          firstRowFilesUuids: [],
+          firstRowLabel: firstRowLabel,
+          // firstRowLoading: true, // Shouldn't show skeleton loader in this case
+          secondRowFilesUuids: extendedSearchUuids,
+          secondRowLoading: true,
+          secondRowLabel: secondRowLabel
+        }
+      });
+    }
+    if (!isQuickSearchFetching && !isExtendedSearchFetching) {
+      // CASE 3
+      if (exactMatchSearchUuids.length > 0 && extendedSearchUuids.length > 0) {
+        if (exactMatchSearchUuids.length + extendedSearchUuids.length >= 2000) {
+          // CASE 3.1.2
+          return _objectSpread(_objectSpread({}, details), {}, {
+            itemsDetails: {
+              firstRowFilesUuids: exactMatchSearchUuids,
+              firstRowIsNoMoreFiles: isNoMoreExactSearchFiles,
+              firstRowFetchNextFiles: fetchExactSearchNext,
+              firstRowLabel: firstRowLabel,
+              secondRowFilesUuids: extendedSearchUuids,
+              secondRowIsNoMoreFiles: isNoMoreExtendedSearchFiles,
+              secondRowFetchNextFiles: fetchExtendedSearchNext,
+              infoMessage: i18n('searchTooWideInfo', {
+                query: searchQuery
+              })
+            }
+          });
+        }
+
+        // CASE 3.1.1
+        return _objectSpread(_objectSpread({}, details), {}, {
+          itemsDetails: {
+            firstRowFilesUuids: exactMatchSearchUuids,
+            firstRowIsNoMoreFiles: isNoMoreExactSearchFiles,
+            firstRowFetchNextFiles: fetchExactSearchNext,
+            firstRowLabel: firstRowLabel,
+            secondRowFilesUuids: extendedSearchUuids,
+            secondRowIsNoMoreFiles: isNoMoreExtendedSearchFiles,
+            secondRowFetchNextFiles: fetchExtendedSearchNext
+          }
+        });
+      }
+      if (exactMatchSearchUuids.length === 0 && extendedSearchUuids.length > 0) {
+        // CASE 3.2
+        return _objectSpread(_objectSpread({}, details), {}, {
+          itemsDetails: {
+            firstRowFilesUuids: [],
+            secondRowFilesUuids: extendedSearchUuids,
+            secondRowIsNoMoreFiles: isNoMoreExtendedSearchFiles,
+            secondRowFetchNextFiles: fetchExtendedSearchNext,
+            infoMessage: i18n('searchNoRelevancyInfo')
+          }
+        });
+      }
+      if (exactMatchSearchUuids.length > 0 && extendedSearchUuids.length === 0) {
+        // CASE 3.3
+        return _objectSpread(_objectSpread({}, details), {}, {
+          itemsDetails: {
+            firstRowFilesUuids: exactMatchSearchUuids,
+            firstRowIsNoMoreFiles: isNoMoreExactSearchFiles,
+            firstRowFetchNextFiles: fetchExactSearchNext,
+            firstRowLabel: firstRowLabel,
+            showSecondRow: false
+          }
+        });
+      }
+    }
+
+    // CASE 3.4
+    return _objectSpread(_objectSpread({}, details), {}, {
+      noResultsContent: /*#__PURE__*/_jsx(Placeholder, {
+        "data-placeholder": true,
+        className: "filerobot-Provider-Filters-noResults-placeholder",
+        icon: /*#__PURE__*/_jsx(NoResult, {
+          size: 120
+        }),
+        title: /*#__PURE__*/_jsx(Label, {
+          size: "xl",
+          children: i18n('filtersNoResult')
+        }),
+        desc: i18n('mutualizedTryAnotherSearch')
+      })
+    });
+  }, [isQuickSearchFetching, isExtendedSearchFetching, exactMatchSearchUuids, extendedSearchUuids, searchQuery]);
+  useEffect(function () {
+    setIsNotificationVisible(true);
+  }, [isQuickSearchFetching, isExtendedSearchFetching]);
+  return {
+    // searchTestPannel: isEnabledSearchPanel ? <SearchTestPannel /> : null,
+    searchViewDetails: searchViewDetails,
+    isNotificationVisible: isNotificationVisible,
+    setIsNotificationVisible: setIsNotificationVisible
+  };
+};