Feature/#55 resolves #55

gradle/libs.versions.toml

@@ -22,6 +22,8 @@ async-embedded = "0.0.10"
 session-embedded = "0.0.10"
 storage-embedded = "0.1.16"
 
+kafka-client-service = "0.0.18"
+
 [libraries]
 common-api = { module = "com.github.sibdevtools:api-common", version.ref = "common-api" }
 localization-api = { module = "com.github.sibdevtools:api-localization", version.ref = "localization-api" }
@@ -35,6 +37,8 @@ async-embedded = { module = "com.github.sibdevtools:service-async-embedded", ver
 session-embedded = { module = "com.github.sibdevtools:service-session-embedded", version.ref = "session-embedded" }
 storage-embedded = { module = "com.github.sibdevtools:service-storage-embedded", version.ref = "storage-embedded" }
 
+kafka-client-service = { module = "com.github.sibdevtools:service-kafka-client", version.ref = "kafka-client-service" }
+
 spring-openapi-starter = { module = "org.springdoc:springdoc-openapi-starter-webmvc-ui", version.ref = "spring-openapi-doc" }
 
 graalvm-api = { module = "org.graalvm.truffle:truffle-api", version.ref = "graalvm" }

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

@@ -4,20 +4,21 @@ import AceEditor from 'react-ace';
 
 import '../const/ace.imports';
 import { loadSettings } from '../settings/utils';
-import { Button, ButtonGroup, Form, Table } from 'react-bootstrap';
-import CodeDocumentation from '../pages/mock/CodeDocumentation';
+import { Button, ButtonGroup, Form } from 'react-bootstrap';
 
 export interface GraalVMMockContentProps {
   mode: 'javascript' | 'python';
   content: ArrayBuffer;
   setContent: (content: ArrayBuffer) => void;
+  disabled?: boolean;
 }
 
 const textEncoder = new TextEncoder();
 const GraalVMMockContent: React.FC<GraalVMMockContentProps> = ({
                                                                  mode,
                                                                  content,
                                                                  setContent,
+                                                                 disabled,
                                                                }) => {
   const settings = loadSettings();
   const [isWordWrapEnabled, setIsWordWrapEnabled] = useState(true);
@@ -56,6 +57,7 @@ const GraalVMMockContent: React.FC<GraalVMMockContentProps> = ({
           fontSize={14}
           width="100%"
           height="480px"
+          readOnly={disabled}
           showPrintMargin={true}
           showGutter={true}
           highlightActiveLine={true}

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

@@ -11,6 +11,7 @@ interface Header {
 interface HttpHeadersFormProps {
   meta: { [key: string]: string };
   setMeta: (newMeta: { [key: string]: string }) => void;
+  disabled?: boolean;
 }
 
 const commonHeaders = [
@@ -31,7 +32,11 @@ const headerValueSuggestions: { [key: string]: string[] } = {
   'Cache-Control': ['no-cache', 'no-store', 'must-revalidate', 'public', 'private'],
 };
 
-const HttpHeadersForm: React.FC<HttpHeadersFormProps> = ({ meta, setMeta }) => {
+const HttpHeadersForm: React.FC<HttpHeadersFormProps> = ({
+                                                           meta,
+                                                           setMeta,
+                                                           disabled
+                                                         }) => {
   const [notFilledExist, setNotFilledExist] = useState(false);
 
   const initialHeaders = meta['HTTP_HEADERS']
@@ -101,6 +106,7 @@ const HttpHeadersForm: React.FC<HttpHeadersFormProps> = ({ meta, setMeta }) => {
                   placeholder="Header Key"
                   value={header.key}
                   onChange={(e) => handleHeaderChange(index, 'key', e.target.value)}
+                  disabled={disabled}
                 />
                 <datalist id="header-suggestions">
                   {commonHeaders.map((headerName, i) => (
@@ -113,6 +119,7 @@ const HttpHeadersForm: React.FC<HttpHeadersFormProps> = ({ meta, setMeta }) => {
                   placeholder="Header Value"
                   value={header.value}
                   onChange={(e) => handleHeaderChange(index, 'value', e.target.value)}
+                  disabled={disabled}
                 />
                 <datalist id={`value-suggestions-${index}`}>
                   {(headerValueSuggestions[header.key] || []).map((valueSuggestion, i) => (
@@ -122,15 +129,15 @@ const HttpHeadersForm: React.FC<HttpHeadersFormProps> = ({ meta, setMeta }) => {
                 <Button
                   variant="danger"
                   onClick={() => removeHeader(index)}
-                  disabled={headers.length === 1}
+                  disabled={disabled || headers.length === 1}
                   title={'Remove'}
                 >
                   <MinusSignIcon />
                 </Button>
                 <Button
                   variant="primary"
                   onClick={addHeader}
-                  disabled={index !== headers.length - 1 || notFilledExist}
+                  disabled={disabled || index !== headers.length - 1 || notFilledExist}
                   title={'Add'}
                 >
                   <PlusSignIcon />

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

@@ -8,12 +8,14 @@ export interface StaticMockBinaryContentProps {
   isEditMode: boolean;
   content: ArrayBuffer;
   setContent: (content: ArrayBuffer) => void;
+  disabled?: boolean;
 }
 
 const StaticFileMockContent: React.FC<StaticMockBinaryContentProps> = ({
                                                                          isEditMode,
                                                                          content,
-                                                                         setContent
+                                                                         setContent,
+                                                                         disabled
                                                                        }) => {
   const getFileContent = useCallback((file: File): Promise<ArrayBuffer> => {
     return new Promise((resolve, reject) => {
@@ -47,9 +49,11 @@ const StaticFileMockContent: React.FC<StaticMockBinaryContentProps> = ({
         <InputGroup>
           <Form.Control
             type="file"
+            disabled={disabled}
             onChange={handleFileChange}
           />
           <Button
+            disabled={disabled}
             variant={'outline-secondary'}
             onClick={downloadFile}
             title={'Download'}

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

@@ -14,12 +14,18 @@ export interface StaticMockContentProps {
   meta: { [key: string]: string };
   setMeta: (meta: { [key: string]: string }) => void;
   creation: boolean;
+  disabled?: boolean;
 }
 
 const textEncoder = new TextEncoder();
 const textDecoder = new TextDecoder();
 
-const StaticMockContent: React.FC<StaticMockContentProps> = ({ content, setContent, meta }) => {
+const StaticMockContent: React.FC<StaticMockContentProps> = ({
+                                                               content,
+                                                               setContent,
+                                                               meta,
+                                                               disabled
+                                                             }) => {
   const [aceType, setAceType] = useState('text');
   const settings = loadSettings();
   const [isWordWrapEnabled, setIsWordWrapEnabled] = useState(true);
@@ -64,6 +70,7 @@ const StaticMockContent: React.FC<StaticMockContentProps> = ({ content, setConte
         fontSize={14}
         width="100%"
         height="480px"
+        readOnly={disabled}
         showPrintMargin={true}
         showGutter={true}
         highlightActiveLine={true}

web-app-frontend/src/pages/mock/AddEditMockPage.tsx

@@ -17,6 +17,8 @@ export interface ModifyingMock {
 
 const AddEditMockPage: React.FC = () => {
   const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
   const navigate = useNavigate();
   const { serviceId, mockId } = useParams();
 
@@ -57,7 +59,7 @@ const AddEditMockPage: React.FC = () => {
         type: body.type,
         meta: body.meta,
         content: decodeToBuffer(body.content)
-      })
+      });
     } catch (error) {
       console.error('Failed to fetch mock:', error);
     } finally {
@@ -72,6 +74,8 @@ const AddEditMockPage: React.FC = () => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    setSaving(true);
+    setSaved(false);
     try {
       const mockData = {
         name: modifyingMock.name,
@@ -87,9 +91,14 @@ const AddEditMockPage: React.FC = () => {
       } else {
         await createMock(+serviceId, mockData);
       }
-      navigate(`${contextPath}service/${serviceId}/mocks`);
+      setSaved(true);
+      if (mockId === undefined) {
+        navigate(`${contextPath}service/${serviceId}/mocks`);
+      }
     } catch (error) {
       console.error('Failed to submit mock:', error);
+    } finally {
+      setSaving(false);
     }
   };
 
@@ -105,6 +114,8 @@ const AddEditMockPage: React.FC = () => {
       onSubmit={handleSubmit}
       isEditMode={!!mockId}
       navigateBack={navigateBack}
+      saving={saving}
+      saved={saved}
     />
   );
 };

web-app-frontend/src/pages/mock/CodeDocumentation.css

@@ -0,0 +1,18 @@
+.code-clipboard-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  opacity: 0.25;
+  filter: alpha(opacity=25); /* For IE8 and earlier */;
+}
+
+.code-clipboard-btn:hover {
+  opacity: 0.8;
+  filter: alpha(opacity=80); /* For IE8 and earlier */;
+}
+
+.code-clipboard-btn:active {
+  opacity: 1;
+  filter: alpha(opacity=100); /* For IE8 and earlier */;
+}