From 6a10a796c1439d17cc70ea052d76c533508483b0 Mon Sep 17 00:00:00 2001
From: Nikhil Shahi <nshahi1998@gmail.com>
Date: Mon, 5 Sep 2022 19:01:51 -0500
Subject: [PATCH] (fix) fix error messages on backend, remove search, add title
 on open api spec

---
 backend/src/services/spec/index.ts            |  5 ++-
 .../src/components/Endpoint/SpecComponent.tsx | 45 +++----------------
 2 files changed, 9 insertions(+), 41 deletions(-)

diff --git a/backend/src/services/spec/index.ts b/backend/src/services/spec/index.ts
index a25b4057..d5cbb7a8 100644
--- a/backend/src/services/spec/index.ts
+++ b/backend/src/services/spec/index.ts
@@ -32,6 +32,7 @@ import {
 } from "./utils"
 import { AlertService } from "services/alert"
 import { DatabaseService } from "services/database"
+import Error404NotFound from "errors/error-404-not-found"
 
 export class SpecService {
   static async getSpec(specName: string): Promise<OpenApiSpecResponse> {
@@ -85,12 +86,12 @@ export class SpecService {
       name: fileName,
     })
     if (!openApiSpec) {
-      throw new Error400BadRequest(
+      throw new Error404NotFound(
         "No spec file with the provided name exists.",
       )
     }
     if (openApiSpec.isAutoGenerated) {
-      throw new Error400BadRequest("Can't delete auto generated spec.")
+      throw new Error409Conflict("Can't delete auto generated spec.")
     }
     for (let i = 0; i < specEndpoints.length; i++) {
       const endpoint = specEndpoints[i]
diff --git a/frontend/src/components/Endpoint/SpecComponent.tsx b/frontend/src/components/Endpoint/SpecComponent.tsx
index 18ed7044..10ec27cf 100644
--- a/frontend/src/components/Endpoint/SpecComponent.tsx
+++ b/frontend/src/components/Endpoint/SpecComponent.tsx
@@ -3,21 +3,17 @@ import {
   Box,
   useColorModeValue,
   HStack,
-  InputGroup,
-  InputLeftElement,
-  Input,
+  Heading,
   Tag,
   IconButton,
   Select,
 } from "@chakra-ui/react"
-import debounce from "lodash/debounce"
 import { saveAs } from "file-saver"
 import YAML from "yaml"
 import JsYaml from "js-yaml"
 import Highlight, { defaultProps } from "prism-react-renderer"
 import darkTheme from "prism-react-renderer/themes/duotoneDark"
 import lightTheme from "prism-react-renderer/themes/github"
-import { GoSearch } from "@react-icons/all-files/go/GoSearch"
 import { FiDownload } from "@react-icons/all-files/fi/FiDownload"
 import { ApiEndpointDetailed } from "@common/types"
 import { SpecExtension } from "@common/enums"
@@ -39,7 +35,6 @@ const SpecComponent: React.FC<SpecComponentProps> = ({ endpoint }) => {
   const [currExtension, setCurrExtension] = useState<SpecExtension>(
     endpoint.openapiSpec.extension,
   )
-  const [searchQuery, setSearchQuery] = useState<string>("")
 
   const blob = new Blob([specString], {
     type: EXTENSION_TO_TYPE[currExtension],
@@ -67,8 +62,6 @@ const SpecComponent: React.FC<SpecComponentProps> = ({ endpoint }) => {
     saveAs(blob, `${endpoint?.openapiSpec?.name}.${currExtension}`)
   }
 
-  const debounceSearch = debounce(setSearchQuery, 500)
-
   return (
     <Box w={{ base: "full", lg: "50%" }} h="full">
       <HStack
@@ -79,20 +72,9 @@ const SpecComponent: React.FC<SpecComponentProps> = ({ endpoint }) => {
         justifyContent="space-between"
       >
         <HStack spacing="4">
-          <InputGroup
-            w={{ base: "150px", sm: "200px", lg: "150px", xl: "250px" }}
-          >
-            <InputLeftElement pointerEvents="none">
-              <GoSearch />
-            </InputLeftElement>
-            <Input
-              onChange={e => debounceSearch(e.target.value)}
-              type="text"
-              placeholder="Search"
-            />
-          </InputGroup>
+          <Heading size="md">{endpoint?.openapiSpec?.name}</Heading>
           {endpoint?.openapiSpec?.isAutoGenerated && (
-            <Tag rounded="3xl" size="lg" colorScheme="orange">
+            <Tag rounded="3xl" size="md" colorScheme="blue">
               Generated
             </Tag>
           )}
@@ -155,24 +137,9 @@ const SpecComponent: React.FC<SpecComponentProps> = ({ endpoint }) => {
                     {i + 1}
                   </span>
                   <span style={{ display: "table-cell" }}>
-                    {line.map((token, key) => {
-                      const matchedString =
-                        searchQuery && token.content.includes(searchQuery)
-                      const color = matchedString
-                        ? "var(--chakra-colors-orange-100)"
-                        : "transparent"
-                      return (
-                        <div
-                          key={key}
-                          style={{
-                            display: "inline-block",
-                            backgroundColor: color,
-                          }}
-                        >
-                          <span {...getTokenProps({ token, key })} />
-                        </div>
-                      )
-                    })}
+                    {line.map((token, key) => (
+                      <span {...getTokenProps({ token, key })} />
+                    ))}
                   </span>
                 </pre>
               ))}