ui fixes and adds more status codes to registry

rakutentech · Feb 13, 2024 · c70aa52 · c70aa52
1 parent e22ae9d
commit c70aa52
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 12 deletions.
diff --git a/ui/src/components/App.tsx b/ui/src/components/App.tsx
@@ -29,7 +29,7 @@ export default function App() {
     const [showDelete] = useLocalStorage('showDelete', 'true');
     const [showPut] = useLocalStorage('showPut', 'true');
     const [showPatch] = useLocalStorage('showPatch', 'true');
-    const [showHead] = useLocalStorage('showHead', 'true');
+    const [showHead] = useLocalStorage('showHead', 'false');
 
     const searchOptions = {
         keys: ['uri', 'doc_block'],

diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
@@ -13,7 +13,7 @@ export default function Sidebar(props: Props) {
 
     return (
         <>
-            <aside>
+            <aside className='no-scrollbar'>
                 <h2 className="title pl-5 pt-2 mb-5">
                     <ListBulletIcon className='inline-block w-4 h-4 mr-1' />
                     API List  <span className='text-slate-500 capitalize float-right mr-5'>Total {lrdDocsJson.length}</span>

diff --git a/ui/src/components/elements/ApiActionInfo.tsx b/ui/src/components/elements/ApiActionInfo.tsx
@@ -50,7 +50,7 @@ export default function ApiActionInfo(props: Props) {
                         {lrdDocsItem.middlewares.length != 0 && (
                             <tr>
                                 <th>Middlewares</th>
-                                <td>
+                                <td className='no-scrollbar'>
                                     {lrdDocsItem.middlewares.map((middleware) => (
                                         <div key={shortid.generate()}>
                                             <span className="badge badge-ghost badge-md mb-1 rounded-sm">{middleware}</span>

diff --git a/ui/src/components/elements/ApiActionRequest.tsx b/ui/src/components/elements/ApiActionRequest.tsx
@@ -76,8 +76,8 @@ export default function ApiActionRequest(props: Props) {
         <>
             <div className="form-control">
                 <label className="input-group input-group-sm">
-                    <span className={`method-${method}`}>{method}</span>
-                    <input type="text" defaultValue={requestUri} onChange={(e) => setRequestUri(e.target.value)} placeholder="Type here" className="focus:outline-none input w-full input-bordered input-sm" />
+                    <span className={`method-${method} pr-2`}>{method}</span>
+                    <input type="text" defaultValue={requestUri} onChange={(e) => setRequestUri(e.target.value)} placeholder="Type here" className="focus:outline-none input w-4/5 input-bordered input-sm mr-2" />
                     <button className="btn btn-sm btn-success" onClick={handleSendRequest}>
                         GO <PaperAirplaneIcon className='inline-block w-4 h-4 ml-1' />
                     </button>

diff --git a/ui/src/components/elements/ApiActionTabs.tsx b/ui/src/components/elements/ApiActionTabs.tsx
@@ -27,14 +27,11 @@ export default function ApiActionTabs(props: Props) {
             <a className={`tab ${activeTab == 'info' ? 'tab-active' : ''}`} onClick={() => setActiveTab('info')}>
                 <InformationCircleIcon className='inline-block w-5 h-5' /> Info
             </a>
-            <a className={`tab ${activeTab == 'request' ? 'tab-active' : ''}`} onClick={() => setActiveTab('request')}>
-                <span className='text-success font-bold'>
+            <a className={`tab ${activeTab == 'request' ? 'tab-active' : 'text-success'}`} onClick={() => setActiveTab('request')}>
+                <span className='font-bold'>
                     <PaperAirplaneIcon className='inline-block w-5 h-5' /> Send
                 </span>
             </a>
-            <span className='pr-1 mb-1'>
-                <EllipsisVerticalIcon className='inline-block w-5 h-5' />
-            </span>
             <a className={`pl-0 tab ${activeTab == 'response' ? 'tab-active' : ''}`} onClick={() => setActiveTab('response')}>
                 <ReceiptRefundIcon className='inline-block w-5 h-5' /> Response
                 {responseStatus != 0 && (

diff --git a/ui/src/global.css b/ui/src/global.css
@@ -6,7 +6,17 @@
 html {
     font-family: 'Roboto', sans-serif;
 }
-
+@layer utilities {
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+   /* Hide scrollbar for IE, Edge and Firefox */
+    .no-scrollbar {
+        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+  }
+}
 .ace_editor {
     @apply rounded;
 }
@@ -23,6 +33,7 @@ html {
     width: 100%;
 
 }
+
 aside {
     @apply h-screen;
     position: fixed;

diff --git a/ui/src/libs/constants.tsx b/ui/src/libs/constants.tsx
@@ -1,15 +1,64 @@
 export const responsesText: {[key: string]: string} = {
+    "100": "Continue",
+    "101": "Switching Protocols",
+    "102": "Processing",
+    "103": "Early Hints",
     "200": "OK",
     "201": "Created",
     "202": "Accepted",
+    "203": "Non-Authoritative Information",
     "204": "No Content",
+    "205": "Reset Content",
+    "206": "Partial Content",
+    "207": "Multi-Status",
+    "208": "Already Reported",
+    "226": "IM Used",
+    "300": "Multiple Choices",
+    "301": "Moved Permanently",
+    "302": "Found",
+    "303": "See Other",
+    "304": "Not Modified",
+    "305": "Use Proxy",
+    "307": "Temporary Redirect",
+    "308": "Permanent Redirect",
     "400": "Bad Request",
     "401": "Unauthorized",
+    "402": "Payment Required",
     "403": "Forbidden",
     "404": "Not Found",
     "405": "Method Not Allowed",
+    "406": "Not Acceptable",
+    "407": "Proxy Authentication Required",
+    "408": "Request Timeout",
+    "409": "Conflict",
+    "410": "Gone",
+    "411": "Length Required",
+    "412": "Precondition Failed",
+    "413": "Payload Too Large",
+    "414": "URI Too Long",
+    "415": "Unsupported Media Type",
+    "416": "Range Not Satisfiable",
+    "417": "Expectation Failed",
+    "418": "I'm a teapot",
+    "421": "Misdirected Request",
     "422": "Unprocessable Entity",
+    "423": "Locked",
+    "424": "Failed Dependency",
+    "425": "Too Early",
+    "426": "Upgrade Required",
+    "428": "Precondition Required",
     "429": "Too Many Requests",
+    "431": "Request Header Fields Too Large",
+    "451": "Unavailable For Legal Reasons",
     "500": "Internal Server Error",
+    "501": "Not Implemented",
+    "502": "Bad Gateway",
     "503": "Service Unavailable",
-}
+    "504": "Gateway Timeout",
+    "505": "HTTP Version Not Supported",
+    "506": "Variant Also Negotiates",
+    "507": "Insufficient Storage",
+    "508": "Loop Detected",
+    "510": "Not Extended",
+    "511": "Network Authentication Required"
+};