Feat/update file picker (#6614)

* styling: file-picker editor component

* use filepicker component within filebody and response example filebody

* edit example to use button components

* fix: hide delete, disable checkbox in preview mode

* make label italic

* chore: change example cta buttons to filled style

---------

Co-authored-by: Bijin A B <bijin@usebruno.com>

packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js

@@ -120,6 +120,7 @@ const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = fals
           onChange={(newPath) => handleFilePathChange(row, newPath, onChange)}
           collection={collection}
           readOnly={!editMode}
+          displayMode="labelAndIcon"
         />
       )
     },
@@ -187,6 +188,7 @@ const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = fals
         onReorder={handleParamDrag}
         showAddRow={editMode}
         showCheckbox={false}
+        showDelete={editMode}
       />
     </StyledWrapper>
   );

packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js

@@ -94,6 +94,8 @@ const ResponseExampleFormUrlEncodedParams = ({ item, collection, exampleUid, edi
         reorderable={editMode}
         onReorder={handleParamDrag}
         showAddRow={editMode}
+        showDelete={editMode}
+        disableCheckbox={!editMode}
       />
     </StyledWrapper>
   );

packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js

@@ -139,6 +139,8 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
         reorderable={editMode}
         onReorder={handleHeaderDrag}
         showAddRow={editMode}
+        showDelete={editMode}
+        disableCheckbox={!editMode}
       />
       {editMode && (
         <div className="flex justify-end mt-2">

packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js

@@ -265,6 +265,8 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
         reorderable={editMode}
         onReorder={handleParamDrag}
         showAddRow={editMode}
+        showDelete={editMode}
+        disableCheckbox={!editMode}
       />
     </StyledWrapper>
   );

packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js

@@ -192,6 +192,8 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
         reorderable={editMode}
         onReorder={handleQueryParamDrag}
         showAddRow={editMode}
+        showDelete={editMode}
+        disableCheckbox={!editMode}
       />
       {editMode && (
         <div className="flex justify-end mt-2">