add version support

Signed-off-by: Jasti Sri Radhe Shyam <radheshyam.jasti@zeeve.io>

Makefile

@@ -30,6 +30,8 @@ FORMATTING_URL ?= http://localhost:4000/format
 
 ANALYTICS_URL ?= https://api-sa.substrate.io
 
+VERSION_LIST_URL ?= http://localhost:4000/version_list
+
 DOCKER_USER_NAME ?= achimcc
 
 ################################################################################
@@ -63,6 +65,7 @@ playground-build:
 	GIST_LOAD_URL=/gist/load \
 	GIST_CREATE_URL=/gist/create \
 	ANALYTICS_URL=$(ANALYTICS_URL) \
+	VERSION_LIST_URL=/version_list \
 	yarn workspace playground run build
 
 playground-start:
@@ -72,6 +75,7 @@ playground-start:
 	GIST_LOAD_URL=$(GIST_LOAD_URL) \
 	GIST_CREATE_URL=$(GIST_CREATE_URL) \
 	ANALYTICS_URL=$(ANALYTICS_URL) \
+	VERSION_LIST_URL=$(VERSION_LIST_URL) \
 	yarn workspace playground run start
 
 playground-clean:

crates/backend/src/main.rs

@@ -32,6 +32,7 @@ use crate::{
             create::route_gist_create,
             load::route_gist_load,
         },
+        version::route_version_list,
     },
 };
 use actix_cors::Cors;
@@ -112,6 +113,10 @@ async fn main() -> std::io::Result<()> {
             .route(
                 "/status",
                 get().to(route_status),
+            )
+            .route(
+                "/version_list",
+                get().to(route_version_list),
             );
 
         match opts.github_token {

crates/backend/src/services/contract.rs

@@ -148,6 +148,7 @@ pub async fn route_status() -> HttpResponse<BoxBody> {
     HttpResponse::Ok().body("ink-compiler is live")
 }
 
+
 // -------------------------------------------------------------------------------------------------
 // TESTS
 // -------------------------------------------------------------------------------------------------

crates/backend/src/services/mod.rs

@@ -20,3 +20,4 @@
 pub mod contract;
 pub mod frontend;
 pub mod gist;
+pub mod version;

crates/backend/src/services/version.rs

@@ -0,0 +1,12 @@
+use actix_web::{
+  body::BoxBody,
+  HttpResponse,
+};
+
+pub use sandbox::VersionListResult;
+
+pub async fn route_version_list() -> HttpResponse<BoxBody> {
+  let formatting_result = "[\"1.0.0\"]".to_string();
+  // let formatting_result = serde_json::to_string(&result).unwrap();
+  HttpResponse::Ok().append_header(("Content-Type","application/json")).body(formatting_result)
+}

crates/generate-bindings/src/main.rs

@@ -18,6 +18,7 @@ mod cli;
 
 use crate::cli::Cli;
 use backend::services::{
+    version::VersionListResult,
     contract::{
         CompilationRequest,
         CompilationResult,
@@ -64,6 +65,7 @@ fn main() -> std::io::Result<()> {
         GistLoadResponse,
         GistCreateRequest,
         GistCreateResponse,
+        VersionListResult
     );
 
     let path = Path::new(&target);

crates/sandbox/src/lib.rs

@@ -160,6 +160,20 @@ pub enum FormattingResult {
     Error { stdout: String, stderr: String },
 }
 
+#[derive(Deserialize, Serialize, TypeDef, PartialEq, Debug, Clone, Eq)]
+#[serde(tag = "type", content = "payload", rename_all = "SCREAMING_SNAKE_CASE")]
+pub enum VersionListResult {
+    Success {
+        versions: Vec<String>,
+        stdout: String,
+        stderr: String,
+    },
+    Error {
+        stdout: String,
+        stderr: String,
+    },
+}
+
 // -------------------------------------------------------------------------------------------------
 // CONSTANTS
 // -------------------------------------------------------------------------------------------------

packages/ink-editor/src/api/version.ts

@@ -0,0 +1,44 @@
+import Common from '@paritytech/commontypes';
+
+export type versionListApiResponse =
+  | {
+      type: 'OK';
+      payload: Common.VersionListResult;
+    }
+  | {
+      type: 'NETWORK_ERROR';
+    }
+  | {
+      type: 'SERVER_ERROR';
+      payload: { status: number };
+    };
+
+export type Config = {
+  versionListUrl: string;
+};
+
+const mapResponse = async (response: Response): Promise<versionListApiResponse> =>
+  response.status === 200
+    ? {
+        type: 'OK',
+        payload: await response.json(),
+      }
+    : {
+        type: 'SERVER_ERROR',
+        payload: { status: response.status },
+      };
+
+export const versionListRequest = (
+  config: Config,
+): Promise<versionListApiResponse> => {
+  const opts: RequestInit = {
+    method: 'GET',
+    mode: 'cors',
+    credentials: 'same-origin',
+    headers: { 'Content-Type': 'application/json' },
+  };
+
+  return fetch(config.versionListUrl || '', opts)
+    .then(mapResponse)
+    .catch(() => ({ type: 'NETWORK_ERROR' }));
+};

packages/playground/package.json

@@ -11,6 +11,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-monaco-editor": "^0.49.0",
+    "react-router-dom": "^6.17.0",
     "use-reducer-logger": "^1.0.2"
   },
   "scripts": {

packages/playground/src/app/Header/VersionsSubmenu.tsx

@@ -0,0 +1,19 @@
+import { MenuElementWrapper } from '@paritytech/components/';
+import { ReactElement, useContext } from 'react';
+import { AppContext } from '~/context/app/';
+import { Dispatch, State } from '~/context/app/reducer';
+
+export const VersionsSubmenu = (): ReactElement => {
+  const [state, dispatch]: [State, Dispatch] = useContext(AppContext);
+
+  return (
+    <div className="w-56">
+      <h2 className="px-4 pt-1 pb-2">Supported Versions</h2>
+      {state.versionList.map((version) => (
+        <MenuElementWrapper>
+          {version}
+        </MenuElementWrapper>
+      ))}
+    </div>
+  );
+};

packages/playground/src/app/Header/index.tsx

@@ -13,6 +13,7 @@ import {
 } from '~/symbols';
 import { OverlayPanel, ButtonWithIcon } from '@paritytech/components/';
 import { SettingsSubmenu } from './SettingsSubmenu';
+import { VersionsSubmenu } from './VersionsSubmenu';
 import { ShareSubmenu } from './ShareSubmenu';
 
 import { AppContext } from '~/context/app/';
@@ -24,6 +25,7 @@ import { testing } from '~/context/side-effects/testing';
 import { format } from '~/context/side-effects/format';
 import * as constants from '~/constants';
 import { Colors } from '@paritytech/components/ButtonWithIcon';
+import { useNavigate } from 'react-router-dom';
 
 const openContractsUiUrl = (): void => {
   window.open(constants.CONTRACTS_UI_URL, '_blank');
@@ -54,6 +56,7 @@ export const Header = (): ReactElement => {
   const [, dispatchMessage]: [MessageState, MessageDispatch] = useContext(MessageContext);
 
   const settingsOverlay = useRef<OverlayPanel>(null);
+  const versionsOverlay = useRef<OverlayPanel>(null);
   const shareOverlay = useRef<OverlayPanel>(null);
 
   const hasDownloadableResult =
@@ -121,6 +124,14 @@ export const Header = (): ReactElement => {
           onClick={e => settingsOverlay.current && settingsOverlay.current.toggle(e, null)}
         />
 
+        <ButtonWithIcon
+          label="Versions"
+          Icon={SettingsIcon}
+          darkmode={state.darkmode}
+          testId={'buttonIcon'}
+          onClick={e => versionsOverlay.current && versionsOverlay.current.toggle(e, null)}
+        />
+
         <div className="flex-grow" />
 
         <ButtonWithIcon
@@ -154,6 +165,9 @@ export const Header = (): ReactElement => {
       <OverlayPanel ref={settingsOverlay} showCloseIcon dismissable>
         <SettingsSubmenu />
       </OverlayPanel>
+      <OverlayPanel ref={versionsOverlay} showCloseIcon dismissable>
+        <VersionsSubmenu />
+      </OverlayPanel>
       <OverlayPanel ref={shareOverlay} showCloseIcon dismissable>
         <ShareSubmenu darkmode={state.darkmode} />
       </OverlayPanel>

packages/playground/src/app/index.tsx

@@ -8,11 +8,21 @@ import { ReactElement, useContext, useEffect } from 'react';
 import { Dispatch, State } from '~/context/app/reducer';
 import { MessageDispatch, MessageState } from '~/context/messages/reducer';
 import { loadCode } from '~/context/side-effects/load-code';
+import { loadVersionList } from '~/context/side-effects/version';
 import { monaco } from 'react-monaco-editor';
+import {
+  Routes,
+  Route,
+  useNavigate,
+  BrowserRouter,
+  useParams,
+} from "react-router-dom";
 
 const App = (): ReactElement => {
   const [state, dispatch]: [State, Dispatch] = useContext(AppContext);
   const [, messageDispatch]: [MessageState, MessageDispatch] = useContext(MessageContext);
+  const navigate = useNavigate();
+  const { versionId } = useParams();
   const { monacoUri: uri, formatting } = state;
 
   useEffect(() => {
@@ -22,6 +32,7 @@ const App = (): ReactElement => {
       if (!model) return;
       model.setValue(code);
     });
+    loadVersionList(state, { app: dispatch }).then()
   }, [uri]);
 
   useEffect(() => {
@@ -54,31 +65,39 @@ const App = (): ReactElement => {
   };
 
   return (
-    <Layout
-      header={<Header />}
-      editor={
-        <InkEditor
-          onRustAnalyzerStartLoad={onRustAnalyzerStartLoad}
-          onRustAnalyzerFinishLoad={onRustAnalyzerFinishLoad}
-          numbering={state.numbering}
-          darkmode={state.darkmode}
-          rustAnalyzer={state.rustAnalyzer}
-          minimap={state.minimap}
-          setURI={uri => dispatch({ type: 'SET_URI', payload: uri })}
-        />
-      }
-      console={<Console />}
-    />
+    <>
+      <h1>{versionId}</h1>
+      <Layout
+        header={<Header />}
+        editor={
+          <InkEditor
+            onRustAnalyzerStartLoad={onRustAnalyzerStartLoad}
+            onRustAnalyzerFinishLoad={onRustAnalyzerFinishLoad}
+            numbering={state.numbering}
+            darkmode={state.darkmode}
+            rustAnalyzer={state.rustAnalyzer}
+            minimap={state.minimap}
+            setURI={uri => dispatch({ type: 'SET_URI', payload: uri })}
+          />
+        }
+        console={<Console />}
+      />
+    </>
   );
 };
 
 const AppWithProvider = (): ReactElement => {
   return (
-    <AppProvider>
-      <MessageProvider>
-        <App />
-      </MessageProvider>
-    </AppProvider>
+    <BrowserRouter>
+      <AppProvider>
+        <MessageProvider>
+          <Routes>
+            <Route path="/" element={<App />} />
+            <Route path="/:versionId" element={<App />} />
+          </Routes>
+        </MessageProvider>
+      </AppProvider>
+    </BrowserRouter>
   );
 };
 

packages/playground/src/context/app/reducer.ts

@@ -15,6 +15,8 @@ export const defaultState: State = {
   gist: { type: 'NOT_ASKED' },
   contractSize: null,
   rustAnalyzer: false,
+  versionList: [],
+  version: '',
 };
 
 export type State = {
@@ -28,6 +30,8 @@ export type State = {
   gist: GistState;
   contractSize: number | null;
   rustAnalyzer: boolean;
+  versionList: string[];
+  version: string;
 };
 
 export type GistState =
@@ -60,7 +64,9 @@ export type Action =
   | { type: 'SET_GIST_STATE'; payload: GistState }
   | { type: 'SET_URI'; payload: Uri }
   | { type: 'SET_CONTRACT_SIZE'; payload: number | null }
-  | { type: 'SET_RUST_ANALYZER_STATE'; payload: boolean };
+  | { type: 'SET_RUST_ANALYZER_STATE'; payload: boolean }
+  | { type: 'SET_VERSIONS_STATE'; payload: string[] }
+  | { type: 'SET_VERSION_STATE'; payload: string };
 
 export type Dispatch = (action: Action) => void;
 
@@ -116,6 +122,16 @@ export const reducer = (state: State, action: Action): State => {
         ...state,
         contractSize: action.payload,
       };
+    case 'SET_VERSIONS_STATE':
+      return {
+        ...state,
+        versionList: action.payload,
+      };
+    case 'SET_VERSION_STATE':
+      return {
+        ...state,
+        version: action.payload,
+      };
     default:
       return state;
   }