Added state management to the dashboard sidebar

frontend/components/basic/buttons/Button.tsx

@@ -72,9 +72,10 @@ export default function Button(props: ButtonProps): JSX.Element {
 
     // Setting the text color for the text and icon
     props.color == "mineshaft" && "text-gray-400",
-    props.color != "mineshaft" && props.color != "red" && "text-black",
+    props.color != "mineshaft" && props.color != "red" && props.color != "none" && "text-black",
     props.color == "red" && "text-gray-200",
-    activityStatus && props.color != "red" ? "group-hover:text-black" : "",
+    props.color == "none" && "text-gray-200 text-xl",
+    activityStatus && props.color != "red" && props.color != "none" ? "group-hover:text-black" : "",
 
     props.size == "icon" && "flex items-center justify-center"
   );

frontend/components/dashboard/GenerateSecretMenu.tsx

@@ -14,7 +14,7 @@ const GenerateSecretMenu = () => {
   return <Menu as="div" className="relative inline-block text-left">
     <div>
       <Menu.Button className="inline-flex w-full justify-center rounded-md text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
-        <div className='p-1 rounded-md hover:bg-white/5'>
+        <div className='py-1 px-2 rounded-md bg-bunker-800 hover:bg-bunker-500'>
           <FontAwesomeIcon icon={faShuffle} className='text-bunker-300'/>
         </div>
       </Menu.Button>

frontend/components/dashboard/SideBar.tsx

@@ -3,29 +3,54 @@ import { faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import Button from '../basic/buttons/Button';
+import ListBox from '../basic/Listbox';
 import Toggle from '../basic/Toggle';
 import DashboardInputField from './DashboardInputField';
 import GenerateSecretMenu from './GenerateSecretMenu';
 
+
+interface SecretProps {
+  key: string;
+  value: string;
+  pos: number;
+  visibility: string;
+}
+
+interface SideBarProps {
+  toggleSidebar: (value: number) => void; 
+  data: SecretProps[];
+  modifyKey: (value: string) => void; 
+  modifyValue: (value: string) => void; 
+  modifyVisibility: (value: string) => void; 
+}
+
 /**
+ * @param {object} obj
+ * @param {function} obj.toggleSidebar - function that opens or closes the sidebar
+ * @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
  * @returns the sidebar with 'secret's settings'
  */
-const SideBar = () => {
-  const [overrideEnabled, setOverrideEnabled] = useState(false)
+const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility }: SideBarProps) => {
+  const [overrideEnabled, setOverrideEnabled] = useState(false);
 
   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="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>
-        <FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
+        <div className='p-1' onClick={() => toggleSidebar(-1)}>
+          <FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
+        </div>
       </div>
-      <div className='mt-4 px-4 pointer-events-none'>
+      <div className='mt-4 px-4'>
         <p className='text-sm text-bunker-300'>Key</p>
         <DashboardInputField
-          onChangeHandler={() => {}}
+          onChangeHandler={modifyKey}
           type="varName"
-          position={1}
-          value={"KeyKeyKey"}
+          position={data[0].pos}
+          value={data[0].key}
           duplicates={[]}
           blurred={false}
         />
@@ -33,14 +58,14 @@ const SideBar = () => {
       <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={() => {}}
+          onChangeHandler={modifyValue}
           type="value"
-          position={1}
-          value={"ValueValueValue"}
+          position={data[0].pos}
+          value={data[0].value}
           duplicates={[]}
           blurred={true}
         />
-        <div className='absolute right-[1.7rem] top-[1.65rem] z-50'>
+        <div className='absolute bg-bunker-800 right-[1rem] top-[1.65rem] z-50'>
           <GenerateSecretMenu />
         </div>
       </div>
@@ -51,9 +76,9 @@ const SideBar = () => {
         </div>
         <div className={`relative ${!overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
           <DashboardInputField
-            onChangeHandler={() => {}}
+            onChangeHandler={modifyValue}
             type="value"
-            position={1}
+            position={data[0].pos}
             value={"ValueValueValue"}
             duplicates={[]}
             blurred={true}
@@ -62,11 +87,20 @@ const SideBar = () => {
             <GenerateSecretMenu />
           </div>
         </div>
-        <div className={`mt-6`}>
-          <p className='text-sm text-bunker-300'>Comments & notes</p>
-          <div className='h-32 w-full bg-bunker-800 p-2 rounded-md border border-mineshaft-500 rounded-md text-sm text-bunker-300'> 
-            Leave your comment here...
-          </div>
+      </div>
+      <div className={`relative mt-4 px-4 opacity-80 duration-200`}>
+        <p className='text-sm text-bunker-200'>Group</p>
+        <ListBox
+          selected={"Database Secrets"}
+          onChange={() => {}}
+          data={["Group1"]}
+          isFull={true}
+        />
+      </div>
+      <div className={`mt-4 px-4`}>
+        <p className='text-sm text-bunker-300'>Comments & notes</p>
+        <div className='h-32 w-full bg-bunker-800 p-2 rounded-md border border-mineshaft-500 rounded-md text-sm text-bunker-300'> 
+          Leave your comment here...
         </div>
       </div>
     </div>

frontend/pages/dashboard/[id].js

@@ -56,14 +56,16 @@ const KeyPair = ({
   modifyValue,
   modifyVisibility,
   isBlurred,
-  duplicates
+  duplicates,
+  toggleSidebar,
+  sidebarSecretNumber
 }) => {
 
   return (
-    <div className="px-1 flex flex-col items-center ml-1">
-      <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-2">
+    <div className={`mx-1 flex flex-col items-center ml-1 ${keyPair.pos == sidebarSecretNumber && "bg-mineshaft-500 duration-200"} rounded-md`}>
+      <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-1">
         <div className="min-w-xl w-96">
-          <div className="flex items-center md:px-1 rounded-lg mt-4 md:mt-0 max-h-16">
+          <div className="flex pr-1 items-center rounded-lg mt-4 md:mt-0 max-h-16">
             <DashboardInputField
               onChangeHandler={modifyKey}
               type="varName"
@@ -84,17 +86,17 @@ const KeyPair = ({
             />
           </div>
         </div>
-        <div className="cursor-pointer w-9 h-9 bg-white/10 rounded-md flex flex-row justify-center items-center opacity-50 hover:opacity-100 duration-200">
+        <div onClick={() => toggleSidebar(keyPair.pos)} className="cursor-pointer w-9 h-9 bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200">
           <FontAwesomeIcon
             className="text-gray-300 px-2.5 text-lg mt-0.5"
             icon={faEllipsis}
           />
         </div>
         <div className="w-2"></div>
-        <div className="opacity-50 hover:opacity-100 duration-200">
+        <div className="bg-[#9B3535] hover:bg-red rounded-md duration-200">
           <Button
             onButtonPressed={() => deleteRow(keyPair.id)}
-            color="red"
+            color="none"
             size="icon-sm"
             icon={faX}
           />
@@ -130,7 +132,7 @@ export default function Dashboard() {
   const [sortMethod, setSortMethod] = useState('alphabetical');
   const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
   const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
-  const [sidebarOpen, toggleSidebar] = useState(false);
+  const [sidebarSecretNumber, toggleSidebar] = useState(-1);
 
   const { createNotification } = useNotificationContext();
 
@@ -335,17 +337,17 @@ export default function Dashboard() {
 
   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
-        };
-      });
+    .sort((a, b) =>
+      sortMethod == 'alphabetical'
+        ? a.key.localeCompare(b.key)
+        : b.key.localeCompare(a.key)
+    )
+    .map((item, index) => {
+      return {
+        ...item,
+        pos: index
+      };
+    });
 
     setData(sortedData);
   };
@@ -395,7 +397,13 @@ export default function Dashboard() {
         />
       </Head>
       <div className="flex flex-row">
-        {!sidebarOpen && <SideBar />}
+        {sidebarSecretNumber != -1  && <SideBar 
+          toggleSidebar={toggleSidebar} 
+          data={data.filter(row => row.pos == sidebarSecretNumber)} 
+          modifyKey={listenChangeKey} 
+          modifyValue={listenChangeValue} 
+          modifyVisibility={listenChangeVisibility} 
+        />}
         <div className="w-full max-h-96 pb-2">
           <NavHeader pageName="Secrets" isProjectRelated={true} />
           {checkDocsPopUpVisible && (
@@ -557,7 +565,7 @@ export default function Dashboard() {
                       </div>
                     </div>
                   </div>
-                  <div id="data1" className="">
+                  <div id="data1" className="px-1">
                     {data
                       .filter(
                         (keyPair) =>
@@ -582,6 +590,8 @@ export default function Dashboard() {
                                 index !==
                                 data?.map((item) => item.key).indexOf(item)
                             )}
+                          toggleSidebar={toggleSidebar}
+                          sidebarSecretNumber={sidebarSecretNumber}
                         />
                       ))}
                   </div>
@@ -631,6 +641,8 @@ export default function Dashboard() {
                                 index !==
                                 data?.map((item) => item.key).indexOf(item)
                             )}
+                          toggleSidebar={toggleSidebar}
+                          sidebarSecretNumber={sidebarSecretNumber}
                         />
                       ))}
                   </div>