Fix sorting key ui pick order (#2201)

Changes the UI behaviour for custom sorting key to obtain the custom sort keys in the order in which the user clicks them. Right now the user has to click the sorting keys in order from the last key to the first key Move some styles away
PeerDB-io · Oct 29, 2024 · 877534a · 877534a
1 parent 9b9062b
commit 877534a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 24 deletions.
diff --git a/ui/app/mirrors/create/cdc/sortingkey.tsx b/ui/app/mirrors/create/cdc/sortingkey.tsx
@@ -18,7 +18,11 @@ import { Label } from '@/lib/Label';
 import { RowWithCheckbox } from '@/lib/Layout';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { engineOptionStyles } from './styles';
+import {
+  engineOptionStyles,
+  sortingKeyPillContainerStyle,
+  sortingKeyPillStyle,
+} from './styles';
 
 interface SortingKeysProps {
   columns: string[];
@@ -42,7 +46,7 @@ const SelectSortingKeys = ({
     (col: string, action: 'add' | 'remove') => {
       setSortingKeysSelections((prev) => {
         if (action === 'add' && !prev.some((key) => key === col)) {
-          return [col, ...prev];
+          return [...prev, col];
         } else if (action === 'remove') {
           return prev.filter((prevCol) => prevCol !== col);
         }
@@ -147,30 +151,10 @@ const SelectSortingKeys = ({
             theme={SelectTheme}
             isClearable
           />
-          <div
-            style={{
-              display: 'flex',
-              marginTop: '0.5rem',
-              columnGap: '0.5rem',
-              rowGap: '0.5rem',
-              alignItems: 'center',
-              flexWrap: 'wrap',
-            }}
-          >
+          <div style={sortingKeyPillContainerStyle}>
             {sortingKeysSelections.map((col: string) => {
               return (
-                <div
-                  key={col}
-                  style={{
-                    display: 'flex',
-                    columnGap: '0.3rem',
-                    alignItems: 'center',
-                    border: '1px solid #e5e7eb',
-                    borderRadius: '1rem',
-                    paddingLeft: '0.5rem',
-                    paddingRight: '0.5rem',
-                  }}
-                >
+                <div key={col} style={sortingKeyPillStyle}>
                   <p style={{ fontSize: '0.7rem' }}>{col}</p>
                   <Button
                     variant='normalBorderless'

diff --git a/ui/app/mirrors/create/cdc/styles.ts b/ui/app/mirrors/create/cdc/styles.ts
@@ -49,6 +49,25 @@ export const columnBoxDividerStyle: CSSProperties = {
   opacity: 0.5,
 };
 
+export const sortingKeyPillStyle: CSSProperties = {
+  display: 'flex',
+  columnGap: '0.3rem',
+  alignItems: 'center',
+  border: '1px solid #e5e7eb',
+  borderRadius: '1rem',
+  paddingLeft: '0.5rem',
+  paddingRight: '0.5rem',
+};
+
+export const sortingKeyPillContainerStyle: CSSProperties = {
+  display: 'flex',
+  marginTop: '0.5rem',
+  columnGap: '0.5rem',
+  rowGap: '0.5rem',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+};
+
 const targetHeight = 30;
 
 export const engineOptionStyles = {