export function ManageMockResponsePanel()

in desktop/plugins/public/network/request-mocking/ManageMockResponsePanel.tsx [64:188]
111 lines of code
7 McCabe index (conditional complexity)

export function ManageMockResponsePanel(props: Props) {
  const networkRouteManager = useContext(NetworkRouteContext);
  const [selectedIdAtom] = useState(() => createState<RequestId | undefined>());
  const selectedId = useValue(selectedIdAtom);

  useEffect(() => {
    selectedIdAtom.update((selectedId) => {
      const keys = Object.keys(props.routes);
      let returnValue: string | undefined = undefined;
      // selectId is undefined when there are no rows or it is the first time rows are shown
      if (selectedId === undefined) {
        if (keys.length === 0) {
          // there are no rows
          returnValue = undefined;
        } else {
          // first time rows are shown
          returnValue = keys[0];
        }
      } else {
        if (keys.includes(selectedId)) {
          returnValue = selectedId;
        } else {
          // selectedId row value not in routes so default to first line
          returnValue = keys[0];
        }
      }
      return returnValue;
    });
  }, [props.routes, selectedIdAtom]);
  const duplicatedIds = useMemo(
    () => _duplicateIds(props.routes),
    [props.routes],
  );

  const items: RouteItem[] = Object.entries(props.routes).map(
    ([id, route]) => ({
      id,
      route,
      title: route.requestUrl,
      isDuplicate: duplicatedIds.includes(id),
    }),
  );

  const handleDelete = useCallback(
    (id: string) => {
      Modal.confirm({
        title: 'Are you sure you want to delete this item?',
        icon: '',
        onOk() {
          networkRouteManager.removeRoute(id);
          selectedIdAtom.set(undefined);
        },
        onCancel() {},
      });
    },
    [networkRouteManager, selectedIdAtom],
  );
  const handleToggle = useCallback(
    (id: string) => {
      networkRouteManager.enableRoute(id);
    },
    [networkRouteManager],
  );

  const handleRender = useCallback(
    (item: RouteItem) => (
      <RouteEntry item={item} onDelete={handleDelete} onToggle={handleToggle} />
    ),
    [handleDelete, handleToggle],
  );

  const handleSelect = useCallback(
    (id: string) => {
      if (id) {
        selectedIdAtom.set(id);
      }
    },
    [selectedIdAtom],
  );

  return (
    <Layout.Left resizable style={{minHeight: 400}}>
      <Layout.Top>
        <Toolbar>
          <Button
            onClick={() => {
              const newId = networkRouteManager.addRoute();
              selectedIdAtom.set(newId);
            }}>
            Add Route
          </Button>
          <NUX
            title="It is now possible to select calls from the network call list and convert them into mock routes."
            placement="bottom">
            <Button
              onClick={() => {
                networkRouteManager.copySelectedCalls();
              }}>
              Copy Selected Calls
            </Button>
          </NUX>
          <Button onClick={networkRouteManager.importRoutes}>Import</Button>
          <Button onClick={networkRouteManager.exportRoutes}>Export</Button>
          <Button onClick={networkRouteManager.clearRoutes}>Clear</Button>
        </Toolbar>
        <DataList
          items={items}
          selection={selectedId}
          onRenderItem={handleRender}
          onSelect={handleSelect}
          scrollable
        />
      </Layout.Top>
      <Layout.Container gap pad>
        {selectedId && props.routes.hasOwnProperty(selectedId) && (
          <MockResponseDetails
            id={selectedId}
            route={props.routes[selectedId]}
            isDuplicated={duplicatedIds.includes(selectedId)}
          />
        )}
      </Layout.Container>
    </Layout.Left>
  );
}