Added commenting functionality (#135)

frontend/components/dashboard/CommentField.tsx

@@ -0,0 +1,16 @@
+/**
+ * This is the text field where people can add comments to particular secrets.
+ */
+const CommentField = ({ comment, modifyComment, position }: { comment: string; modifyComment: (value: string, posistion: number) => void; position: number;}) => {
+  return <div className={`relative mt-4 px-4 pt-4`}>
+    <p className='text-sm text-bunker-300'>Comments & notes</p>
+    <textarea 
+      className="bg-bunker-800 h-32 w-full bg-bunker-800 p-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+      value={comment}
+      onChange={(e) => modifyComment(e.target.value, position)}
+      placeholder="Leave any comments here..."
+    />
+  </div>
+}
+
+export default CommentField;

frontend/components/dashboard/DropZone.tsx

@@ -126,7 +126,7 @@ const DropZone = ({
     </div>
   ) : keysExist ? (
     <div
-      className="opacity-60 hover:opacity-100 duration-200 relative bg-bunker outline max-w-[calc(100%-1rem)] w-full outline-dashed outline-gray-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
+      className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 outline max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
@@ -147,9 +147,9 @@ const DropZone = ({
       <div className="flex flex-row">
         <FontAwesomeIcon
           icon={faUpload}
-          className="text-gray-300 text-3xl mr-6"
+          className="text-bunker-300 text-3xl mr-6"
         />
-        <p className="text-gray-300 mt-1">
+        <p className="text-bunker-300 mt-1">
           Drag and drop your .env file here to add more keys.
         </p>
       </div>

frontend/components/dashboard/SideBar.tsx

@@ -5,6 +5,7 @@ import SecretVersionList from 'ee/components/SecretVersionList';
 
 import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
+import CommentField from './CommentField';
 import DashboardInputField from './DashboardInputField';
 import GenerateSecretMenu from './GenerateSecretMenu';
 
@@ -15,6 +16,7 @@ interface SecretProps {
   pos: number;
   type: string;
   id: string;
+  comment: string;
 }
 
 interface OverrideProps {
@@ -22,6 +24,7 @@ interface OverrideProps {
   keyName: string;
   value: string;
   pos: number;
+  comment: string;
 }
 
 interface SideBarProps {
@@ -29,6 +32,7 @@ interface SideBarProps {
   data: SecretProps[];
   modifyKey: (value: string, position: number) => void; 
   modifyValue: (value: string, position: number) => void; 
+  modifyComment: (value: string, position: number) => void; 
   addOverride: (value: OverrideProps) => void; 
   deleteOverride: (id: string) => void; 
   buttonReady: boolean;
@@ -56,6 +60,7 @@ const SideBar = ({
   data, 
   modifyKey, 
   modifyValue, 
+  modifyComment,
   addOverride, 
   deleteOverride, 
   buttonReady, 
@@ -115,6 +120,7 @@ const SideBar = ({
             value={data[0].value}
             pos={data[0].pos}
             id={data[0].id}
+            comment={data[0].comment}
             deleteOverride={deleteOverride}
             sharedToHide={sharedToHide}
             setSharedToHide={setSharedToHide}
@@ -143,17 +149,7 @@ const SideBar = ({
           isFull={true}
         />
       </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>
-          <div className="bg-yellow rounded-md h-min">
-            <p className="relative text-black text-xs px-1.5 h-min">Coming soon!</p>
-          </div>
-        </div>
-        <div className='h-32 opacity-50 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>
+      <CommentField comment={data.filter(secret => secret.type == "shared")[0]?.comment} modifyComment={modifyComment} position={data[0].pos} />
     </div>
     <div className={`flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]`}>
       <Button