From 877534ab2a199b72401e10a71223259f80d9b57c Mon Sep 17 00:00:00 2001
From: Amogh Bharadwaj <65964360+Amogh-Bharadwaj@users.noreply.github.com>
Date: Tue, 29 Oct 2024 19:10:09 +0530
Subject: [PATCH] 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
---
 ui/app/mirrors/create/cdc/sortingkey.tsx | 32 ++++++------------------
 ui/app/mirrors/create/cdc/styles.ts      | 19 ++++++++++++++
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/ui/app/mirrors/create/cdc/sortingkey.tsx b/ui/app/mirrors/create/cdc/sortingkey.tsx
index 48e7be0398..d88dc2a7c9 100644
--- 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
index 33eb83930b..b22e034555 100644
--- 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 = {