Fix merge conflicts

README.md

@@ -60,7 +60,7 @@ To quickly get started, visit our [get started guide](https://infisical.com/docs
 
 ## 🔥 What's cool about this?
 
-Infisical makes secret management simple and end-to-end encrypted by default. We're on a mission to make it more accessible to all developers, <i>not just security teams</i>. 
+Infisical makes secret management simple and end-to-end encrypted by default. We're on a mission to make it more accessible to all developers, <i>not just security teams</i>.
 
 According to a [report](https://www.ekransystem.com/en/blog/secrets-management) in 2019, only 10% of organizations use secret management solutions despite all using digital secrets to some extent.
 
@@ -73,6 +73,7 @@ We are currently working hard to make Infisical more extensive. Need any integra
 Whether it's big or small, we love contributions ❤️ Check out our guide to see how to [get started](https://infisical.com/docs/contributing/overview).
 
 Not sure where to get started? You can:
+
 - [Book a free, non-pressure pairing sessions with one of our teammates](mailto:[email protected]?subject=Pairing%20session&body=I'd%20like%20to%20do%20a%20pairing%20session!)!
 - Join our <a href="https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g">Slack</a>, and ask us any questions there.
 
@@ -81,7 +82,7 @@ Not sure where to get started? You can:
 - [Slack](https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g) (For live discussion with the community and the Infisical team)
 - [GitHub Discussions](https://github.com/Infisical/infisical/discussions) (For help with building and deeper conversations about features)
 - [GitHub Issues](https://github.com/Infisical/infisical-cli/issues) (For any bugs and errors you encounter using Infisical)
-- [Twitter](https://twitter.com/infisical) (Get news fast) 
+- [Twitter](https://twitter.com/infisical) (Get news fast)
 
 ## 🐥 Status
 
@@ -200,7 +201,6 @@ We're currently setting the foundation and building [integrations](https://infis
   </td>
 <td>
 
-
 <table>
   <tbody>
     <tr>
@@ -294,7 +294,6 @@ We're currently setting the foundation and building [integrations](https://infis
 </tr> 
 </table>
 
-
 ## 🏘 Open-source vs. paid
 
 This repo is entirely MIT licensed, with the exception of the `ee` directory which will contain premium enterprise features requiring a Infisical license in the future. We're currently focused on developing non-enterprise offerings first that should suit most use-cases.
@@ -311,4 +310,4 @@ Looking to report a security vulnerability? Please don't post about it in GitHub
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
 
-<a href="https://github.com/dangtony98"><img src="https://avatars.githubusercontent.com/u/25857006?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/mv-turtle"><img src="https://avatars.githubusercontent.com/u/78047717?s=96&v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/maidul98"><img src="https://avatars.githubusercontent.com/u/9300960?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/gangjun06"><img src="https://avatars.githubusercontent.com/u/50910815?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/reginaldbondoc"><img src="https://avatars.githubusercontent.com/u/7693108?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/SH5H"><img src="https://avatars.githubusercontent.com/u/25437192?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/asharonbaltazar"><img src="https://avatars.githubusercontent.com/u/58940073?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/edgarrmondragon"><img src="https://avatars.githubusercontent.com/u/16805946?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/arjunyel"><img src="https://avatars.githubusercontent.com/u/11153289?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/adrianmarinwork"><img src="https://avatars.githubusercontent.com/u/118568289?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/hanywang2"><img src="https://avatars.githubusercontent.com/u/44352119?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/tobias-mintlify"><img src="https://avatars.githubusercontent.com/u/110702161?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/0xflotus"><img src="https://avatars.githubusercontent.com/u/26602940?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/wanjohiryan"><img src="https://avatars.githubusercontent.com/u/71614375?v=4" width="50" height="50" alt=""/></a> 
+<a href="https://github.com/dangtony98"><img src="https://avatars.githubusercontent.com/u/25857006?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/mv-turtle"><img src="https://avatars.githubusercontent.com/u/78047717?s=96&v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/maidul98"><img src="https://avatars.githubusercontent.com/u/9300960?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/gangjun06"><img src="https://avatars.githubusercontent.com/u/50910815?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/reginaldbondoc"><img src="https://avatars.githubusercontent.com/u/7693108?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/SH5H"><img src="https://avatars.githubusercontent.com/u/25437192?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/asharonbaltazar"><img src="https://avatars.githubusercontent.com/u/58940073?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/edgarrmondragon"><img src="https://avatars.githubusercontent.com/u/16805946?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/arjunyel"><img src="https://avatars.githubusercontent.com/u/11153289?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/LemmyMwaura"><img src="https://avatars.githubusercontent.com/u/20738858?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/adrianmarinwork"><img src="https://avatars.githubusercontent.com/u/118568289?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/hanywang2"><img src="https://avatars.githubusercontent.com/u/44352119?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/tobias-mintlify"><img src="https://avatars.githubusercontent.com/u/110702161?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/0xflotus"><img src="https://avatars.githubusercontent.com/u/26602940?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/wanjohiryan"><img src="https://avatars.githubusercontent.com/u/71614375?v=4" width="50" height="50" alt=""/></a>

frontend/components/dashboard/DashboardInputField.tsx

@@ -7,8 +7,8 @@ import guidGenerator from '../utilities/randomId';
 const REGEX = /([$]{.*?})/g;
 
 interface DashboardInputFieldProps {
-  index: number;
+  position: number;
-  onChangeHandler: (value: string, index: number) => void;
+  onChangeHandler: (value: string, position: number) => void;
   value: string;
   type: 'varName' | 'value';
   blurred: boolean;
@@ -18,7 +18,7 @@ interface DashboardInputFieldProps {
 /**
  * This component renders the input fields on the dashboard
  * @param {object} obj - the order number of a keyPair
- * @param {number} obj.index - the order number of a keyPair
+ * @param {number} obj.pos - the order number of a keyPair
  * @param {function} obj.onChangeHandler - what happens when the input is modified
  * @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
  * @param {string} obj.value - value of the InputField
@@ -28,7 +28,7 @@ interface DashboardInputFieldProps {
  */
 
 const DashboardInputField = ({
-  index,
+  position,
   onChangeHandler,
   type,
   value,
@@ -57,7 +57,7 @@ const DashboardInputField = ({
         >
           <input
             onChange={(e) =>
-              onChangeHandler(e.target.value.toUpperCase(), index)
+              onChangeHandler(e.target.value.toUpperCase(), position)
             }
             type={type}
             value={value}
@@ -87,7 +87,7 @@ const DashboardInputField = ({
         >
           <input
             value={value}
-            onChange={(e) => onChangeHandler(e.target.value, index)}
+            onChange={(e) => onChangeHandler(e.target.value, position)}
             onScroll={syncScroll}
             className={`${
               blurred

frontend/components/utilities/secrets/getSecretsForProject.ts

@@ -74,26 +74,26 @@ const getSecretsForProject = async ({
     setFileState(tempFileState);
 
     setData(
-      tempFileState.map((line, index) => [
+      tempFileState.map((line, index) => {
-        guidGenerator(),
+        return {
-        index,
+          id: guidGenerator(),
-        line['key'],
+          pos: index,
-        line['value'],
+          key: line['key'],
-        line['type']
+          value: line['value'],
-      ])
+          type: line['type']
-      // .sort((a, b) =>
+        };
-      // 	sortMethod == "alphabetical"
+      })
-      // 		? a[2].localeCompare(b[2])
-      // 		: b[2].localeCompare(a[2])
-      // )
     );
-    return tempFileState.map((line, index) => [
+
-      guidGenerator(),
+    return tempFileState.map((line, index) => {
-      index,
+      return {
-      line['key'],
+        id: guidGenerator(),
-      line['value'],
+        pos: index,
-      line['type']
+        key: line['key'],
-    ]);
+        value: line['value'],
+        type: line['type']
+      };
+    });
   } catch (error) {
     console.log('Something went wrong during accessing or decripting secrets.');
   }

frontend/pages/dashboard/[id].js

@@ -45,7 +45,7 @@ import getWorkspaces from '../api/workspace/getWorkspaces';
 /**
  * This component represent a single row for an environemnt variable on the dashboard
  * @param {object} obj
- * @param {String[]} obj.keyPair - data related to the environment variable (index, key, value, public/private)
+ * @param {String[]} obj.keyPair - data related to the environment variable (id, pos, key, value, public/private)
  * @param {function} obj.deleteRow - a function to delete a certain keyPair
  * @param {function} obj.modifyKey - modify the key of a certain environment variable
  * @param {function} obj.modifyValue - modify the value of a certain environment variable
@@ -73,8 +73,8 @@ const KeyPair = ({
             <DashboardInputField
               onChangeHandler={modifyKey}
               type="varName"
-              index={keyPair[1]}
+              position={keyPair.pos}
-              value={keyPair[2]}
+              value={keyPair.key}
               duplicates={duplicates}
             />
           </div>
@@ -84,8 +84,8 @@ const KeyPair = ({
             <DashboardInputField
               onChangeHandler={modifyValue}
               type="value"
-              index={keyPair[1]}
+              position={keyPair.pos}
-              value={keyPair[3]}
+              value={keyPair.value}
               blurred={isBlurred}
             />
           </div>
@@ -114,18 +114,18 @@ const KeyPair = ({
               <div
                 onClick={() =>
                   modifyVisibility(
-                    keyPair[4] == 'personal' ? 'shared' : 'personal',
+                    keyPair.type == 'personal' ? 'shared' : 'personal',
-                    keyPair[1]
+                    keyPair.pos
                   )
                 }
                 className="relative flex justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full"
               >
                 <FontAwesomeIcon
                   className="text-lg pl-1.5 pr-3"
-                  icon={keyPair[4] == 'personal' ? faPeopleGroup : faPerson}
+                  icon={keyPair.type == 'personal' ? faPeopleGroup : faPerson}
                 />
                 <div className="text-sm">
-                  {keyPair[4] == 'personal' ? 'Make Shared' : 'Make Personal'}
+                  {keyPair.type == 'personal' ? 'Make Shared' : 'Make Personal'}
                 </div>
               </div>
               <div
@@ -139,7 +139,7 @@ const KeyPair = ({
                       [...Array(randomStringLength)]
                         .map(() => Math.floor(Math.random() * 16).toString(16))
                         .join(''),
-                      keyPair[1]
+                      keyPair.pos
                     );
                   }
                 }}
@@ -147,7 +147,7 @@ const KeyPair = ({
               >
                 <FontAwesomeIcon
                   className="text-lg pl-1.5 pr-3"
-                  icon={keyPair[3] == '' ? faPlus : faShuffle}
+                  icon={keyPair.value == '' ? faPlus : faShuffle}
                 />
                 <div className="text-sm justify-between flex flex-row w-full">
                   <p>Generate Random Hex</p>
@@ -190,7 +190,7 @@ const KeyPair = ({
         <div className="w-2"></div>
         <div className="opacity-50 hover:opacity-100 duration-200">
           <Button
-            onButtonPressed={() => deleteRow(keyPair[0])}
+            onButtonPressed={() => deleteRow(keyPair.id)}
             color="red"
             size="icon-sm"
             icon={faX}
@@ -265,10 +265,12 @@ export default function Dashboard() {
   /**
    * Reorder rows alphabetically or in the opprosite order
    */
-  const reorderRows = () => {
+  const reorderRows = (dataToReorder) => {
-    setSortMethod(
+    setSortMethod((prevSort) =>
-      sortMethod == 'alphabetical' ? '-alphabetical' : 'alphabetical'
+      prevSort == 'alphabetical' ? '-alphabetical' : 'alphabetical'
     );
+
+    sortValuesHandler(dataToReorder);
   };
 
   useEffect(() => {
@@ -288,13 +290,14 @@ export default function Dashboard() {
         setBlurred(true);
         setWorkspaceId(router.query.id);
 
-        await getSecretsForProject({
+        const dataToSort = await getSecretsForProject({
           env,
           setFileState,
           setIsKeyAvailable,
           setData,
           workspaceId: router.query.id
         });
+        reorderRows(dataToSort);
 
         const user = await getUser();
         setIsNew(
@@ -317,49 +320,58 @@ export default function Dashboard() {
 
   const addRow = () => {
     setIsNew(false);
-    setData([...data, [guidGenerator(), data.length, '', '', 'shared']]);
+    setData([
+      ...data,
+      {
+        id: guidGenerator(),
+        pos: data.length,
+        key: '',
+        value: '',
+        type: 'shared'
+      }
+    ]);
   };
 
   const deleteRow = (id) => {
     setButtonReady(true);
-    setData(data.filter((row) => row[0] !== id));
+    setData(data.filter((row) => row.id !== id));
   };
 
-  const modifyValue = (value, id) => {
+  const modifyValue = (value, pos) => {
     setData((oldData) => {
-      oldData[id][3] = value;
+      oldData[pos].value = value;
       return [...oldData];
     });
     setButtonReady(true);
   };
 
-  const modifyKey = (value, id) => {
+  const modifyKey = (value, pos) => {
     setData((oldData) => {
-      oldData[id][2] = value;
+      oldData[pos].key = value;
       return [...oldData];
     });
     setButtonReady(true);
   };
 
-  const modifyVisibility = (value, id) => {
+  const modifyVisibility = (value, pos) => {
     setData((oldData) => {
-      oldData[id][4] = value;
+      oldData[pos].type = value;
       return [...oldData];
     });
     setButtonReady(true);
   };
 
   // For speed purposes and better perforamance, we are using useCallback
-  const listenChangeValue = useCallback((value, id) => {
+  const listenChangeValue = useCallback((value, pos) => {
-    modifyValue(value, id);
+    modifyValue(value, pos);
   }, []);
 
-  const listenChangeKey = useCallback((value, id) => {
+  const listenChangeKey = useCallback((value, pos) => {
-    modifyKey(value, id);
+    modifyKey(value, pos);
   }, []);
 
-  const listenChangeVisibility = useCallback((value, id) => {
+  const listenChangeVisibility = useCallback((value, pos) => {
-    modifyVisibility(value, id);
+    modifyVisibility(value, pos);
   }, []);
 
   /**
@@ -369,7 +381,7 @@ export default function Dashboard() {
     // Format the new object with environment variables
     let obj = Object.assign(
       {},
-      ...data.map((row) => ({ [row[2]]: [row[3], row[4]] }))
+      ...data.map((row) => ({ [row.key]: [row.value, row.type] }))
     );
 
     // Checking if any of the secret keys start with a number - if so, don't do anything
@@ -378,9 +390,9 @@ export default function Dashboard() {
       .every((v) => v === false);
     const duplicatesExist =
       data
-        ?.map((item) => item[2])
+        ?.map((item) => item.key)
         .filter(
-          (item, index) => index !== data?.map((item) => item[2]).indexOf(item)
+          (item, index) => index !== data?.map((item) => item.key).indexOf(item)
         ).length > 0;
 
     if (nameErrors) {
@@ -417,9 +429,28 @@ export default function Dashboard() {
     setBlurred(!blurred);
   };
 
+  const sortValuesHandler = (dataToSort) => {
+    const sortedData = (dataToSort != 1 ? dataToSort : data)
+      .sort((a, b) =>
+        sortMethod == 'alphabetical'
+          ? a.key.localeCompare(b.key)
+          : b.key.localeCompare(a.key)
+      )
+      .map((item, index) => {
+        return {
+          ...item,
+          pos: index
+        };
+      });
+
+    setData(sortedData);
+  };
+
   // This function downloads the secrets as a .env file
   const download = () => {
-    const file = data.map((item) => [item[2], item[3]].join('=')).join('\n');
+    const file = data
+      .map((item) => [item.key, item.value].join('='))
+      .join('\n');
     const blob = new Blob([file]);
     const fileDownloadUrl = URL.createObjectURL(blob);
     let alink = document.createElement('a');
@@ -553,7 +584,7 @@ export default function Dashboard() {
                     </div>
                     <div className="ml-2 min-w-max flex flex-row items-start justify-start">
                       <Button
-                        onButtonPressed={reorderRows}
+                        onButtonPressed={() => reorderRows(1)}
                         color="mineshaft"
                         size="icon-md"
                         icon={
@@ -625,19 +656,14 @@ export default function Dashboard() {
                     {data
                       .filter(
                         (keyPair) =>
-                          keyPair[2]
+                          keyPair.key
                             .toLowerCase()
                             .includes(searchKeys.toLowerCase()) &&
-                          keyPair[4] == 'personal'
+                          keyPair.type == 'personal'
                       )
-                      .sort((a, b) =>
+                      ?.map((keyPair) => (
-                        sortMethod == 'alphabetical'
-                          ? a[2].localeCompare(b[2])
-                          : b[2].localeCompare(a[2])
-                      )
-                      ?.map((keyPair, index) => (
                         <KeyPair
-                          key={keyPair[0]}
+                          key={keyPair.id}
                           keyPair={keyPair}
                           deleteRow={deleteCertainRow}
                           modifyValue={listenChangeValue}
@@ -645,11 +671,11 @@ export default function Dashboard() {
                           modifyVisibility={listenChangeVisibility}
                           isBlurred={blurred}
                           duplicates={data
-                            ?.map((item) => item[2])
+                            ?.map((item) => item.key)
                             .filter(
                               (item, index) =>
                                 index !==
-                                data?.map((item) => item[2]).indexOf(item)
+                                data?.map((item) => item.key).indexOf(item)
                             )}
                         />
                       ))}
@@ -679,19 +705,14 @@ export default function Dashboard() {
                     {data
                       .filter(
                         (keyPair) =>
-                          keyPair[2]
+                          keyPair.key
                             .toLowerCase()
                             .includes(searchKeys.toLowerCase()) &&
-                          keyPair[4] == 'shared'
+                          keyPair.type == 'shared'
                       )
-                      .sort((a, b) =>
+                      ?.map((keyPair) => (
-                        sortMethod == 'alphabetical'
-                          ? a[2].localeCompare(b[2])
-                          : b[2].localeCompare(a[2])
-                      )
-                      ?.map((keyPair, index) => (
                         <KeyPair
-                          key={keyPair[0]}
+                          key={keyPair.id}
                           keyPair={keyPair}
                           deleteRow={deleteCertainRow}
                           modifyValue={listenChangeValue}
@@ -699,11 +720,11 @@ export default function Dashboard() {
                           modifyVisibility={listenChangeVisibility}
                           isBlurred={blurred}
                           duplicates={data
-                            ?.map((item) => item[2])
+                            ?.map((item) => item.key)
                             .filter(
                               (item, index) =>
                                 index !==
-                                data?.map((item) => item[2]).indexOf(item)
+                                data?.map((item) => item.key).indexOf(item)
                             )}
                         />
                       ))}