feat: add description to status code

packages/ui/src/components/ResponsePanel.vue

@@ -15,7 +15,7 @@
                     class="tag"
                     :class="responseStatusColorMapping(response)"
                     style="max-width: 15rem; text-overflow: ellipsis; overflow: hidden;"
-                    :title="response.statusText === '' ? getStatusText(response.status) : response.statusText"
+                    :title="response.statusText === '' ? getStatusDescription(response.status) : response.statusText"
                 >
                     <span class="bold">{{ response.status }}</span>
                     {{ response.statusText === '' ? getStatusText(response.status) : response.statusText }}
@@ -179,6 +179,7 @@ import {
     getStatusText,
     timeAgo,
     responseStatusColorMapping,
+    getStatusDescription,
 } from '@/helpers'
 import {
     bufferToJSONString,
@@ -443,6 +444,7 @@ export default {
         }
     },
     methods: {
+        getStatusDescription,
         timeAgo,
         cancelRequest() {
             this.requestAbortController.abort()

packages/ui/src/constants.ts

@@ -259,68 +259,68 @@ export default {
         TEXT_CSV: 'text/csv',
     },
     STATUS_CODE_TEXT_MAPPING: {
-        '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'
+        '100': { 'title': 'Continue', 'description': 'The server has received the request headers and the client should proceed to send the request body.' },
+        '101': { 'title': 'Switching Protocols', 'description': 'The requester has asked the server to switch protocols, and the server is acknowledging that it will do so.' },
+        '102': { 'title': 'Processing', 'description': 'A WebDAV request may take longer to process, so the server sends this code to indicate that it has received and is processing the request.' },
+        '103': { 'title': 'Early Hints', 'description': 'Primarily intended to be used with the Link header, letting the user-agent start preloading resources while the server prepares a final response.' },
+        '200': { 'title': 'OK', 'description': 'The request has succeeded. The content sent in the response body will depend on the method used in the request.' },
+        '201': { 'title': 'Created', 'description': 'The request has been fulfilled, resulting in the creation of a new resource.' },
+        '202': { 'title': 'Accepted', 'description': 'The request has been accepted for processing, but the processing has not been completed yet.' },
+        '203': { 'title': 'Non-Authoritative Information', 'description': 'The request was successful but the information may come from a third-party source and not the originating server.' },
+        '204': { 'title': 'No Content', 'description': 'The server successfully processed the request and is not returning any content.' },
+        '205': { 'title': 'Reset Content', 'description': 'The server successfully processed the request, but is instructing the client to reset the view.' },
+        '206': { 'title': 'Partial Content', 'description': 'The server is delivering only part of the resource due to a range header sent by the client.' },
+        '207': { 'title': 'Multi-Status', 'description': 'Provides information about multiple resources in situations where multiple actions were taken, typically used in WebDAV.' },
+        '208': { 'title': 'Already Reported', 'description': 'The members of a DAV binding have already been enumerated in a previous reply to this request, and are not being included again.' },
+        '226': { 'title': 'IM Used', 'description': 'The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.' },
+        '300': { 'title': 'Multiple Choices', 'description': 'The request has more than one possible response. User-agent or user should choose one of them.' },
+        '301': { 'title': 'Moved Permanently', 'description': 'The requested resource has been permanently moved to a new URL.' },
+        '302': { 'title': 'Found', 'description': 'The requested resource resides temporarily under a different URL, but future requests should use the original URL.' },
+        '303': { 'title': 'See Other', 'description': 'The response to the request can be found under another URI using a GET method.' },
+        '304': { 'title': 'Not Modified', 'description': 'Indicates that the resource has not been modified since the version specified by the request headers.' },
+        '305': { 'title': 'Use Proxy', 'description': 'The requested resource is available only through a proxy, whose address is provided in the response.' },
+        '307': { 'title': 'Temporary Redirect', 'description': 'The requested resource resides temporarily under a different URL, and the client should use the same method for the next request.' },
+        '308': { 'title': 'Permanent Redirect', 'description': 'The resource has been permanently moved to a new URL and all future requests should use that new URL.' },
+        '400': { 'title': 'Bad Request', 'description': 'The server cannot or will not process the request due to an apparent client error (e.g., malformed request syntax, invalid request).' },
+        '401': { 'title': 'Unauthorized', 'description': 'Authentication is required and has failed or has not yet been provided.' },
+        '402': { 'title': 'Payment Required', 'description': 'Reserved for future use, originally created to enable digital payment systems.' },
+        '403': { 'title': 'Forbidden', 'description': 'The request was valid, but the server is refusing to respond to it. The client does not have permission to access the resource.' },
+        '404': { 'title': 'Not Found', 'description': 'The requested resource could not be found but may be available in the future.' },
+        '405': { 'title': 'Method Not Allowed', 'description': 'A request method is not supported for the requested resource.' },
+        '406': { 'title': 'Not Acceptable', 'description': 'The requested resource is only capable of generating content not acceptable according to the Accept headers sent in the request.' },
+        '407': { 'title': 'Proxy Authentication Required', 'description': 'The client must authenticate itself with the proxy.' },
+        '408': { 'title': 'Request Timeout', 'description': 'The server timed out waiting for the request.' },
+        '409': { 'title': 'Conflict', 'description': 'Indicates that the request could not be processed because of conflict in the request, such as an edit conflict between multiple simultaneous updates.' },
+        '410': { 'title': 'Gone', 'description': 'The resource requested is no longer available and will not be available again.' },
+        '411': { 'title': 'Length Required', 'description': 'The request did not specify the length of its content, which is required by the requested resource.' },
+        '412': { 'title': 'Precondition Failed', 'description': 'The server does not meet one of the preconditions that the requester put on the request.' },
+        '413': { 'title': 'Payload Too Large', 'description': 'The request is larger than the server is willing or able to process.' },
+        '414': { 'title': 'URI Too Long', 'description': 'The URI provided was too long for the server to process.' },
+        '415': { 'title': 'Unsupported Media Type', 'description': 'The request entity has a media type which the server or resource does not support.' },
+        '416': { 'title': 'Range Not Satisfiable', 'description': 'The client has asked for a portion of the file (byte serving), but the server cannot supply that portion.' },
+        '417': { 'title': 'Expectation Failed', 'description': 'The server cannot meet the requirements of the Expect request-header field.' },
+        '418': { 'title': 'I\'m a teapot', 'description': 'This code was defined as an April Fools\' joke in 1998, and is not expected to be implemented by actual HTTP servers.' },
+        '421': { 'title': 'Misdirected Request', 'description': 'The request was directed at a server that is not able to produce a response.' },
+        '422': { 'title': 'Unprocessable Entity', 'description': 'The request was well-formed but was unable to be followed due to semantic errors, typically used in WebDAV.' },
+        '423': { 'title': 'Locked', 'description': 'The resource that is being accessed is locked, typically used in WebDAV.' },
+        '424': { 'title': 'Failed Dependency', 'description': 'The request failed due to failure of a previous request, typically used in WebDAV.' },
+        '425': { 'title': 'Too Early', 'description': 'Indicates that the server is unwilling to risk processing a request that might be replayed.' },
+        '426': { 'title': 'Upgrade Required', 'description': 'The client should switch to a different protocol, such as TLS/1.3, given in the Upgrade header field.' },
+        '428': { 'title': 'Precondition Required', 'description': 'The server requires the request to be conditional, typically to prevent lost updates.' },
+        '429': { 'title': 'Too Many Requests', 'description': 'The user has sent too many requests in a given amount of time.' },
+        '431': { 'title': 'Request Header Fields Too Large', 'description': 'The server is unwilling to process the request because its header fields are too large.' },
+        '451': { 'title': 'Unavailable For Legal Reasons', 'description': 'The server is denying access to the resource as a consequence of a legal demand.' },
+        '500': { 'title': 'Internal Server Error', 'description': 'The server encountered an unexpected condition that prevented it from fulfilling the request.' },
+        '501': { 'title': 'Not Implemented', 'description': 'The server does not support the functionality required to fulfill the request.' },
+        '502': { 'title': 'Bad Gateway', 'description': 'The server was acting as a gateway or proxy and received an invalid response from the upstream server.' },
+        '503': { 'title': 'Service Unavailable', 'description': 'The server is currently unavailable (because it is overloaded or down for maintenance).' },
+        '504': { 'title': 'Gateway Timeout', 'description': 'The server was acting as a gateway or proxy and did not receive a timely response from the upstream server.' },
+        '505': { 'title': 'HTTP Version Not Supported', 'description': 'The server does not support the HTTP protocol version used in the request.' },
+        '506': { 'title': 'Variant Also Negotiates', 'description': 'The server has an internal configuration error.' },
+        '507': { 'title': 'Insufficient Storage', 'description': 'The server is unable to store the representation needed to complete the request.' },
+        '508': { 'title': 'Loop Detected', 'description': 'The server detected an infinite loop while processing a request.' },
+        '510': { 'title': 'Not Extended', 'description': 'Further extensions to the request are required for the server to fulfill it.' },
+        '511': { 'title': 'Network Authentication Required', 'description': 'The client needs to authenticate to gain network access.' }
     },
     DEFAULT_ENVIRONMENT: {
         name: 'Default',

packages/ui/src/helpers.ts

@@ -1392,7 +1392,13 @@ export function uriParse(urlString: string): {
 export function getStatusText(statusCode: number): string {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return constants.STATUS_CODE_TEXT_MAPPING[statusCode.toString()]
+    return constants.STATUS_CODE_TEXT_MAPPING[statusCode.toString()].title
+}
+
+export function getStatusDescription(statusCode: number): string {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return constants.STATUS_CODE_TEXT_MAPPING[statusCode.toString()].description
 }
 
 export function timeAgo(timestamp: number) {