diff --git a/src/components/ServiceList.js b/src/components/ServiceList.js index 81c43f9d8..9dec74dee 100644 --- a/src/components/ServiceList.js +++ b/src/components/ServiceList.js @@ -1,13 +1,13 @@ -import React, {useCallback, useEffect, useMemo, useState} from "react"; +import React, {useMemo, useState} from "react"; import { useSelector } from "react-redux"; -import PropTypes from "prop-types"; import { Link } from "react-router-dom"; -import {Table, Typography, Tag, Icon, Button, Modal, Form, Input, Divider, Skeleton} from "antd"; +import {Table, Typography, Tag, Icon, Button} from "antd"; -import {getIsAuthenticated, useAuthorizationHeader} from "../lib/auth/utils"; -import JsonDisplay from "./JsonDisplay"; +import {getIsAuthenticated} from "../lib/auth/utils"; + +import ServiceRequestModal from "./services/ServiceRequestModal"; const SERVICE_KIND_STYLING = { fontFamily: "monospace" }; @@ -110,107 +110,6 @@ const serviceColumns = (isAuthenticated, setRequestModalService) => [ ]; /* eslint-enable react/prop-types */ -const ServiceRequestModal = ({service, onCancel}) => { - const bentoServicesByKind = useSelector(state => state.bentoServices.itemsByKind); - const serviceUrl = useMemo(() => bentoServicesByKind[service]?.url, [bentoServicesByKind, service]); - - const [requestPath, setRequestPath] = useState("service-info"); - const [requestLoading, setRequestLoading] = useState(false); - const [requestData, setRequestData] = useState(null); - const [requestIsJSON, setRequestIsJSON] = useState(false); - - const [hasAttempted, setHasAttempted] = useState(false); - - const authHeader = useAuthorizationHeader(); - - const performRequestModalGet = useCallback(() => { - if (!serviceUrl) { - setRequestData(null); - return; - } - (async () => { - setRequestLoading(true); - - try { - const res = await fetch(`${serviceUrl}/${requestPath}`, { - headers: authHeader, - }); - - if ((res.headers.get("content-type") ?? "").includes("application/json")) { - const data = await res.json(); - setRequestIsJSON(true); - setRequestData(data); - } else { - const data = await res.text(); - setRequestIsJSON(false); - setRequestData(data); - } - } finally { - setRequestLoading(false); - } - })(); - }, [serviceUrl, requestPath, authHeader]); - - useEffect(() => { - setRequestData(null); - setRequestIsJSON(false); - setRequestPath("service-info"); - setHasAttempted(false); - }, [service]); - - useEffect(() => { - if (!hasAttempted) { - performRequestModalGet(); - setHasAttempted(true); - } - }, [hasAttempted, performRequestModalGet]); - - return ( - - - - setRequestPath(e.target.value)} - /> - - - { - performRequestModalGet(); - e.preventDefault(); - }}>GET - - - - {requestLoading ? : ( - requestIsJSON - ? - : ( - - - {((typeof requestData) === "string" || requestData === null) - ? requestData - : JSON.stringify(requestData)} - - - ) - )} - - ); -}; -ServiceRequestModal.propTypes = { - service: PropTypes.string, - onCancel: PropTypes.func, -}; - const ServiceList = () => { const [requestModalService, setRequestModalService] = useState(null); diff --git a/src/components/services/ServiceRequestModal.js b/src/components/services/ServiceRequestModal.js new file mode 100644 index 000000000..34fdf74a4 --- /dev/null +++ b/src/components/services/ServiceRequestModal.js @@ -0,0 +1,115 @@ +import React, {useCallback, useEffect, useMemo, useState} from "react"; +import {useSelector} from "react-redux"; +import PropTypes from "prop-types"; + +import {Button, Divider, Form, Input, Modal, Skeleton} from "antd"; + +import {useAuthorizationHeader} from "../../lib/auth/utils"; +import JsonDisplay from "../JsonDisplay"; + +const ServiceRequestModal = ({service, onCancel}) => { + const bentoServicesByKind = useSelector(state => state.bentoServices.itemsByKind); + const serviceUrl = useMemo(() => bentoServicesByKind[service]?.url, [bentoServicesByKind, service]); + + const [requestPath, setRequestPath] = useState("service-info"); + const [requestLoading, setRequestLoading] = useState(false); + const [requestData, setRequestData] = useState(null); + const [requestIsJSON, setRequestIsJSON] = useState(false); + + const [hasAttempted, setHasAttempted] = useState(false); + + const authHeader = useAuthorizationHeader(); + + const performRequestModalGet = useCallback(() => { + if (!serviceUrl) { + setRequestData(null); + return; + } + (async () => { + setRequestLoading(true); + + const p = requestPath.replace(/^\//, ""); + try { + const res = await fetch(`${serviceUrl}/${p}`, { + headers: authHeader, + }); + + if ((res.headers.get("content-type") ?? "").includes("application/json")) { + const data = await res.json(); + setRequestIsJSON(true); + setRequestData(data); + } else { + const data = await res.text(); + setRequestIsJSON(false); + setRequestData(data); + } + } finally { + setRequestLoading(false); + setRequestPath(p); // With starting '/' trimmed off if needed + } + })(); + }, [serviceUrl, requestPath, authHeader]); + + useEffect(() => { + setRequestData(null); + setRequestIsJSON(false); + setRequestPath("service-info"); + setHasAttempted(false); + }, [service]); + + useEffect(() => { + if (!hasAttempted) { + performRequestModalGet(); + setHasAttempted(true); + } + }, [hasAttempted, performRequestModalGet]); + + const formSubmit = useCallback(e => { + performRequestModalGet(); + e.preventDefault(); + }, [performRequestModalGet]); + + return ( + + + + setRequestPath(e.target.value)} + /> + + + GET + + + + {requestLoading ? : ( + requestIsJSON + ? + : ( + + + {((typeof requestData) === "string" || requestData === null) + ? requestData + : JSON.stringify(requestData)} + + + ) + )} + + ); +}; +ServiceRequestModal.propTypes = { + service: PropTypes.string, + onCancel: PropTypes.func, +}; + +export default ServiceRequestModal;
- {((typeof requestData) === "string" || requestData === null) - ? requestData - : JSON.stringify(requestData)} -
+ {((typeof requestData) === "string" || requestData === null) + ? requestData + : JSON.stringify(requestData)} +