Refactored dashboard to TS - still some bugs and inefficiencies

frontend/components/dashboard/DashboardInputField.tsx

@@ -87,7 +87,7 @@ const DashboardInputField = ({
         <div
           className={`group relative whitespace-pre	flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
         >
-          {override == true && <div className='bg-yellow-300 absolute top-[0.1rem] right-[0.1rem] z-10 w-min text-xxs px-1 text-black opacity-80 rounded-sm'>Override enabled</div>}
+          {override == true && <div className='bg-primary-300 absolute top-[0.1rem] right-[0.1rem] z-10 w-min text-xxs px-1 text-black opacity-80 rounded-md'>Override enabled</div>}
           <input
             value={value}
             onChange={(e) => onChangeHandler(e.target.value, position)}
@@ -106,7 +106,7 @@ const DashboardInputField = ({
                 ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400'
                 : ''
             } ${
-              override ? 'text-yellow-300' : 'text-gray-400'
+              override ? 'text-primary-300' : 'text-gray-400'
             }
             absolute flex flex-row whitespace-pre font-mono z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
           >

frontend/components/dashboard/GenerateSecretMenu.tsx

@@ -8,7 +8,7 @@ import { Menu, Transition } from '@headlessui/react';
  * This is the menu that is used to (re)generate secrets (currently we only have ranom hex, in future we will have more options)
  * @returns the popup-menu for randomly generating secrets
  */
-const GenerateSecretMenu = () => {
+const GenerateSecretMenu = ({ modifyValue, position }: { modifyValue: (value: string, position: number) => void; position: number; }) => {
   const [randomStringLength, setRandomStringLength] = useState(32);
 
   return <Menu as="div" className="relative inline-block text-left">
@@ -36,12 +36,12 @@ const GenerateSecretMenu = () => {
             } else if (randomStringLength < 2) {
               setRandomStringLength(2);
             } else {
-              // modifyValue(
-              //   [...Array(randomStringLength)]
-              //     .map(() => Math.floor(Math.random() * 16).toString(16))
-              //     .join(''),
-              //   keyPair.pos
-              // );
+              modifyValue(
+                [...Array(randomStringLength)]
+                  .map(() => Math.floor(Math.random() * 16).toString(16))
+                  .join(''),
+                position
+              );
             }
           }}
           className="relative flex flex-row 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"

frontend/components/dashboard/SideBar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { faBackward, faDotCircle, faRotateLeft, faX } from '@fortawesome/free-solid-svg-icons';
+import { faDotCircle, faRotateLeft, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import Button from '../basic/buttons/Button';
@@ -13,6 +13,7 @@ interface SecretProps {
   key: string;
   value: string;
   pos: number;
+  type: string;
   id: string;
 }
 
@@ -24,13 +25,14 @@ interface OverrideProps {
 }
 
 interface SideBarProps {
-  toggleSidebar: (value: number) => void; 
+  toggleSidebar: (value: string) => void; 
   data: SecretProps[];
-  modifyKey: (value: string) => void; 
-  modifyValue: (value: string) => void; 
-  modifyVisibility: (value: string) => void; 
+  modifyKey: (value: string, position: number) => void; 
+  modifyValue: (value: string, position: number) => void; 
   addOverride: (value: OverrideProps) => void; 
   deleteOverride: (id: string) => void; 
+  buttonReady: boolean;
+  savePush: () => void;
 }
 
 /**
@@ -39,17 +41,21 @@ interface SideBarProps {
  * @param {SecretProps[]} obj.data - data of a certain key valeu pair
  * @param {function} obj.modifyKey - function that modifies the secret key
  * @param {function} obj.modifyValue - function that modifies the secret value
- * @param {function} obj.modifyVisibility - function that modifies the secret visibility
+ * @param {function} obj.addOverride - override a certain secret
+ * @param {function} obj.deleteOverride - delete the personal override for a certain secret
+ * @param {boolean} obj.buttonReady - is the button for saving chagnes active
+ * @param {function} obj.savePush - save changes andp ush secrets
  * @returns the sidebar with 'secret's settings'
  */
-const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility, addOverride, deleteOverride }: SideBarProps) => {
-  const [overrideEnabled, setOverrideEnabled] = useState(false);
+const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, addOverride, deleteOverride, buttonReady, savePush }: SideBarProps) => {
+  const [overrideEnabled, setOverrideEnabled] = useState(data.map(secret => secret.type).includes("personal"));
+  console.log("sidebar", data, data.map(secret => secret.type).includes("personal"))
 
   return <div className='absolute border-l border-mineshaft-500 bg-bunker fixed h-full w-96 top-14 right-0 z-50 shadow-xl flex flex-col justify-between'>
-    <div className='h-min'>
+    <div className='h-min overflow-y-auto'>
       <div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
         <p className="font-semibold text-lg text-bunker-200">Secret</p>
-        <div className='p-1' onClick={() => toggleSidebar(-1)}>
+        <div className='p-1' onClick={() => toggleSidebar("None")}>
           <FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
         </div>
       </div>
@@ -64,21 +70,27 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility
           blurred={false}
         />
       </div>
-      <div className={`relative mt-2 px-4 ${overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
+      {data.filter(secret => secret.type == "shared")[0]?.value 
+        ? <div className={`relative mt-2 px-4 ${overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
         <p className='text-sm text-bunker-300'>Value</p>
         <DashboardInputField
           onChangeHandler={modifyValue}
           type="value"
-          position={data[0].pos}
-          value={data[0].value + "xxx" + data[0].pos}
+          position={data.filter(secret => secret.type == "shared")[0]?.pos}
+          value={data.filter(secret => secret.type == "shared")[0]?.value}
           duplicates={[]}
           blurred={true}     
         />
         <div className='absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50'>
-          <GenerateSecretMenu />
+          <GenerateSecretMenu modifyValue={modifyValue} position={data.filter(secret => secret.type == "shared")[0]?.pos} />
         </div>
       </div>
+        : <div className='px-4 text-sm text-bunker-300 pt-4'>
+          <span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1'>Note:</span>
+          This secret is personal. It is not shared with any of your teammates.
+        </div>}
       <div className='mt-4 px-4'>
+        {data.filter(secret => secret.type == "shared")[0]?.value &&
         <div className='flex flex-row items-center justify-between my-2 pl-1 pr-2'>
           <p className='text-sm text-bunker-300'>Override value with a personal value</p>
           <Toggle 
@@ -91,22 +103,22 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility
             id={data[0].id}
             deleteOverride={deleteOverride}
           />
-        </div>
+        </div>}
         <div className={`relative ${!overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
           <DashboardInputField
             onChangeHandler={modifyValue}
             type="value"
-            position={data[0].pos}
-            value={"ValueValueValue" + data[0].pos}
+            position={overrideEnabled ? data.filter(secret => secret.type == "personal")[0].pos : data[0].pos}
+            value={overrideEnabled ? data.filter(secret => secret.type == "personal")[0].value : data[0].value}
             duplicates={[]}
             blurred={true}
           />
-          <div className='absolute right-3 top-[0.3rem] z-50'>
-            <GenerateSecretMenu />
+          <div className='absolute right-[0.57rem] top-[0.3rem] z-50'>
+            <GenerateSecretMenu modifyValue={modifyValue} position={overrideEnabled ? data.filter(secret => secret.type == "personal")[0].pos : data[0].pos} />
           </div>
         </div>
       </div>
-      <div className={`relative mt-4 px-4 opacity-80 duration-200`}>
+      {/* <div className={`relative mt-4 px-4 opacity-80 duration-200`}>
         <p className='text-sm text-bunker-200'>Group</p>
         <ListBox
           selected={"Database Secrets"}
@@ -114,7 +126,7 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility
           data={["Group1"]}
           isFull={true}
         />
-      </div>
+      </div> */}
       <div className='w-full h-52 px-4 mt-4 text-sm text-bunker-300 overflow-x-none'>
         <p className=''>Version History</p>
         <div className='p-1 rounded-md bg-bunker-800 border border-mineshaft-500 overflow-x-none'>
@@ -170,12 +182,14 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility
         </div>
       </div>
     </div>
-    <div className='mt-full px-4 mb-[4.7rem]'>
+    <div className={`flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]`}>
       <Button
-        onButtonPressed={() => console.log('Saved')}
         text="Save Changes"
+        onButtonPressed={savePush}
         color="primary"
         size="md"
+        active={buttonReady}
+        textDisabled="Saved"
       />
     </div>
   </div>