Integration test for examples

.github/workflows/backend-ci.yml → .github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: Backend CI
+name: CI
 on:
   push:
     branches:
@@ -10,6 +10,7 @@ env:
   RUSTFLAGS: -D warnings
   REGISTRY: ghcr.io
   RUST_VERSION: 1.70.0
+  NODE_VERSION: '16'
 
 jobs:
   cancel-previous-runs:
@@ -88,6 +89,8 @@ jobs:
       - cargo-check
       - cargo-test
     runs-on: ubuntu-latest
+    outputs:
+      tags: ${{ steps.meta.outputs.tags }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2
@@ -124,6 +127,25 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
 
+  frontend-build-and-test:
+    if: github.ref != 'refs/heads/master'
+    needs:
+      - build-and-publish-image
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: NPM build
+        env:
+          CI: true
+        run: |
+          cd app && npm ci && npm run build
+      - name: Run the service in docker
+        run: |
+          docker run -d -p 8080:8080 ${{ needs.build-and-publish-image.outputs.tags }}
+      - name: NPM test
+        run: |
+          cd app && npm run test
+
   deploy:
     if: github.ref == 'refs/heads/master'
     needs:

app/package.json

@@ -25,6 +25,7 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

app/src/App.tsx

@@ -133,7 +133,7 @@ function App() {
         style={{
           marginRight: drawerOpen ? DRAWER_WIDTH : 0,
           transition: 'margin 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
-          height: 'calc(100vh - 90px)',
+          height: 'calc(100vh - 95px)',
           display: 'flex',
           flexDirection: 'column',
         }}>

app/src/constants.ts

@@ -1,47 +1,6 @@
 export const FUEL_GREEN = '#00f58c';
 
+export const LOCAL_SERVER_URI = 'http://0.0.0.0:8080';
 export const SERVER_URI = process.env.REACT_APP_LOCAL_SERVER
-  ? 'http://0.0.0.0:8080'
+  ? LOCAL_SERVER_URI
   : 'https://api.sway-playground.org';
-
-export const DEFAULT_SWAY_CONTRACT = `contract;
-
-abi Counter {
-    #[storage(read, write)]
-    fn increment(amount: u64) -> u64;
-
-    #[storage(read)]
-    fn get() -> u64;
-}
-
-storage {
-    counter: u64 = 0,
-}
-
-impl Counter for Contract {
-    #[storage(read, write)]
-    fn increment(amount: u64) -> u64 {
-        let incremented = storage.counter.read() + amount;
-        storage.counter.write(incremented);
-        incremented
-    }
-
-    #[storage(read)]
-    fn get() -> u64 {
-        storage.counter.read()
-    }
-}`;
-
-export const DEFAULT_SOLIDITY_CONTRACT = `pragma solidity ^0.8.24;
-
-contract Counter {
-    uint64 count;
-
-    function get() public view returns (uint64) {
-        return count;
-    }
-
-    function increment() public {
-        count += 1;
-    }
-}`;

app/src/features/editor/components/ActionOverlay.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
-import IconButton from '@mui/material/IconButton';
-import Delete from '@mui/icons-material/Delete';
 import ToolchainDropdown, { Toolchain } from './ToolchainDropdown';
-import Tooltip from '@mui/material/Tooltip';
+import ExampleDropdown from './ExampleDropdown';
+import { EXAMPLE_CONTRACTS } from '../examples';
+
+export type EditorLanguage = 'sway' | 'solidity';
 
 export interface ActionOverlayProps {
-  handleReset: () => void;
+  handleSelectExample: (example: string) => void;
   toolchain?: Toolchain;
   setToolchain?: (toolchain: Toolchain) => void;
+  editorLanguage: EditorLanguage;
 }
 
 function ActionOverlay({
-  handleReset,
+  handleSelectExample,
   toolchain,
   setToolchain,
+  editorLanguage
 }: ActionOverlayProps) {
   return (
     <div style={{ position: 'relative' }}>
@@ -35,21 +38,7 @@ function ActionOverlay({
           toolchain={toolchain}
           setToolchain={setToolchain}
         />}
-        <div>
-          <Tooltip placement='top' title={'Reset the editor'}>
-            <IconButton
-              style={{
-                position: 'absolute',
-                right: '18px',
-                top: '18px',
-                pointerEvents: 'all',
-              }}
-              onClick={handleReset}
-              aria-label='reset the editor'>
-              <Delete />
-            </IconButton>
-          </Tooltip>
-        </div>
+        <ExampleDropdown handleSelect={handleSelectExample} examples={EXAMPLE_CONTRACTS[editorLanguage]} />
       </div>
     </div>
   );

app/src/features/editor/components/ExampleDropdown.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback } from 'react';
+import Tooltip from '@mui/material/Tooltip';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+import FileOpen from '@mui/icons-material/FileOpen';
+import { Dropdown } from '@mui/base/Dropdown/Dropdown';
+import Menu from '@mui/material/Menu/Menu';
+
+export interface ExampleMenuItem {
+  label: string;
+  code: string;
+}
+
+export interface ExampleDropdownProps {
+  handleSelect: (example: string) => void;
+  examples: ExampleMenuItem[];
+  style?: React.CSSProperties;
+}
+
+function ExampleDropdown({
+  handleSelect,
+  examples,
+  style,
+}: ExampleDropdownProps) {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const onButtonClick = useCallback((event: any) => {
+    setAnchorEl(event.target);
+  }, [setAnchorEl]);
+
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, [setAnchorEl]);
+
+  const onItemClick = useCallback((code: string) => {
+    handleClose();
+    handleSelect(code);
+  }, [handleSelect, handleClose]);
+
+  return (
+    <div style={{ ...style }}>
+      <Dropdown>
+        <Tooltip placement='top' title={'Select an example'}>
+          <IconButton
+            style={{
+              position: 'absolute',
+              right: '18px',
+              top: '18px',
+              pointerEvents: 'all',
+            }}
+            onClick={onButtonClick}
+            aria-label='select an example'>
+            <FileOpen />
+          </IconButton>
+        </Tooltip>
+
+        <Menu
+          anchorEl={anchorEl}
+          open={Boolean(anchorEl)}
+          onClose={handleClose}>
+          {examples.map(({ label, code }: ExampleMenuItem, index) => (
+            <MenuItem
+              key={`${label}-${index}`}
+              onClick={() => onItemClick(code)}>
+              {label}
+            </MenuItem>
+          ))}
+        </Menu>
+      </Dropdown>
+    </div>
+  );
+}
+
+export default ExampleDropdown;

app/src/features/editor/components/SolidityEditor.tsx

@@ -6,7 +6,6 @@ import 'ace-builds/src-noconflict/theme-chrome';
 import { StyledBorder } from '../../../components/shared';
 import 'ace-mode-solidity/build/remix-ide/mode-solidity';
 import ActionOverlay from './ActionOverlay';
-import { DEFAULT_SOLIDITY_CONTRACT } from '../../../constants';
 import { useIsMobile } from '../../../hooks/useIsMobile';
 
 export interface SolidityEditorProps {
@@ -24,7 +23,7 @@ function SolidityEditor({ code, onChange }: SolidityEditorProps) {
         marginRight: isMobile ? 0 : '1rem',
         marginBottom: isMobile ? '1rem' : 0,
       }}>
-      <ActionOverlay handleReset={() => onChange(DEFAULT_SOLIDITY_CONTRACT)} />
+      <ActionOverlay handleSelectExample={onChange} editorLanguage='solidity'/>
       <AceEditor
         style={{
           width: '100%',

app/src/features/editor/components/SwayEditor.tsx

@@ -5,7 +5,6 @@ import 'ace-builds/src-noconflict/mode-rust';
 import 'ace-builds/src-noconflict/theme-chrome';
 import { StyledBorder } from '../../../components/shared';
 import ActionOverlay from './ActionOverlay';
-import { DEFAULT_SWAY_CONTRACT } from '../../../constants';
 import { Toolchain } from './ToolchainDropdown';
 
 export interface SwayEditorProps {
@@ -24,9 +23,10 @@ function SwayEditor({
   return (
     <StyledBorder style={{ flex: 1 }}>
       <ActionOverlay
-        handleReset={() => onChange(DEFAULT_SWAY_CONTRACT)}
+        handleSelectExample={onChange}
         toolchain={toolchain}
         setToolchain={setToolchain}
+        editorLanguage='sway'
       />
       <AceEditor
         style={{