feat(templates): remove toggle and add sorting for app templates EE-2522 (#6884)

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,18 @@
+.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(--text-ui-select-color);
+  border: 1px solid var(--border-sortbutton);
+  display: inline-block;
+  padding: 8px 10px;
+  border-radius: 5px;
+}

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

@@ -0,0 +1,53 @@
+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) {
+  const upIcon = 'fa fa-sort-alpha-up';
+  const downIcon = 'fa fa-sort-alpha-down';
+  const iconStyle = sortByDescending ? upIcon : downIcon;
+
+  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={styles.sortButton}
+          type="button"
+          disabled={!sortByButton || !value}
+          onClick={(e) => {
+            e.preventDefault();
+            onDescending();
+          }}
+        >
+          <i className={iconStyle} />
+        </button>
+      </div>
+    </div>
+  );
+}

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

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