Revert "Feat table resize and reorder (#2641)" on screen QueryParams

This partially reverts commit 2191550061.

packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js

@@ -22,12 +22,14 @@ const Wrapper = styled.div`
     }
     td {
       padding: 6px 10px;
-    }
+
+      &:nth-child(1) {
+        width: 30%;
       }
 
-  td {
-    &:nth-child(1) {
-      padding: 0 0 0 8px;
+      &:nth-child(3) {
+        width: 70px;
+      }
     }
   }
 

packages/bruno-app/src/components/RequestPane/QueryParams/index.js

@@ -7,17 +7,14 @@ import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import {
   addQueryParam,
-  updateQueryParam,
   deleteQueryParam,
-  moveQueryParam,
-  updatePathParam
+  updatePathParam,
+  updateQueryParam
 } from 'providers/ReduxStore/slices/collections';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 
 import StyledWrapper from './StyledWrapper';
-import Table from 'components/Table/index';
-import ReorderTable from 'components/ReorderTable';
 
 const QueryParams = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -103,33 +100,24 @@ const QueryParams = ({ item, collection }) => {
     );
   };
 
-  const handleParamDrag = ({ updateReorderedItem }) => {
-    dispatch(
-      moveQueryParam({
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        updateReorderedItem
-      })
-    );
-  };
-
   return (
-    <StyledWrapper className="w-full flex flex-col absolute">
+    <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Query</div>
-
-        <Table
-          headers={[
-            { name: 'Name', accessor: 'name', width: '31%' },
-            { name: 'Path', accessor: 'path', width: '56%' },
-            { name: '', accessor: '', width: '13%' }
-          ]}
-        >
-          <ReorderTable updateReorderedItem={handleParamDrag}>
+        <div className="mb-2 title text-xs">Query</div>
+        <table>
+          <thead>
+            <tr>
+              <td>Name</td>
+              <td>Value</td>
+              <td></td>
+            </tr>
+          </thead>
+          <tbody>
             {queryParams && queryParams.length
-              ? queryParams.map((param, index) => (
-                  <tr key={param.uid} data-uid={param.uid}>
-                    <td className="flex relative">
+              ? queryParams.map((param, index) => {
+                  return (
+                    <tr key={param.uid}>
+                      <td>
                         <input
                           type="text"
                           autoComplete="off"
@@ -146,10 +134,20 @@ const QueryParams = ({ item, collection }) => {
                           value={param.value}
                           theme={storedTheme}
                           onSave={onSave}
-                        onChange={(newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'value')}
+                          onChange={(newValue) =>
+                            handleQueryParamChange(
+                              {
+                                target: {
+                                  value: newValue
+                                }
+                              },
+                              param,
+                              'value'
+                            )
+                          }
                           onRun={handleRun}
                           collection={collection}
-                        variablesAutocomplete={true}
+                          item={item}
                         />
                       </td>
                       <td>
@@ -167,11 +165,11 @@ const QueryParams = ({ item, collection }) => {
                         </div>
                       </td>
                     </tr>
-                ))
+                  );
+                })
               : null}
-          </ReorderTable>
-        </Table>
-
+          </tbody>
+        </table>
         <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddQueryParam}>
           +&nbsp;<span>Add Param</span>
         </button>