Skip to content

Commit 4261e3d

Browse files
jsajaljsajal
committed
ability to search for nodes
1 parent c4beff2 commit 4261e3d

2 files changed

Lines changed: 35 additions & 18 deletions

File tree

‎src/components/molecules/flow/AddNodes.js‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { PropTypes } from 'prop-types';
33
import { Popover, Transition } from '@headlessui/react';
44
import { PlusIcon, MinusIcon } from '@heroicons/react/20/solid';
55
import { Fragment } from 'react';
66
import { Disclosure } from '@headlessui/react';
7-
import { ChevronUpIcon } from '@heroicons/react/20/solid';
7+
import { ChevronDownIcon } from '@heroicons/react/20/solid';
88
import useCollectionStore from 'stores/CollectionStore';
99
import { orderNodesByTags } from './utils';
1010
import HorizontalDivider from 'components/atoms/common/HorizontalDivider';
@@ -64,9 +64,7 @@ const setVarNode = {
6464
};
6565

6666
const AddNodes = ({ collectionId }) => {
67-
// const [open, setOpen] = useState(false);
68-
// const anchorRef = useRef(null);
69-
// const ps = useRef();
67+
const [searchFilter, setSearchFilter] = useState('');
7068

7169
const onDragStart = (event, node) => {
7270
event.dataTransfer.setData('application/reactflow', JSON.stringify(node));
@@ -75,7 +73,7 @@ const AddNodes = ({ collectionId }) => {
7573

7674
// Get all requests of this collections
7775
const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
78-
const nodesByTags = orderNodesByTags(collection.nodes);
76+
const nodesByTags = orderNodesByTags(collection.nodes, searchFilter);
7977

8078
return (
8179
<div className='absolute bottom-4 right-4 z-[2000]'>
@@ -110,7 +108,7 @@ const AddNodes = ({ collectionId }) => {
110108
<>
111109
<Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
112110
<span>Requests</span>
113-
<ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5`} />
111+
<ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5`} />
114112
</Disclosure.Button>
115113

116114
<Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
@@ -137,17 +135,28 @@ const AddNodes = ({ collectionId }) => {
137135
<>
138136
<Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
139137
<span>{collection.name}</span>
140-
<ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
138+
<ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
141139
</Disclosure.Button>
142140
<Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
143141
<div>
142+
<div className='flex items-center justify-between text-sm border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'>
143+
<input
144+
type='text'
145+
className='nodrag nowheel block h-9 w-full min-w-40 rounded-bl-md rounded-tl-md p-2.5'
146+
name='search-nodes'
147+
placeholder='Search Nodes'
148+
onChange={(e) => setSearchFilter(e.target.value)}
149+
value={searchFilter}
150+
/>
151+
</div>
152+
<HorizontalDivider />
144153
{Object.entries(nodesByTags).map(([tag, nodes], index) => (
145154
<Disclosure as='div' key={index}>
146155
{({ open }) => (
147156
<>
148157
<Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
149158
<span>{tag}</span>
150-
<ChevronUpIcon
159+
<ChevronDownIcon
151160
className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `}
152161
/>
153162
</Disclosure.Button>
@@ -189,7 +198,7 @@ const AddNodes = ({ collectionId }) => {
189198
<>
190199
<Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
191200
<span>Output</span>
192-
<ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
201+
<ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
193202
</Disclosure.Button>
194203
<Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
195204
<div
@@ -212,7 +221,7 @@ const AddNodes = ({ collectionId }) => {
212221
<>
213222
<Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
214223
<span>Assert</span>
215-
<ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
224+
<ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
216225
</Disclosure.Button>
217226
<Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
218227
<div
@@ -235,7 +244,7 @@ const AddNodes = ({ collectionId }) => {
235244
<>
236245
<Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
237246
<span>Delay</span>
238-
<ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
247+
<ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
239248
</Disclosure.Button>
240249
<Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
241250
<div
@@ -258,7 +267,7 @@ const AddNodes = ({ collectionId }) => {
258267
<>
259268
<Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
260269
<span>Authentication</span>
261-
<ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
270+
<ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
262271
</Disclosure.Button>
263272
<Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
264273
<div
@@ -281,7 +290,7 @@ const AddNodes = ({ collectionId }) => {
281290
<>
282291
<Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
283292
<span>Complex</span>
284-
<ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
293+
<ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
285294
</Disclosure.Button>
286295
<Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
287296
<div
@@ -304,7 +313,7 @@ const AddNodes = ({ collectionId }) => {
304313
<>
305314
<Disclosure.Button className='flex justify-between w-full px-4 py-2 text-lg font-medium text-left border-t border-b bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring'>
306315
<span>Set Variable</span>
307-
<ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
316+
<ChevronDownIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 `} />
308317
</Disclosure.Button>
309318
<Disclosure.Panel className='px-4 pt-4 pb-2 text-sm border-l border-r'>
310319
<div

‎src/components/molecules/flow/utils.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import { isEqual, reduce, map } from 'lodash';
22

3-
export const orderNodesByTags = (nodes) => {
3+
export const orderNodesByTags = (nodes, filter) => {
44
const result = {};
5-
if (nodes) {
6-
nodes.map((node) => {
5+
let filterNodes = nodes;
6+
if (filter.trim() != '') {
7+
filterNodes = nodes.filter(
8+
(n) =>
9+
n.operationId.toLowerCase().includes(filter.toLowerCase()) ||
10+
n.description.toLowerCase().includes(filter.toLowerCase()),
11+
);
12+
}
13+
if (filterNodes) {
14+
filterNodes.map((node) => {
715
node.tags.map((tag) => {
816
if (!result[tag]) {
917
result[tag] = [];

0 commit comments

Comments
 (0)