[whois] endpoint configurable, add more options to input placeholder,…

… remove obsolete responsible persons (#318)

apps/whois/package.json

@@ -59,6 +59,11 @@
       "value": "theme-dark",
       "type": "optional",
       "description": "Override the default theme. Possible values are theme-light or theme-dark (default)"
+    },
+    "endpoint": {
+      "value": "",
+      "type": "required",
+      "description": "Endpoint URL of the API"
     }
   }
 }

apps/whois/src/App.js

@@ -42,7 +42,7 @@ const App = (props) => {
   const [items, setItems] = React.useState(null)
   const [error, setError] = React.useState(null)
   const [statusCode, setStatusCode] = React.useState(null)
-  const { embedded } = props
+  const { embedded, endpoint } = props
 
   const resultsShown = items !== null
 
@@ -59,7 +59,7 @@ const App = (props) => {
     setProcessing(true)
 
     // search
-    searchByInput(term, options)
+    searchByInput(endpoint, term, options)
       .then((response) => {
         // get status code from response
         setStatusCode(response.status)

apps/whois/src/ResultItem.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useMemo, useEffect } from "react"
 import ReactJson from "react-json-view"
 import { DateTime } from "luxon"
 import { Icon, Stack } from "juno-ui-components"
@@ -39,7 +39,15 @@ const capitalize = (string) => {
 const ResultItem = ({ content, expand }) => {
   const [isExpanded, setIsExpanded] = useState(false)
 
-  React.useEffect(() => {
+  const responsibles = useMemo(() => {
+    if (!content?.responsibles) return null
+    // billing api do not return anymore following values. We extract them active and we leave the rest as it is.
+    const { controller, securityExpert, productOwner, ...rest } =
+      content.responsibles
+    return rest
+  }, [content.responsibles])
+
+  useEffect(() => {
     setIsExpanded(expand)
   }, [expand])
 
@@ -61,11 +69,11 @@ const ResultItem = ({ content, expand }) => {
         {content.region && (
           <div className="text-theme-light">{content.region}</div>
         )}
-        {content.responsibles && (
+        {responsibles && (
           <>
             <h4 className="font-bold mt-3">Responsible Persons:</h4>
             <Stack direction="vertical" gap="2">
-              {Object.entries(content.responsibles).map(
+              {Object.entries(responsibles).map(
                 ([contactType, contactInfo]) => (
                   <div key={contactType}>
                     <h5>{capitalize(contactType)}:</h5>

apps/whois/src/Search.js

@@ -39,7 +39,7 @@ const Search = ({ onSearch, resultsShown, value }) => {
       className={`search ${searchClasses(resultsShown)}`}
     >
       <SearchInput
-        placeholder="IPs, IP lists, or IP ranges (CIDR)"
+        placeholder="IPs, IP lists, IP ranges (CIDR), project id, domain id or cost object"
         className=""
         variant="hero"
         value={searchTerm}

apps/whois/src/actions.js

@@ -1,4 +1,4 @@
-const ENDPOINT = "https://whois.global.cloud.sap/v1"
+const DEFAULT_ENDPOINT = "https://whois.global.cloud.sap/v1"
 // const ENDPOINT = "https://whois-staging.scaleout.eu-nl-1.cloud.sap/v1"
 
 class HTTPError extends Error {
@@ -31,9 +31,12 @@ const checkStatus = (response) => {
   }
 }
 
-export const search = (input, options) => {
+export const search = (endpoint, input, options) => {
+  let newEndpoint = DEFAULT_ENDPOINT
+  if (endpoint && endpoint.length > 0) newEndpoint = endpoint
+
   return fetch(
-    `${ENDPOINT}/query?input=${input}${encodeUrlParamsFromObject(options)}`,
+    `${newEndpoint}/query?input=${input}${encodeUrlParamsFromObject(options)}`,
     {
       method: "GET",
       credentials: "same-origin",