refactor(portainer): move to react [EE-3350] (#7915)

app/react/components/datatables/FilterSearchBar.tsx

@@ -1,6 +1,6 @@
 import { Search } from 'react-feather';
 
-import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
+import { useLocalStorage } from '@/react/hooks/useLocalStorage';
 
 interface Props {
   value: string;

app/react/components/datatables/SearchBar.tsx

@@ -2,7 +2,7 @@ import { Search } from 'react-feather';
 import { useEffect, useMemo, useState } from 'react';
 import _ from 'lodash';
 
-import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
+import { useLocalStorage } from '@/react/hooks/useLocalStorage';
 import { AutomationTestingProps } from '@/types';
 
 interface Props extends AutomationTestingProps {

app/react/components/datatables/SortbySelector.module.css

@@ -1,26 +0,0 @@
-.sort-by-container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.sort-by-element {
-  display: inline-block;
-}
-
-.sort-button {
-  background-color: var(--bg-sortbutton-color);
-  color: var(--grey-6);
-  border: 1px solid var(--border-sortbutton);
-  display: inline-block;
-  padding: 8px 10px;
-  border-radius: 5px;
-}
-
-:global(:root[theme='dark']) .sort-button {
-  color: var(--white-color);
-}
-
-:global(:root[theme='highcontrast']) .sort-button {
-  color: var(--white-color);
-}

app/react/components/datatables/SortbySelector.tsx

@@ -1,66 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { Filter } from '@/portainer/home/types';
-
-import { Select } from '@@/form-components/ReactSelect';
-
-import styles from './SortbySelector.module.css';
-
-interface Props {
-  filterOptions: Filter[];
-  onChange: (filterOptions: Filter) => void;
-  onDescending: () => void;
-  placeHolder: string;
-  sortByDescending: boolean;
-  sortByButton: boolean;
-  value?: Filter;
-}
-
-export function SortbySelector({
-  filterOptions,
-  onChange,
-  onDescending,
-  placeHolder,
-  sortByDescending,
-  sortByButton,
-  value,
-}: Props) {
-  const upIcon = 'fa fa-sort-alpha-up';
-  const downIcon = 'fa fa-sort-alpha-down';
-  const [iconStyle, setIconStyle] = useState(downIcon);
-
-  useEffect(() => {
-    if (sortByDescending) {
-      setIconStyle(upIcon);
-    } else {
-      setIconStyle(downIcon);
-    }
-  }, [sortByDescending]);
-
-  return (
-    <div className={styles.sortByContainer}>
-      <div className={styles.sortByElement}>
-        <Select
-          placeholder={placeHolder}
-          options={filterOptions}
-          onChange={(option) => onChange(option as Filter)}
-          isClearable
-          value={value}
-        />
-      </div>
-      <div className={styles.sortByElement}>
-        <button
-          className={styles.sortButton}
-          type="button"
-          disabled={!sortByButton}
-          onClick={(e) => {
-            e.preventDefault();
-            onDescending();
-          }}
-        >
-          <i className={iconStyle} />
-        </button>
-      </div>
-    </div>
-  );
-}

app/react/components/datatables/useTableSettings.tsx

@@ -8,7 +8,7 @@ import {
   useState,
 } from 'react';
 
-import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
+import { useLocalStorage } from '@/react/hooks/useLocalStorage';
 
 interface TableSettingsContextInterface<T> {
   settings: T;