Feature/#53 resolves #53

web-app-frontend/src/api/service.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { Method, MockType } from '../const/common.const';
+import { MockType } from '../const/common.const';
 
 const service = axios.create({
   baseURL: '/web/app/mocks/rest/api',
@@ -86,7 +86,7 @@ export interface MockMeta {
 
 export interface CreateMockRq {
   name: string;
-  method: Method;
+  method: string;
   path: string;
   type: MockType;
   delay: number,
@@ -102,7 +102,7 @@ export interface GetMockRs {
   body: {
     serviceId: number;
     mockId: number;
-    method: Method;
+    method: string;
     name: string;
     path: string;
     type: MockType;
@@ -117,7 +117,7 @@ export const getMock = (serviceId: number, mockId: number) => service.get<GetMoc
 
 export interface UpdateMockRq {
   name: string;
-  method: Method;
+  method: string;
   path: string;
   type: MockType;
   delay: number;

web-app-frontend/src/components/CustomTable.tsx

@@ -40,6 +40,10 @@ export interface CustomTableProps {
   columns: TableColumn[];
   data: Array<Row>;
   sortableColumns?: string[];
+  sortByDefault?: {
+    column: string;
+    direction?: 'asc' | 'desc';
+  };
   filterableColumns?: string[];
   styleProps?: StyleProps;
   onRowClick?: (row: Row) => void;
@@ -49,6 +53,10 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                                    columns,
                                                    data,
                                                    sortableColumns = [],
+                                                   sortByDefault = {
+                                                     column: '',
+                                                     direction: 'asc'
+                                                   },
                                                    filterableColumns = [],
                                                    styleProps = {
                                                      centerHeaders: true,
@@ -57,8 +65,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
                                                    onRowClick = null,
                                                  }) => {
   const [filter, setFilter] = useState<{ [key: string]: string }>({});
-  const [sortColumn, setSortColumn] = useState<string>('');
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [sortColumn, setSortColumn] = useState<string>(sortByDefault.column);
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>(sortByDefault.direction ?? 'asc');
 
   // Handle filter changes
   const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, columnKey: string) => {

web-app-frontend/src/components/GraalVMMockContent.tsx

@@ -71,7 +71,6 @@ const GraalVMMockContent: React.FC<GraalVMMockContentProps> = ({
           editorProps={{ $blockScrolling: true }}
         />
       </Form.Group>
-      <CodeDocumentation mode={mode} />
     </>
   );
 };

web-app-frontend/src/components/suggestive-input/SuggestiveInput.css

@@ -0,0 +1,23 @@
+.suggestions-dropdown {
+  position: absolute;
+  z-index: 1000;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin-top: 4px;
+}
+
+.suggestion-item {
+  font-size: 0.875rem;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.suggestion-text {
+  font-size: 0.75rem;
+  padding: 8px 12px;
+}
+
+.suggestion-item:hover {
+  background-color: #f8f9fa;
+}

web-app-frontend/src/components/suggestive-input/SuggestiveInput.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { FormControl, ListGroup } from 'react-bootstrap';
+import './SuggestiveInput.css';
+
+export interface SuggestiveItem {
+  key: string;
+  value: string;
+  data?: any;
+}
+
+export interface SuggestedItem {
+  key?: string;
+  value: string;
+  data?: any;
+}
+
+interface SuggestiveInputProps {
+  id?: string;
+  type?: 'text' | 'number'
+  value?: string;
+  suggestions: SuggestiveItem[];
+  maxSuggestions?: number;
+  mode: 'strict' | 'free';
+  itemsToScroll?: number;
+  onFilter?: (input: string) => SuggestiveItem[];
+  onChange: (value: SuggestedItem) => void;
+  placeholder?: string;
+  required: boolean;
+  disabled?: boolean;
+  clarifyText?: string;
+}
+
+const SuggestiveInput: React.FC<SuggestiveInputProps> = ({
+                                                           id,
+                                                           type = 'text',
+                                                           value,
+                                                           suggestions,
+                                                           maxSuggestions = 5,
+                                                           mode,
+                                                           itemsToScroll = 5,
+                                                           onFilter,
+                                                           onChange,
+                                                           placeholder,
+                                                           required,
+                                                           disabled,
+                                                           clarifyText = 'Clarify request'
+                                                         }) => {
+  const [inputValue, setInputValue] = useState(value ?? '');
+  const [filteredSuggestions, setFilteredSuggestions] = useState<SuggestiveItem[]>(
+    suggestions.slice(
+      0,
+      maxSuggestions
+    )
+  );
+  const [filteredSliced, setFilteredSliced] = useState(suggestions.length > filteredSuggestions.length);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dropdownWidth, setDropdownWidth] = useState<number | undefined>(undefined);
+
+  if (!onFilter) {
+    onFilter = it => {
+      const substring = it.toLowerCase();
+      return suggestions.filter(it => it.value.includes(substring));
+    };
+  }
+
+  useEffect(() => {
+    if (inputRef.current) {
+      setDropdownWidth(inputRef.current.offsetWidth);
+    }
+  }, [inputValue]);
+
+  const handleValueChange = (value: string): SuggestiveItem[] => {
+    setInputValue(value);
+
+    const filtered = onFilter(value);
+    const sliced = filtered.slice(0, maxSuggestions);
+    setFilteredSuggestions(sliced);
+    setFilteredSliced(filtered.length > sliced.length);
+    return sliced;
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const sliced = handleValueChange(value);
+
+    setShowSuggestions(sliced.length > 0);
+
+    if (sliced.length > 0) {
+      const candidate = sliced[0];
+      onChange({
+        key: candidate.key,
+        value: candidate.value,
+        data: candidate.data
+      });
+    } else if (mode === 'free') {
+      onChange({ value: value });
+    } else {
+      onChange({ value: '' });
+    }
+  };
+
+  const handleSuggestionClick = (suggestion: SuggestiveItem) => {
+    handleValueChange(suggestion.key);
+    setShowSuggestions(false);
+    onChange(suggestion);
+  };
+
+  const handleBlur = () => {
+    setTimeout(() => setShowSuggestions(false), 200);
+  };
+
+  return (
+    <>
+      <FormControl
+        ref={inputRef}
+        id={id}
+        type={type}
+        value={inputValue}
+        onChange={handleInputChange}
+        onFocus={() => setShowSuggestions(filteredSuggestions.length > 0)}
+        onBlur={handleBlur}
+        placeholder={placeholder}
+        required={required}
+        disabled={disabled}
+      />
+      {showSuggestions && (
+        <div
+          className="suggestions-dropdown"
+          style={{ width: dropdownWidth }}
+        >
+          <ListGroup style={{ maxHeight: `${itemsToScroll * 32}px`, overflowY: 'auto' }}>
+            {filteredSuggestions.map((suggestion) => (
+              <ListGroup.Item
+                key={suggestion.key}
+                action
+                onClick={() => handleSuggestionClick(suggestion)}
+                className="suggestion-item"
+              >
+                {suggestion.value}
+              </ListGroup.Item>
+            ))}
+            {filteredSliced && (
+              <ListGroup.Item
+                key={'other-options'}
+                className="suggestion-text text-secondary"
+              >
+                {clarifyText}
+              </ListGroup.Item>
+            )}
+          </ListGroup>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SuggestiveInput;

web-app-frontend/src/const/common.const.ts

@@ -9,8 +9,6 @@ export const methods = [
   'DELETE'
 ] as const;
 
-export type Method = typeof methods[number];
-
 export const statusCodes = new Map([
     [100, 'Continue'] as const,
     [101, 'Switching Protocols'] as const,
@@ -77,8 +75,6 @@ export const statusCodes = new Map([
 
 export type MapKey<T extends Map<any, any>> = T extends Map<infer K, any> ? K : never
 
-export type StatusCode = MapKey<typeof statusCodes>
-
 export const mimeToAceModeMap = new Map<string, string>([
     ['text/html', 'html'] as const,
     ['text/css', 'css'] as const,

web-app-frontend/src/pages/invocations/MockInvocationListPage.tsx

@@ -139,6 +139,7 @@ const MockInvocationListPage: React.FC = () => {
                     })}
                     onRowClick={handleRowClick}
                     sortableColumns={['method', 'path', 'timing', 'status', 'createdAt']}
+                    sortByDefault={{column: 'createdAt', direction: 'desc'}}
                     filterableColumns={['method', 'path', 'timing', 'status', 'createdAt']}
                     styleProps={{
                       centerHeaders: true,

web-app-frontend/src/pages/invocations/invocation/MockInvocationPage.tsx

@@ -115,7 +115,7 @@ const MockInvocationPage: React.FC = () => {
                 {!error && (
                   <Row>
                     <Col md={{ offset: 1, span: 10 }}>
-                      <Table striped bordered hover>
+                      <Table striped bordered hover responsive>
                         <tbody>
                         <tr>
                           <td><strong>Remote Client Host</strong></td>
@@ -149,7 +149,7 @@ const MockInvocationPage: React.FC = () => {
                       </Table>
 
                       <h4 className="mt-4">Query Params</h4>
-                      <Table striped bordered hover>
+                      <Table striped bordered hover responsive>
                         <thead>
                         <tr>
                           <th>Key</th>
@@ -162,7 +162,7 @@ const MockInvocationPage: React.FC = () => {
                       </Table>
 
                       <h4 className="mt-4">Request Headers</h4>
-                      <Table striped bordered hover>
+                      <Table striped bordered hover responsive>
                         <thead>
                         <tr>
                           <th>Key</th>
@@ -182,7 +182,7 @@ const MockInvocationPage: React.FC = () => {
                       />
 
                       <h4 className="mt-4">Response Headers</h4>
-                      <Table striped bordered hover>
+                      <Table striped bordered hover responsive>
                         <thead>
                         <tr>
                           <th>Key</th>