MFRU-12750 added simulations example template

Author: denis.vybornov

src/components/Simulations/Simulations.pcss

@@ -27,6 +27,12 @@ $(b) {
         width: 120px;
     }
 
+    &__menu-button_example {
+        color: var(--spbSky3) !important;
+
+        box-shadow: inset 0 0 0 1px var(--spbSky3) !important;
+    }
+
     &__fields {
         display: grid;
         flex-direction: flex-end;

src/components/Simulations/Simulations.tsx

@@ -15,6 +15,7 @@ import { ReactComponent as PlusIcon } from 'static/favicon/plus.svg';
 import { useSelector } from 'store/hooks';
 import { downloadFile } from 'utils';
 import Popup from '../Popup/Popup';
+import exampleData from './exampleData';
 import type { RouteItem } from './types';
 import { getRouteList, validateImport } from './utils';
 import './Simulations.pcss';
@@ -124,6 +125,10 @@ const Simulations: React.FC<ISimulationsProps> = ({ onChange, onDelete, onImport
         }
     }
 
+    function handleExample() {
+        downloadFile(JSON.stringify(exampleData, null, 2), 'example.json');
+    }
+
     function handleSimulationEditButtonClick(index: number) {
         return () => onChange(index, 'edit');
     }
@@ -261,6 +266,16 @@ const Simulations: React.FC<ISimulationsProps> = ({ onChange, onDelete, onImport
                         >
                             Import
                         </Button>
+                        <Button
+                            className={cn('menu-button', { example: true })}
+                            sizeAll="small"
+                            type="outline"
+                            theme="black"
+                            actionType="button"
+                            onClick={handleExample}
+                        >
+                            Example
+                        </Button>
                     </div>
                     <div className={cn('fields')}>
                         <TextField

src/components/Simulations/exampleData.ts

@@ -0,0 +1,58 @@
+const exampleData = [
+    {
+        request: {
+            path: [
+                {
+                    matcher: 'exact',
+                    value: '/',
+                },
+            ],
+            method: [
+                {
+                    matcher: 'exact',
+                    value: 'GET',
+                },
+            ],
+            destination: [
+                {
+                    matcher: 'exact',
+                    value: '/',
+                },
+            ],
+            headers: {
+                requestHeaderKey: [
+                    {
+                        matcher: 'exact',
+                        value: 'requestHeaderKeys',
+                    },
+                ],
+            },
+            query: {
+                requestQueryKey: [
+                    {
+                        matcher: 'exact',
+                        value: 'requestQueryKeys',
+                    },
+                ],
+            },
+            requiresState: {
+                requireStateKey: 'requireStateValue',
+            },
+        },
+        response: {
+            status: 200,
+            body: '{\n    "key": "value"\n}\n',
+            encodedBody: false,
+            headers: {
+                responseHeaderKey: ['responseHeaderValue'],
+            },
+            templated: false,
+            transitionsState: {
+                newStateKey: 'newStateValue',
+            },
+            fixedDelay: 500,
+        },
+    },
+];
+
+export default exampleData;