nautobot 2.4.21__py3-none-any.whl → 3.0.0a3__py3-none-any.whl

nautobot/ui/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "nautobot",
+  "scripts": {
+    "build": "webpack build --mode=production",
+    "build:watch": "npm run build -- --watch",
+    "code:check": "run-s eslint prettier",
+    "code:format": "run-s eslint:fix prettier:fix",
+    "eslint": "eslint src",
+    "eslint:fix": "npm run eslint -- --fix",
+    "prebuild": "npm run code:check",
+    "prettier": "prettier src --check",
+    "prettier:fix": "prettier src --write"
+  },
+  "dependencies": {
+    "@graphiql/plugin-explorer": "0.1.15",
+    "@graphiql/toolkit": "^0.11.1",
+    "@mdi/font": "^7.4.47",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3",
+    "clipboard": "2.0.9",
+    "echarts": "^6.0.0",
+    "flatpickr": "4.6.9",
+    "graphiql": "2.4.7",
+    "graphql": "16.10.0",
+    "graphql-ws": "5.13.1",
+    "highlight.js": "11.9.0",
+    "htmx.org": "^2.0.6",
+    "jquery": "^3.7.1",
+    "jquery-ui": "^1.14.1",
+    "lodash.get": "^4.4.2",
+    "punycode": "^2.3.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "select2": "4.0.13",
+    "select2-bootstrap-5-theme": "^1.3.0",
+    "whatwg-fetch": "3.6.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "autoprefixer": "^10.4.20",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.32.0",
+    "eslint-plugin-import": "^2.32.0",
+    "globals": "^16.3.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "npm-run-all2": "^8.0.4",
+    "postcss": "^8.5.1",
+    "postcss-loader": "^8.1.1",
+    "prettier": "^3.5.3",
+    "sass": "^1.84.0",
+    "sass-loader": "^16.0.4",
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1"
+  },
+  "devEngines": {
+    "packageManager": {
+      "name": "npm",
+      "version": ">=10"
+    },
+    "runtime": {
+      "name": "node",
+      "version": ">=22"
+    }
+  },
+  "private": true,
+  "type": "module"
+}

nautobot/ui/prettier.config.js

@@ -0,0 +1,9 @@
+/**
+ * @see https://prettier.io/docs/configuration
+ * @type {import("prettier").Config}
+ */
+const config = {
+  singleQuote: true,
+};
+
+export default config;

nautobot/ui/src/js/collapse.js

@@ -0,0 +1,69 @@
+/**
+ * Initialize collapse toggle all buttons identified by `data-nb-toggle="collapse-all"` data attribute. Collapse toggle
+ * all buttons can be further configured with `data-nb-target="{collapse CSS selector}"` data attribute specifying which
+ * collapse elements they control. When not explicitly set, target collapse CSS selector falls back to `".collapse"`.
+ * ---
+ * Critical difference between this and default Bootstrap 5 collapse implementation is that Bootstrap only supports
+ * toggling individual panel states without an option to toggle them collectively. See an explanation below:
+ * Bootstrap 5 on "Collapse All Groups" button click:  |  Nautobot on "Collapse All Groups" button click:
+ *   * X [expanded]  -> [collapsed]             |    * X [expanded]  -> [collapsed]
+ *   * Y [collapsed] -> [expanded]              |    * Y [collapsed] -> [collapsed]
+ *   * Z [expanded]  -> [collapsed]             |    * Z [expanded]  -> [collapsed]
+ * ---
+ * @returns {function(): void} Destructor function - remove all event listeners added during initialization.
+ */
+export const initializeCollapseToggleAll = () => {
+  const areAll = (collapseElements, collapsedOrExpanded) =>
+    collapseElements.every((element) => {
+      const isCollapsed = !element.classList.contains('show');
+      return collapsedOrExpanded === 'collapsed' ? isCollapsed : !isCollapsed;
+    });
+
+  const getCollapseToggleAllTargets = (collapseToggleAll) => [
+    ...document.querySelectorAll(collapseToggleAll.dataset.nbTarget || '.collapse'),
+  ];
+
+  const onClick = (event) => {
+    const collapseToggleAll = event.target.closest('[data-nb-toggle="collapse-all"]');
+
+    if (collapseToggleAll) {
+      getCollapseToggleAllTargets(collapseToggleAll).forEach((collapse) => {
+        const collapseInstance = window.bootstrap.Collapse.getOrCreateInstance(collapse);
+        const shouldCollapse = collapseToggleAll.getAttribute('aria-expanded') === 'true';
+
+        if (shouldCollapse) {
+          collapseInstance.hide();
+        } else {
+          collapseInstance.show();
+        }
+      });
+    }
+  };
+
+  const onHiddenBsCollapse = () =>
+    [...document.querySelectorAll('[data-nb-toggle="collapse-all"]')]
+      .filter((collapseToggleAll) => areAll(getCollapseToggleAllTargets(collapseToggleAll), 'collapsed'))
+      .forEach((collapseToggleAll) => {
+        collapseToggleAll.setAttribute('aria-expanded', 'false');
+        collapseToggleAll.textContent = 'Expand All Groups';
+      });
+
+  const onShownBsCollapse = () =>
+    [...document.querySelectorAll('[data-nb-toggle="collapse-all"]')]
+      .filter((collapseToggleAll) => areAll(getCollapseToggleAllTargets(collapseToggleAll), 'expanded'))
+      .forEach((collapseToggleAll) => {
+        collapseToggleAll.setAttribute('aria-expanded', 'true');
+        collapseToggleAll.textContent = 'Collapse All Groups';
+      });
+
+  // Using event delegation pattern here to avoid re-creating listeners each time DOM is modified.
+  document.addEventListener('click', onClick);
+  document.addEventListener('hidden.bs.collapse', onHiddenBsCollapse);
+  document.addEventListener('shown.bs.collapse', onShownBsCollapse);
+
+  return () => {
+    document.removeEventListener('click', onClick);
+    document.removeEventListener('hidden.bs.collapse', onHiddenBsCollapse);
+    document.removeEventListener('shown.bs.collapse', onShownBsCollapse);
+  };
+};

nautobot/ui/src/js/cookie.js

@@ -0,0 +1,31 @@
+/**
+ * Get given cookie, based on MDN example: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#example_2_get_a_sample_cookie_named_test2
+ * @param {string} name - Cookie name.
+ * @returns {string|undefined} Cookie value.
+ */
+export const getCookie = (name) =>
+  document.cookie
+    .split('; ')
+    .find((cookie) => cookie.startsWith(`${name}=`))
+    ?.split('=')[1];
+
+/**
+ * Set given cookie `value` with optional `options`.
+ * @param {string} name - Cookie name.
+ * @param {string} value - Cookie value.
+ * @param {object} [options] - Cookie properties as key-value pairs, e.g. `path`, `expires`, etc.
+ * @returns {void} Do not return any value, modify existing document cookies in-place.
+ */
+export const setCookie = (name, value, options) => {
+  const properties = { [name]: value, path: '/', ...options };
+  document.cookie = Object.entries(properties)
+    .map((entry) => entry.join('='))
+    .join(';');
+};
+
+/**
+ * Remove given cookie.
+ * @param {string} name - Cookie name.
+ * @returns {void} Do not return any value, modify existing document cookies in-place.
+ */
+export const removeCookie = (name) => setCookie(name, '', { expires: 'Thu, 01 Jan 1970 00:00:00 GMT' });

nautobot/ui/src/js/draggable.js

@@ -0,0 +1,101 @@
+const DRAGGABLE_CLASS = 'nb-draggable';
+const DRAGGABLE_CONTAINER_CLASS = 'nb-draggable-container';
+const DRAGGABLE_HANDLE_CLASS = 'nb-draggable-handle';
+const DRAGGING_CLASS = 'nb-dragging';
+
+export const initializeDraggable = () => {
+  const closest = (element, className) => element?.closest?.(`.${className}`);
+
+  const createHandleOnMouseListener = (isDraggable) => (event) => {
+    const handle = closest(event.target, DRAGGABLE_HANDLE_CLASS);
+    if (handle) {
+      const draggable = closest(handle, DRAGGABLE_CLASS);
+      draggable.setAttribute('draggable', String(isDraggable));
+    }
+  };
+
+  const onMouseDown = createHandleOnMouseListener(true);
+  const onMouseUp = createHandleOnMouseListener(false);
+
+  const onDragStart = (event) => {
+    const draggable = closest(event.target, DRAGGABLE_CLASS);
+    if (draggable) {
+      event.dataTransfer.clearData('text/plain');
+      event.dataTransfer.setData('text/plain', event.target.id);
+      draggable.classList.add(DRAGGING_CLASS);
+    }
+  };
+
+  const onDragEnd = (event) => {
+    const draggable = closest(event.target, DRAGGABLE_CLASS);
+    if (draggable) {
+      draggable.classList.remove(DRAGGING_CLASS);
+      draggable.setAttribute('draggable', 'false');
+    }
+  };
+
+  const onDragOver = (event) => {
+    const draggableContainer = closest(event.target, DRAGGABLE_CONTAINER_CLASS);
+    if (draggableContainer) {
+      event.preventDefault();
+    }
+  };
+
+  const onDrop = (event) => {
+    const draggable = document.getElementById(event.dataTransfer.getData('text/plain'));
+    if (draggable) {
+      event.preventDefault();
+
+      const container = closest(draggable, DRAGGABLE_CONTAINER_CLASS);
+
+      const insertBefore = (() => {
+        // Were we dropped onto another draggable?
+        const dropDraggable = closest(event.target, DRAGGABLE_CLASS);
+        if (dropDraggable) {
+          /*
+           * Were we dropped in the top half or the bottom half of the target draggable?
+           *   - Top half - insert before that draggable.
+           *   - Bottom half - insert after that draggable.
+           */
+          const { height, top } = dropDraggable.getBoundingClientRect();
+          const isTopHalf = event.clientY < top + height / 2;
+          return isTopHalf ? dropDraggable : dropDraggable.nextSibling;
+        }
+
+        // We were dropped into empty space - find the closest draggable by geometry.
+        return [...container.children].find((child) => {
+          const { left, right, top } = child.getBoundingClientRect();
+          // Are we in the correct column?
+          if (left > event.clientX) {
+            // Found the first child that is too far to the right, so we insert before that child.
+            return true;
+          } else if (right >= event.clientX) {
+            // Child is in the correct column.
+            if (top >= event.clientY) {
+              // Found the first child in this column we were dropped above, so we insert before that child.
+              return true;
+            }
+          }
+          return false;
+        });
+      })();
+
+      if (insertBefore) {
+        container.insertBefore(draggable, insertBefore);
+      } else {
+        // Add to end of the list.
+        container.append(draggable);
+      }
+
+      draggable.classList.add(DRAGGING_CLASS);
+    }
+  };
+
+  // Using event delegation pattern here to avoid re-creating listeners each time DOM is modified.
+  document.addEventListener('mousedown', onMouseDown);
+  document.addEventListener('mouseup', onMouseUp);
+  document.addEventListener('dragstart', onDragStart);
+  document.addEventListener('dragend', onDragEnd);
+  document.addEventListener('dragover', onDragOver);
+  document.addEventListener('drop', onDrop);
+};

nautobot/ui/src/js/drawer.js

@@ -0,0 +1,106 @@
+const DRAWER_CLASS = 'nb-drawer';
+const DRAWER_OPEN_CLASS = 'nb-drawer-open';
+
+/**
+ * Toggle drawer element with an option to force open/close.
+ * @param {HTMLElement} drawer - Drawer HTML element to be toggled.
+ * @param {boolean} [force] - Optionally force opening (`true`) or closing (`false`) regardless of current state.
+ * @returns {void} Do not return any value, modify existing HTML element in-place.
+ */
+const toggleDrawer = (drawer, force) => {
+  if (!drawer) {
+    return;
+  }
+
+  drawer.classList.toggle(DRAWER_OPEN_CLASS, force);
+
+  const isOpen = drawer.classList.contains(DRAWER_OPEN_CLASS);
+
+  drawer.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
+
+  const drawerToggles = [...document.querySelectorAll(`[data-nb-toggle="drawer"][data-nb-target="#${drawer.id}"]`)];
+  drawerToggles.forEach((drawerToggle) => drawerToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'));
+
+  /*
+   * Maintain proper element focus when the drawer is:
+   *   1. Open - focus the drawer as soon as it becomes visible and focusable.
+   *   2. Closed - in case focus is within the drawer move it back to the first found drawer toggle and, if not
+   *     available, the `main` element instead.
+   */
+  if (isOpen) {
+    // Close other open drawers if there are any. Effectively, this allows only one drawer to be open at a time.
+    const openDrawers = document.getElementsByClassName(DRAWER_OPEN_CLASS);
+    [...openDrawers]
+      .filter((openDrawer) => openDrawer !== drawer)
+      .forEach((openDrawer) => toggleDrawer(openDrawer, false));
+
+    (() => {
+      let rafRetriesRemaining = 100; // In case something goes wrong prevent falling into an infinite loop.
+
+      // Use `requestAnimationFrame` to wait until drawer becomes visible and focusable.
+      window.requestAnimationFrame(function focusDrawer() {
+        const isDrawerVisible = window.getComputedStyle(drawer).visibility === 'visible';
+
+        if (isDrawerVisible) {
+          drawer.focus();
+        } else if (rafRetriesRemaining > 0) {
+          rafRetriesRemaining -= 1;
+          window.requestAnimationFrame(focusDrawer);
+        }
+      });
+    })();
+  } else if (drawer.contains(document.activeElement)) {
+    const nextActiveElement = drawerToggles[0] || document.querySelector('main');
+    nextActiveElement?.focus({ preventScroll: true });
+  }
+
+  const event = isOpen ? 'nb-drawer:opened' : 'nb-drawer:closed';
+  drawer.dispatchEvent(new CustomEvent(event, { bubbles: true, cancelable: true }));
+};
+
+/**
+ * Initialize custom Nautobot drawers mechanism.
+ * @returns {void} Do not return any value, attach an event listener.
+ */
+export const initializeDrawers = () => {
+  // Using event delegation pattern here to avoid re-creating listeners each time DOM is modified.
+  document.addEventListener('nb-drawer:close', (event) => toggleDrawer(event.target, false));
+  document.addEventListener('nb-drawer:open', (event) => toggleDrawer(event.target, true));
+  document.addEventListener('nb-drawer:toggle', (event) => toggleDrawer(event.target));
+
+  document.addEventListener('nb-drawer:opened', (event) => {
+    if (event.target.id) {
+      const nextState = { ...window.history?.state, drawer: event.target.id };
+      const url = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+      window.history?.replaceState(nextState, '', url);
+    }
+  });
+
+  document.addEventListener('nb-drawer:closed', () => {
+    // eslint-disable-next-line no-unused-vars
+    const { drawer, ...restState } =
+      typeof window.history?.state === 'object' && window.history.state !== null ? window.history.state : {};
+    const nextState = Object.keys(restState).length > 0 ? restState : null;
+    const url = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+    window.history?.replaceState(nextState, '', url);
+  });
+
+  document.addEventListener('click', (event) => {
+    const dismiss = event.target.closest('[data-nb-dismiss]');
+    const toggle = event.target.closest('[data-nb-toggle]');
+
+    if (dismiss?.dataset.nbDismiss === 'drawer') {
+      const drawer = dismiss.closest(`.${DRAWER_CLASS}`);
+      drawer?.dispatchEvent(new CustomEvent(`nb-drawer:close`, { bubbles: true, cancelable: true }));
+    } else if (toggle?.dataset.nbToggle === 'drawer') {
+      const drawer = document.querySelector(toggle.dataset.nbTarget);
+      drawer?.dispatchEvent(new CustomEvent(`nb-drawer:toggle`, { bubbles: true, cancelable: true }));
+    }
+  });
+
+  if (window.history?.state?.drawer) {
+    document
+      .getElementById(window.history.state.drawer)
+      ?.dispatchEvent(new CustomEvent('nb-drawer:open', { bubbles: true, cancelable: true }));
+  }
+};

nautobot/ui/src/js/form.js

@@ -0,0 +1,23 @@
+/**
+ * Observe pinned state of elements of class `nb-form-sticky-footer` on the page and add drop shadow with `nb-is-pinned`
+ * class if they are pinned. This is purely cosmetic and does not affect functionality.
+ * @example
+ * // Run form sticky footers observer algorithm exactly once, i.e. observe and immediately unobserve.
+ * const unobserveFormStickyFooters = observeFormStickyFooters();
+ * unobserveFormStickyFooters();
+ * @returns {function(): void} Unobserve function - disconnect all resize observers created during function call.
+ */
+export const observeFormStickyFooters = () => {
+  // Form sticky footers pinned state detection with `IntersectionObserver` based on: https://stackoverflow.com/a/57991537.
+  const intersectionObserver = new IntersectionObserver(
+    ([entry]) => entry.target.classList.toggle('nb-is-pinned', entry.intersectionRatio < 1),
+    { threshold: [1] },
+  );
+
+  const formStickyFooters = [...document.querySelectorAll('.nb-form-sticky-footer')];
+  formStickyFooters.forEach((formStickyFooter) => intersectionObserver.observe(formStickyFooter));
+
+  return () => {
+    intersectionObserver.disconnect();
+  };
+};

nautobot/ui/src/js/history.js

@@ -0,0 +1,51 @@
+const SESSION_STORAGE_KEY = 'historyState';
+
+/**
+ * Load last saved history state from `sessionStorage`.
+ *
+ * *The idea behind this and `saveState` function below is to be able to maintain history state between history entries
+ * separated by a full document reload caused by navigation or form submission. Browsers do not export any native API
+ * to manage history state in said scenario, so the workaround is to call `saveState` before full document reload and
+ * then `loadState` after the document is loaded back again. `saveState` must be called on demand by arbitrary logic,
+ * whereas `loadState` is executed automatically by the main `nautobot.js` script and should not be called manually.*
+ *
+ * @returns {void} Do not return any value, update current history entry with last saved state instead.
+ */
+export const loadState = () => {
+  const state = (() => {
+    try {
+      const item = window.sessionStorage?.getItem(SESSION_STORAGE_KEY);
+      return item ? JSON.parse(item) : undefined;
+      // eslint-disable-next-line no-unused-vars
+    } catch (exception) {
+      return undefined;
+    }
+  })();
+
+  if (state !== undefined) {
+    const url = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+    window.history?.replaceState(state, '', url);
+    window.sessionStorage?.removeItem(SESSION_STORAGE_KEY);
+  }
+};
+
+/**
+ * Save given state, or current history entry state if not explicitly passed, into `sessionStorage`.
+ *
+ * *The idea behind this and `loadState` function above is to be able to maintain history state between history entries
+ * separated by a full document reload caused by navigation or form submission. Browsers do not export any native API
+ * to manage history state in said scenario, so the workaround is to call `saveState` before full document reload and
+ * then `loadState` after the document is loaded back again. `saveState` must be called on demand by arbitrary logic,
+ * whereas `loadState` is executed automatically by the main `nautobot.js` script and should not be called manually.*
+ *
+ * @param {object|null} [state] - Optional `state` object to be saved; current history entry state will be used if
+ *   `state` is not explicitly passed. Use `null` to remove history state from `sessionStorage`.
+ * @returns {void} Do not return any value, save current history entry state into `sessionStorage` instead.
+ */
+export const saveState = (state) => {
+  const stateToSave = state === undefined ? window.history?.state : state;
+
+  if (stateToSave !== undefined) {
+    window.sessionStorage?.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave));
+  }
+};

nautobot/ui/src/js/nautobot-graphiql.js

@@ -0,0 +1,19 @@
+import * as GraphiQLPluginExplorer from '@graphiql/plugin-explorer';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+import * as graphqlWs from 'graphql-ws';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { fetch } from 'whatwg-fetch';
+
+import 'graphiql/graphiql.css';
+import '@graphiql/plugin-explorer/dist/style.css';
+
+GraphiQL.createFetcher = createGraphiQLFetcher;
+
+window.fetch = fetch;
+window.graphqlWs = graphqlWs;
+window.GraphiQL = GraphiQL;
+window.GraphiQLPluginExplorer = GraphiQLPluginExplorer;
+window.React = React;
+window.ReactDOM = ReactDOM;

nautobot/ui/src/js/nautobot.js

@@ -0,0 +1,128 @@
+/* eslint import/order: ['error', { alphabetize: { order: 'asc' }, 'newlines-between': 'ignore' }] */
+
+import '../scss/nautobot.scss';
+
+import * as bootstrap from 'bootstrap';
+window.bootstrap = bootstrap;
+
+import ClipboardJS from 'clipboard';
+window.ClipboardJS = ClipboardJS;
+
+import * as echarts from 'echarts';
+window.echarts = echarts;
+
+import flatpickr from 'flatpickr';
+window.flatpickr = flatpickr;
+
+import hljs from 'highlight.js/lib/core';
+import 'highlight.js/styles/github.css';
+import graphql from 'highlight.js/lib/languages/graphql';
+import json from 'highlight.js/lib/languages/json';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
+
+import htmx from 'htmx.org';
+window.htmx = htmx;
+
+hljs.registerLanguage('graphql', graphql);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('yaml', yaml);
+window.hljs = hljs;
+
+import jQuery from 'jquery';
+window.jQuery = jQuery;
+window.$ = window.jQuery;
+
+import 'jquery-ui';
+import 'select2';
+
+import { initializeCollapseToggleAll } from './collapse.js';
+import { initializeDraggable } from './draggable.js';
+import { initializeDrawers } from './drawer.js';
+import { observeFormStickyFooters } from './form.js';
+import { loadState, saveState } from './history.js';
+import { initializeSearch } from './search.js';
+import { initializeSelect2Fields, setSelect2Value } from './select2.js';
+import { initializeSidenav } from './sidenav.js';
+import { observeCollapseTabs } from './tabs.js';
+import { initializeTheme } from './theme.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  window.nb ??= {};
+
+  // History
+  loadState();
+  window.nb.history = { saveState };
+  // Tooltips
+  // https://getbootstrap.com/docs/5.3/components/tooltips/#enable-tooltips
+  [...document.querySelectorAll('[data-bs-toggle="tooltip"]')].forEach((tooltip) => new bootstrap.Tooltip(tooltip));
+
+  // Sidenav
+  initializeSidenav();
+
+  // Collapse
+  initializeCollapseToggleAll();
+
+  // Draggable
+  initializeDraggable();
+
+  // Drawer
+  initializeDrawers();
+
+  // Form
+  // TODO(norbert-mieczkowski-codilime): for htmx SPA-like behavior, re-initialize sticky footers like tabs below.
+  observeFormStickyFooters();
+
+  // Search
+  initializeSearch();
+
+  // Select2
+  window.nb.select2 = { initializeSelect2Fields, setSelect2Value };
+
+  // Tabs
+  /*
+   * TODO(norbert-mieczkowski-codilime): listen for proper event type(s) to re-initialize collapse tabs observers when
+   *   htmx dynamic content reloading is implemented. Said re-initialization should be as simple as something like:
+   *   ```js
+   *   let unobserveCollapseTabs = observeCollapseTabs();
+   *   document.body.addEventListener('htmx:xhr:loadend', () => unobserveCollapseTabs());
+   *   document.body.addEventListener('htmx:load', () => {
+   *     unobserveCollapseTabs = observeCollapseTabs();
+   *   });
+   *   ```
+   */
+  observeCollapseTabs();
+
+  // Theme
+  initializeTheme();
+
+  const toggleFavorite = (element, event) => {
+    if (event.detail.successful) {
+      element.classList.toggle('active');
+    }
+  };
+  window.toggleFavorite = toggleFavorite;
+
+  const setRequestUrl = (element, event) => {
+    const isFavorite = element.classList.contains('active');
+    event.detail.path = isFavorite ? element.dataset.deleteUrl : element.dataset.addUrl;
+  };
+  window.setRequestUrl = setRequestUrl;
+
+  // Remove the blur after clicking the footer links that are opening mostly in the new tab
+  // Keeping focus on those items is what keeps the tooltip as well
+  document.querySelectorAll('a[data-bs-toggle="tooltip"], div[data-bs-toggle="tooltip"] > a').forEach((el) => {
+    el.addEventListener('click', () => {
+      el.blur();
+    });
+  });
+
+  // When modal is being closed, bootstrap automatically restore the focus on the element that was triggering the modal
+  // As a result, after modal close tooltip was triggered as well
+  document.addEventListener('hidden.bs.modal', () => {
+    document.querySelectorAll('[data-bs-toggle="tooltip"] > a').forEach((el) => {
+      el.blur();
+    });
+  });
+});