Merge pull request #18 from MegafonWebLab/mfru-12750

MFRU-12750 added simulations example template

Author: IGoRFonin

src/components/Simulations/Simulations.pcss

@@ -327,6 +327,13 @@ $(b) {
 
     &__import-buttons {
         display: flex;
-        justify-content: space-around;
+        gap: 24px;
+        justify-content: center;
+    }
+
+    &__import-button_example {
+        color: var(--spbSky3) !important;
+
+        box-shadow: inset 0 0 0 1px var(--spbSky3) !important;
     }
 }

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');
     }
@@ -315,6 +320,15 @@ const Simulations: React.FC<ISimulationsProps> = ({ onChange, onDelete, onImport
                         <div className={cn('import-pairs')}>File have {importData.pairs.length} valid simulations</div>
                     )}
                     <div className={cn('import-buttons')}>
+                        <Button
+                            className={cn('import-button', { example: true })}
+                            type="outline"
+                            theme="black"
+                            actionType="button"
+                            onClick={handleExample}
+                        >
+                            Example
+                        </Button>
                         <Button
                             disabled={importData.pairs.length === 0}
                             actionType="button"

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;