Issue #3501766 by phenaproxima: Remove $activeTab from the Svelte code

sveltejs/src/MultipleChoiceFilter.svelte

 <script>
   import { createEventDispatcher, getContext, onMount } from 'svelte';
-  import {
-    moduleCategoryFilter,
-    moduleCategoryVocabularies,
-    activeTab,
-  } from './stores';
+  import { moduleCategoryFilter, moduleCategoryVocabularies } from './stores';
   import { normalizeOptions, shallowCompare } from './util';
-  import { BASE_URL, FILTERS } from './constants';
+  import { BASE_URL, FILTERS, DEFAULT_SOURCE_ID } from './constants';
 
   const { Drupal } = window;
   const dispatch = createEventDispatcher();
@@ -199,7 +195,7 @@
   // eslint-disable-next-line import/no-mutable-exports,import/prefer-default-export
   export async function setModuleCategoryVocabulary() {
     apiModuleCategory.then((value) => {
-      const normalizedValue = normalizeOptions(value[$activeTab]);
+      const normalizedValue = normalizeOptions(value[DEFAULT_SOURCE_ID]);
       const storedValue = $moduleCategoryVocabularies;
       if (
         storedValue === null ||
@@ -242,7 +238,7 @@
         class="pb-filter__multi-dropdown__items
       pb-filter__multi-dropdown__items--{filterVisible ? 'visible' : 'hidden'}"
       >
-        {#each categoryList[$activeTab] as dt}
+        {#each categoryList[DEFAULT_SOURCE_ID] as dt}
           <div class="pb-filter__checkbox__container">
             <label for={dt.id}>
               <input

sveltejs/src/ProcessQueueButton.svelte

 <script>
   import { get } from 'svelte/store';
-  import { queueList, activeTab, updated } from './stores';
+  import { queueList, updated } from './stores';
   import { processQueue } from './QueueProcessor';
   import Loading from './Loading.svelte';
   import LoadingEllipsis from './Project/LoadingEllipsis.svelte';
@@ -9,7 +9,7 @@
 
   const { Drupal } = window;
 
-  const currentQueueList = get(queueList)[get(activeTab)] || [];
+  const currentQueueList = get(queueList) || [];
   const queueLength = Object.keys(currentQueueList).length;
 
   const handleClick = async () => {

sveltejs/src/Project/ActionButton.svelte

@@ -3,13 +3,7 @@
   import { openPopup, getCommandsPopupMessage } from '../popup';
   import ProjectButtonBase from './ProjectButtonBase.svelte';
   import ProjectStatusIndicator from './ProjectStatusIndicator.svelte';
-  import {
-    addToQueue,
-    queueList,
-    removeFromQueue,
-    updated,
-    activeTab,
-  } from '../stores';
+  import { addToQueue, queueList, removeFromQueue, updated } from '../stores';
   import ProjectIcon from './ProjectIcon.svelte';
   import LoadingEllipsis from './LoadingEllipsis.svelte';
   import { processQueue } from '../QueueProcessor';
@@ -20,24 +14,20 @@
   const { Drupal } = window;
   const processMultipleProjects = MAX_SELECTIONS === null || MAX_SELECTIONS > 1;
 
-  $: isInQueue =
-    $queueList[$activeTab] &&
-    $queueList[$activeTab].some((item) => item.id === project.id);
+  $: isInQueue = $queueList.some((item) => item.id === project.id);
 
-  const queueFull =
-    $queueList[$activeTab] &&
   // If MAX_SELECTIONS is null (no limit), then the queue is never full.
-    Object.keys($queueList[$activeTab]).length === MAX_SELECTIONS;
+  const queueFull = $queueList.length === MAX_SELECTIONS;
 
   let loading = false;
 
   function handleAddToQueueClick(singleProject) {
-    addToQueue($activeTab, singleProject);
+    addToQueue(singleProject);
     $updated = new Date().getTime();
   }
 
   function handleDequeueClick(projectId) {
-    removeFromQueue($activeTab, projectId);
+    removeFromQueue(projectId);
     $updated = new Date().getTime();
   }
 

sveltejs/src/ProjectBrowser.svelte

@@ -14,7 +14,6 @@
     sort,
     focusedElement,
     searchString,
-    activeTab,
     categoryCheckedTrack,
     sortCriteria,
     preferredView,
@@ -40,7 +39,6 @@
   let rows = [];
   let sources = [];
   let dataArray = [];
-  let projectId = null;
   const pageIndex = 0; // first row
 
   let loading = true;
@@ -62,10 +60,10 @@
   });
   let searchComponent;
 
-  function hasItemsInQueue(tabId) {
+  function hasItemsInQueue() {
     let hasItems = false;
     queueList.subscribe((currentList) => {
-      hasItems = currentList[tabId] && currentList[tabId].length > 0;
+      hasItems = currentList.length > 0;
     })();
     return hasItems;
   }
@@ -85,17 +83,17 @@
       page: _page,
       limit: $pageSize,
       sort: $sort,
-      source: $activeTab,
+      source: DEFAULT_SOURCE_ID,
     });
     if (searchText) {
       searchParams.set('search', searchText);
     }
     if ($moduleCategoryFilter && $moduleCategoryFilter.length) {
       searchParams.set('categories', $moduleCategoryFilter);
-      $categoryCheckedTrack[$activeTab] = $moduleCategoryFilter;
+      $categoryCheckedTrack[DEFAULT_SOURCE_ID] = $moduleCategoryFilter;
     } else {
       // If no category filter is set, reset the tracking for the active tab.
-      $categoryCheckedTrack[$activeTab] = [];
+      $categoryCheckedTrack[DEFAULT_SOURCE_ID] = [];
     }
     if ('developmentStatus' in $filters) {
       searchParams.set(
@@ -131,11 +129,14 @@
       // A list of the available sources to get project data.
       sources = Object.keys(data);
       dataArray = Object.values(data);
-      rows = data[$activeTab].list;
-      $rowsCount = data[$activeTab].totalResults;
+      rows = data[DEFAULT_SOURCE_ID].list;
+      $rowsCount = data[DEFAULT_SOURCE_ID].totalResults;
 
-      if (data[$activeTab].error && data[$activeTab].error.length) {
-        messenger.add(data[$activeTab].error, { type: 'error' });
+      if (
+        data[DEFAULT_SOURCE_ID].error &&
+        data[DEFAULT_SOURCE_ID].error.length
+      ) {
+        messenger.add(data[DEFAULT_SOURCE_ID].error, { type: 'error' });
       }
 
       if (
@@ -171,22 +172,13 @@
    */
   onMount(async () => {
     if (MAX_SELECTIONS === 1) {
-      $queueList = {};
+      $queueList = [];
     }
     const savedPageSize = localStorage.getItem('pageSize');
     if (savedPageSize) {
       pageSize.set(Number(savedPageSize));
     }
 
-    $activeTab = DEFAULT_SOURCE_ID;
-    // The project ID, if there is one, will be the last thing in the URL
-    // path, and we can reasonably expect it to be different than the
-    // source plugin ID.
-    projectId = window.location.pathname.substring(1).split('/').pop();
-    if (projectId === $activeTab) {
-      projectId = null;
-    }
-
     await load($page);
     const focus = element ? document.getElementById(element) : false;
     if (focus) {
@@ -308,7 +300,7 @@
       <div class="pb-layout__header">
         <div class="pb-search-results">
           {#each dataArray as dataValue}
-            {#if $activeTab === dataValue.pluginId}
+            {#if DEFAULT_SOURCE_ID === dataValue.pluginId}
               {Drupal.formatPlural(
                 $rowsCount,
                 `${numberFormatter.format(1)} Result`,
@@ -362,7 +354,7 @@
       {#each rows as row, index (row)}
         <Project {toggleView} project={row} />
       {/each}
-      {#if PACKAGE_MANAGER.available && hasItemsInQueue($activeTab) && (MAX_SELECTIONS === null || MAX_SELECTIONS > 1)}
+      {#if PACKAGE_MANAGER.available && hasItemsInQueue() && (MAX_SELECTIONS === null || MAX_SELECTIONS > 1)}
         <ProcessQueueButton />
       {/if}
     {/key}

sveltejs/src/QueueProcessor.js

 import { get } from 'svelte/store';
 import { openPopup } from './popup';
-import { BASE_URL } from './constants';
-import { queueList, activeTab, clearQueueForTab } from './stores';
+import { BASE_URL, DEFAULT_SOURCE_ID } from './constants';
+import { queueList, clearQueue } from './stores';
 
 export const handleError = async (errorResponse) => {
   // The error can take on many shapes, so it should be normalized.
@@ -98,9 +98,9 @@ export const activateProject = async (projectIds) => {
  *   Returns a promise that resolves once the download and activation process is complete.
  */
 export const doRequests = async (projectIds) => {
-  const beginInstallUrl = `${BASE_URL}admin/modules/project_browser/install-begin?source=${get(
-    activeTab,
-  )}`;
+  const beginInstallUrl = `${BASE_URL}admin/modules/project_browser/install-begin?source=${
+    DEFAULT_SOURCE_ID
+  }`;
   const beginInstallResponse = await fetch(beginInstallUrl);
   if (!beginInstallResponse.ok) {
     await handleError(beginInstallResponse);
@@ -166,7 +166,7 @@ export const doRequests = async (projectIds) => {
 };
 
 export const processQueue = async () => {
-  const currentQueueList = get(queueList)[get(activeTab)] || [];
+  const currentQueueList = get(queueList) || [];
   const projectsToActivate = [];
   const projectsToDownloadAndActivate = [];
 
@@ -189,7 +189,7 @@ export const processQueue = async () => {
 
   document.body.style.pointerEvents = 'auto';
 
-  clearQueueForTab(get(activeTab));
+  clearQueue();
   for (const project of currentQueueList) {
     project.status = 'active';
   }

sveltejs/src/stores.js

@@ -2,12 +2,9 @@
 import { writable } from 'svelte/store';
 
 import {
-  DEFAULT_SOURCE_ID, SORT_OPTIONS, FILTERS,
+  SORT_OPTIONS, FILTERS,
 } from './constants';
 
-// Store the selected tab.
-const storedActiveTab = DEFAULT_SOURCE_ID;
-
 // Store for applied advanced filters.
 const defaultFilters = {};
 Object.entries(FILTERS).forEach(([name, definition]) => {
@@ -30,8 +27,6 @@ moduleCategoryVocabularies.subscribe((val) => localStorage.setItem('moduleCatego
 const storedPage = 0;
 export const page = writable(storedPage);
 
-export const activeTab = writable(storedActiveTab);
-
 // Store the current sort selected.
 const storedSort = SORT_OPTIONS[0].id;
 export const sort = writable(storedSort);
@@ -66,33 +61,29 @@ export const mediaQueryValues = writable(new Map());
 export const updated = writable(0);
 
 // Store for the queue list.
-const storedQueueList = {};
-export const queueList = writable(storedQueueList);
+export const queueList = writable([]);
 
-export function addToQueue(tabId, project) {
+export function addToQueue(project) {
   queueList.update((currentList) => {
-    if (!currentList[tabId]) {
-      currentList[tabId] = [];
+    if (!currentList.includes(project)) {
+      currentList.push(project);
     }
-    currentList[tabId].push(project);
     return currentList;
   });
 }
 
-export function removeFromQueue(tabId, projectId) {
+export function removeFromQueue(projectId) {
   queueList.update((currentList) => {
-    if (currentList[tabId]) {
-      currentList[tabId] = currentList[tabId].filter(
+    currentList = currentList.filter(
       (item) => item.id !== projectId,
     );
-    }
     return currentList;
   });
 }
 
-export function clearQueueForTab(tabId) {
+export function clearQueue() {
   queueList.update((currentList) => {
-    currentList[tabId] = [];
+    currentList = [];
     return currentList;
   });
 }