refactor(app-templates): convert list to react [EE-6205] (#10439)

app/react/docker/app-templates/TemplateListDropdown/TemplateListDropdown.tsx

@@ -1,32 +0,0 @@
-import { Select } from '@@/form-components/ReactSelect';
-
-interface Filter {
-  label?: string;
-}
-
-interface Props {
-  options: string[];
-  onChange: (value: string | null) => void;
-  placeholder?: string;
-  value: string;
-}
-
-export function TemplateListDropdown({
-  options,
-  onChange,
-  placeholder,
-  value,
-}: Props) {
-  const filterOptions: Filter[] = options.map((value) => ({ label: value }));
-  const filterValue: Filter | null = value ? { label: value } : null;
-
-  return (
-    <Select
-      placeholder={placeholder}
-      options={filterOptions}
-      value={filterValue}
-      isClearable
-      onChange={(option) => onChange(option?.label ?? null)}
-    />
-  );
-}

app/react/docker/app-templates/TemplateListDropdown/index.ts

@@ -1,11 +0,0 @@
-import { react2angular } from '@/react-tools/react2angular';
-
-import { TemplateListDropdown } from './TemplateListDropdown';
-
-const TemplateListDropdownAngular = react2angular(TemplateListDropdown, [
-  'options',
-  'onChange',
-  'placeholder',
-  'value',
-]);
-export { TemplateListDropdown, TemplateListDropdownAngular };

app/react/docker/app-templates/TemplateListSort/TemplateListSort.module.css

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

app/react/docker/app-templates/TemplateListSort/TemplateListSort.tsx

@@ -1,56 +0,0 @@
-import clsx from 'clsx';
-
-import { TableHeaderSortIcons } from '@@/datatables/TableHeaderSortIcons';
-
-import { TemplateListDropdown } from '../TemplateListDropdown';
-
-import styles from './TemplateListSort.module.css';
-
-interface Props {
-  options: string[];
-  onChange: (value: string | null) => void;
-  onDescending: () => void;
-  placeholder?: string;
-  sortByDescending: boolean;
-  sortByButton: boolean;
-  value: string;
-}
-
-export function TemplateListSort({
-  options,
-  onChange,
-  onDescending,
-  placeholder,
-  sortByDescending,
-  sortByButton,
-  value,
-}: Props) {
-  return (
-    <div className={styles.sortByContainer}>
-      <div className={styles.sortByElement}>
-        <TemplateListDropdown
-          placeholder={placeholder}
-          options={options}
-          onChange={onChange}
-          value={value}
-        />
-      </div>
-      <div className={styles.sortByElement}>
-        <button
-          className={clsx(styles.sortButton, 'h-[34px]')}
-          type="button"
-          disabled={!sortByButton || !value}
-          onClick={(e) => {
-            e.preventDefault();
-            onDescending();
-          }}
-        >
-          <TableHeaderSortIcons
-            sorted={sortByButton && !!value}
-            descending={sortByDescending}
-          />
-        </button>
-      </div>
-    </div>
-  );
-}

app/react/docker/app-templates/TemplateListSort/index.ts

@@ -1,14 +0,0 @@
-import { react2angular } from '@/react-tools/react2angular';
-
-import { TemplateListSort } from './TemplateListSort';
-
-const TemplateListSortAngular = react2angular(TemplateListSort, [
-  'options',
-  'onChange',
-  'onDescending',
-  'placeholder',
-  'sortByDescending',
-  'sortByButton',
-  'value',
-]);
-export { TemplateListSort, TemplateListSortAngular };