incorporate common parameters defined for each path and for all operations

Author: jsajal

packages/flowtest-electron/src/utils/collection.js

@@ -28,8 +28,12 @@ const parseOpenAPISpec = (collection) => {
   try {
     // servers is array,, figure case where there can be multiple servers
     const baseUrl = collection['servers'][0]['url'];
-    Object.entries(collection['paths']).map(([path, operation], _) => {
-      Object.entries(operation).map(([requestType, request], _) => {
+    Object.entries(collection['paths']).map(([path, operations], _) => {
+      const commonParameters = Object.prototype.hasOwnProperty.call(operations, 'parameters')
+        ? operations['parameters']
+        : [];
+      const { parameters, ...operationsFiltered } = operations;
+      Object.entries(operationsFiltered).map(([requestType, request], _) => {
         const summary = request['summary'];
         const operationId = request['operationId'];
         const tags = request['tags'];
@@ -39,9 +43,29 @@ const parseOpenAPISpec = (collection) => {
         const pathParameters = [];
         const queryParameters = [];
 
+        const requestParameters = commonParameters.map((obj) => {
+          if (request['parameters']) {
+            // Find the object in the second array that has the same id as the current object
+            const objFromArr2 = request['parameters'].find((o) => o.name === obj.name && o.in === obj.in);
+            // If found, merge the two objects, otherwise return the original object
+            return objFromArr2 ? { ...obj, ...objFromArr2 } : obj;
+          } else {
+            return obj;
+          }
+        });
+
         if (request['parameters']) {
+          // Add any objects from the second array that do not exist in the first array
+          request['parameters'].forEach((obj) => {
+            if (!commonParameters.some((o) => o.name === obj.name && o.in === obj.in)) {
+              requestParameters.push(obj);
+            }
+          });
+        }
+
+        if (requestParameters.length > 0) {
           let firstQueryParam = true;
-          request['parameters'].map((value, _) => {
+          requestParameters.map((value, _) => {
             if (value['in'] === 'query') {
               if (firstQueryParam) {
                 url = url.concat(`?${value['name']}={{${value['name']}}}`);

src/components/molecules/flow/utils.js

@@ -1,13 +1,16 @@
 import { isEqual, reduce, map } from 'lodash';
+import requestNodes from './constants/requestNodes';
 
 export const orderNodesByTags = (nodes, filter) => {
   const result = {};
-  let filterNodes = nodes;
+  let filterNodes = nodes.filter(
+    (node) => node.requestType && requestNodes.map((req) => req.requestType).includes(node.requestType),
+  );
   if (filter.trim() != '') {
     filterNodes = nodes.filter(
       (n) =>
-        n.operationId.toLowerCase().includes(filter.toLowerCase()) ||
-        n.description.toLowerCase().includes(filter.toLowerCase()),
+        (n.operationId && n.operationId.toLowerCase().includes(filter.toLowerCase())) ||
+        (n.description && n.description.toLowerCase().includes(filter.toLowerCase())),
     );
   }
   if (filterNodes) {
@@ -20,10 +23,10 @@ export const orderNodesByTags = (nodes, filter) => {
           result[tag].push(node);
         });
       } else {
-        if (!result['All']) {
-          result['All'] = [];
+        if (!result['no_tag']) {
+          result['no_tag'] = [];
         }
-        result['All'].push(node);
+        result['no_tag'].push(node);
       }
     });
   }

src/components/molecules/modals/OpenCollectionModal.js

@@ -99,7 +99,7 @@ const OpenCollectionModal = ({ closeFn = () => null, open = false }) => {
                 <div className='mt-4'>
                   <ul className='text-lg font-medium'>
                     <li
-                      className={`hover:bg-background-light cursor-pointer rounded border border-transparent px-2 py-4 ${selectedFilePath ? 'text-green-500' : ''}`}
+                      className={`cursor-pointer rounded border border-transparent px-2 py-4 hover:bg-background-light ${selectedFilePath ? 'text-green-500' : ''}`}
                       onClick={handleImportCollectionClick}
                       data-import-type='yaml'
                     >
@@ -117,7 +117,7 @@ const OpenCollectionModal = ({ closeFn = () => null, open = false }) => {
                             <input
                               type='file'
                               id='file'
-                              accept='.yaml,.yml'
+                              accept='.yaml,.yml,.json'
                               ref={importYamlFile}
                               onChange={handleFileSelection}
                             />
@@ -134,7 +134,7 @@ const OpenCollectionModal = ({ closeFn = () => null, open = false }) => {
                       )}
                     </li>
                     <li
-                      className={`hover:bg-background-light flex cursor-pointer items-center justify-start gap-4 px-2 py-4 ${selectedFilePath ? 'cursor-default' : 'cursor-not-allowed'}`}
+                      className={`flex cursor-pointer items-center justify-start gap-4 px-2 py-4 hover:bg-background-light ${selectedFilePath ? 'cursor-default' : 'cursor-not-allowed'}`}
                       onClick={handleDirectorySelectionClick}
                     >
                       <div className='flex items-center justify-center w-8 h-8 border-4 rounded-full border-cyan-900'>