Style updates

frontend/components/dashboard/SideBar.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import { faDotCircle, faRotateLeft, faX } from '@fortawesome/free-solid-svg-icons';
+import { faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import SecretVersionList from 'ee/components/SecretVersionList';
 
 import Button from '../basic/buttons/Button';
-import ListBox from '../basic/Listbox';
 import Toggle from '../basic/Toggle';
 import DashboardInputField from './DashboardInputField';
 import GenerateSecretMenu from './GenerateSecretMenu';
@@ -64,7 +64,6 @@ const SideBar = ({
   setSharedToHide 
 }: 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 overflow-y-auto'>
@@ -144,49 +143,7 @@ const SideBar = ({
           isFull={true}
         />
       </div> */}
-      <div className='w-full h-52 px-4 mt-4 text-sm text-bunker-300 overflow-x-none'>
+      <SecretVersionList />
-        <p className=''>Version History</p>
-        <div className='p-1 rounded-md bg-bunker-800 border border-mineshaft-500 overflow-x-none'>
-          <div className='h-48 overflow-y-scroll overflow-x-none'>
-            <div className='flex flex-row'>
-              <div className='pr-1 flex flex-col items-center'>
-                <div className='p-1'><FontAwesomeIcon icon={faDotCircle} /></div>
-                <div className='w-0 h-full border-l mt-1'></div>
-              </div>
-              <div className='flex flex-col w-full max-w-[calc(100%-2.3rem)]'>
-                <div className='pr-2 pt-1'>Current</div>
-                <div className=''><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-300/20 mr-1.5'>Key:</span>{data[0].key}</p></div>
-                <div className=''><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-300/20 mr-1.5'>Value:</span>{data[0].value}</p></div>
-                <div className='pb-1'><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-300/20 mr-1.5'>Visibility:</span>{'shared'}</p></div>
-              </div>
-            </div>
-            <div className='flex flex-row'>
-              <div className='pr-1 flex flex-col items-center'>
-                <div className='cursor-pointer p-1 hover:bg-bunker-500 rounded-md'><FontAwesomeIcon icon={faRotateLeft} /></div>
-                <div className='w-0 h-full border-l'></div>
-              </div>
-              <div className='flex flex-col max-w-[calc(100%-2.3rem)]'>
-                <div className='pr-2 pt-1'>12/22/2022 12:36 EST</div>
-                <div className='w-full pr-2'><span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1'>Key:</span> KeyKeyKey</div>
-                <div className='w-full pr-2'><span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1'>Value:</span> ValueValueValue</div>
-                <div className='pb-1'><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-300/20 mr-1.5'>Visibility:</span>{'shared'}</p></div>
-              </div>
-            </div>
-            <div className='flex flex-row'>
-              <div className='pr-1 flex flex-col items-center'>
-                <div className='cursor-pointer p-1 hover:bg-bunker-500 rounded-md'><FontAwesomeIcon icon={faRotateLeft} /></div>
-                <div className='w-0 h-full border-l'></div>
-              </div>
-              <div className='flex flex-col max-w-[calc(100%-2.3rem)]'>
-                <div className='pr-2 pt-1'>12/21/2022 09:11 EST</div>
-                <div className='w-full pr-2'><span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1'>Key:</span> KeyKey</div>
-                <div className='w-full pr-2'><span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1'>Value:</span> ValueValue</div>
-                <div className='pb-1'><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-300/20 mr-1.5'>Visibility:</span>{'shared'}</p></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div className={`relative mt-4 px-4 pt-4`}>
         <div className='flex flex-row justify-between'>
           <p className='text-sm text-bunker-300'>Comments & notes</p>

frontend/ee/components/SecretVersionList.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { faCircle, faDotCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface SecretVersionListProps {}
+
+const versionData = [{
+  value: "Value1",
+  date: "Date1",
+  user: "[email protected]"
+}, {
+  value: "Value2",
+  date: "Date2",
+  user: "[email protected]"
+}]
+
+/**
+ * @returns a list of the versions for a specific secret
+ */
+const SecretVersionList = () => {
+  return <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'>
+    <div className='h-48 overflow-y-scroll overflow-x-none'>
+      {versionData.map((version, index) =>
+        <div key={index} className='flex flex-row'>
+          <div className='pr-1 flex flex-col items-center'>
+            <div className='p-1'><FontAwesomeIcon icon={index == 0 ? faDotCircle : faCircle} /></div>
+            <div className='w-0 h-full border-l mt-1'></div>
+          </div>
+          <div className='flex flex-col w-full max-w-[calc(100%-2.3rem)]'>
+            <div className='pr-2 pt-1'>{version.date}</div>
+            <div className=''><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1.5'>Value:</span>{version.value}</p></div>
+            <div className=''><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1.5'>Updated by:</span>{version.user}</p></div>
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+</div>
+};
+
+export default SecretVersionList;

frontend/pages/dashboard/[id].tsx

@@ -553,40 +553,39 @@ export default function Dashboard() {
               </div>
             </div>
             {data?.length !== 0 ? (
-              <div
+              <div className="flex flex-col w-full mt-1 mb-2">
-                id="dataall"
+                <div className='bg-mineshaft-800 rounded-md px-2 py-2 max-w-5xl'>
-                className="flex flex-col max-h-40 grow max-h-[calc(100vh-240px)] w-full overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar"
+                  <div
-              >
+                    className={`mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar`}
-                <div
+                  >
-                  className={`bg-white/5 mt-1 mb-1 rounded-md pb-2 max-w-5xl overflow-visible`}
+                    <div className="px-1 pt-2">
-                >
+                      {data?.filter(row => !(sharedToHide.includes(row.id) && row.type == 'shared')).map((keyPair) => (
-                  <div id="data1" className="px-1 pt-2">
+                        <KeyPair 
-                    {data?.filter(row => !(sharedToHide.includes(row.id) && row.type == 'shared')).map((keyPair) => (
+                          key={keyPair.id}
-                      <KeyPair 
+                          keyPair={keyPair}
-                        key={keyPair.id}
+                          deleteRow={deleteCertainRow}
-                        keyPair={keyPair}
+                          modifyValue={listenChangeValue}
-                        deleteRow={deleteCertainRow}
+                          modifyKey={listenChangeKey}
-                        modifyValue={listenChangeValue}
+                          isBlurred={blurred}
-                        modifyKey={listenChangeKey}
+                          isDuplicate={findDuplicates(data?.map((item) => item.key + item.type))?.includes(keyPair.key + keyPair.type)}
-                        isBlurred={blurred}
+                          toggleSidebar={toggleSidebar}
-                        isDuplicate={findDuplicates(data?.map((item) => item.key + item.type))?.includes(keyPair.key + keyPair.type)}
+                          sidebarSecretId={sidebarSecretId}
-                        toggleSidebar={toggleSidebar}
+                        />
-                        sidebarSecretId={sidebarSecretId}
+                      ))}
+                    </div>
+                    <div className="w-full max-w-5xl px-2 pt-2">
+                      <DropZone
+                        setData={addData}
+                        setErrorDragAndDrop={setErrorDragAndDrop}
+                        createNewFile={addRow}
+                        errorDragAndDrop={errorDragAndDrop}
+                        setButtonReady={setButtonReady}
+                        keysExist={true}
+                        numCurrentRows={data.length}
                       />
-                    ))}
+                    </div>
                   </div>
                 </div>
-                <div className="w-full max-w-5xl">
-                  <DropZone
-                    setData={addData}
-                    setErrorDragAndDrop={setErrorDragAndDrop}
-                    createNewFile={addRow}
-                    errorDragAndDrop={errorDragAndDrop}
-                    setButtonReady={setButtonReady}
-                    keysExist={true}
-                    numCurrentRows={data.length}
-                  />
-                </div>
               </div>
             ) : (
               <div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28">