Select app instead of typing app id for go to app action (#346)

* Add select dropdown that shows all apps.

* Change appId => slug

* Extract 'apps' into editor state

frontend/src/Editor/Editor.jsx

@@ -76,6 +76,7 @@ class Editor extends React.Component {
           urlparams: JSON.parse(JSON.stringify(queryString.parse(props.location.search)))
         }
       },
+      apps: [],
       dataQueriesDefaultText: 'You haven\'t created queries yet.',
       showQuerySearchField: false
     };
@@ -83,6 +84,7 @@ class Editor extends React.Component {
 
   componentDidMount() {
     const appId = this.props.match.params.id;
+    this.fetchApps(0);
 
     appService.getApp(appId).then((data) => this.setState(
       {
@@ -177,6 +179,13 @@ class Editor extends React.Component {
     );
   };
 
+  fetchApps = (page) => {
+    appService.getAll(page).then((data) => this.setState({
+      apps: data.apps,
+      isLoading: false
+    }));
+  }
+
   computeComponentState = (components) => {
     let componentState = {};
     const currentComponents = this.state.currentState.components;
@@ -455,7 +464,8 @@ class Editor extends React.Component {
       deviceWindowWidth,
       scaleValue,
       dataQueriesDefaultText,
-      showQuerySearchField
+      showQuerySearchField,
+      apps
     } = this.state;
     const appLink = slug ? `/applications/${slug}` : '';
 
@@ -880,6 +890,7 @@ class Editor extends React.Component {
                       currentState={currentState}
                       allComponents={appDefinition.components}
                       key={selectedComponent.id}
+                      apps={apps}
                     ></Inspector>
                   ) : (
                     <div className="mt-5 p-2">Please select a component to inspect</div>

frontend/src/Editor/Inspector/EventSelector.jsx

@@ -13,7 +13,8 @@ export const EventSelector = ({
   extraData,
   eventMeta,
   currentState,
-  components
+  components,
+  apps
 }) => {
 
   const [open, setOpen] = useState(false);
@@ -48,6 +49,17 @@ export const EventSelector = ({
     return modalOptions;
   }
 
+  function getAllApps() {
+    let appsOptionsList = [];
+    apps.map((item) => {
+      appsOptionsList.push({
+        name: item.name,
+        value: item.id
+      })
+    })
+    return appsOptionsList;
+  }
+
   function eventChanged(param, value, extraData) { 
     if(value === 'none') { 
       eventUpdated(param, null, null);
@@ -115,10 +127,15 @@ export const EventSelector = ({
               {definition.actionId === 'go-to-app' && (
                 <div className="p-1">
                   <label className="form-label mt-1">App</label>
-                  <CodeHinter
-                    currentState={currentState}
-                    initialValue={definition.options.appId}
-                    onChange={(value) => eventOptionUpdated(param, 'appId', value, extraData)}
+                  <SelectSearch
+                    options={getAllApps()}
+                    search={true}
+                    value={definition.options.slug}
+                    onChange={(value) => {
+                      eventOptionUpdated(param, 'slug', value, extraData);
+                    }}
+                    filterOptions={fuzzySearch}
+                    placeholder="Select.."
                   />
                 </div>
               )}

frontend/src/Editor/Inspector/Inspector.jsx

@@ -16,7 +16,8 @@ export const Inspector = ({
   removeComponent,
   allComponents,
   componentChanged,
-  currentState
+  currentState,
+  apps
 }) => {
   
   const selectedComponent = { id: selectedComponentId, component: allComponents[selectedComponentId].component, layouts: allComponents[selectedComponentId].layouts}
@@ -229,7 +230,7 @@ export const Inspector = ({
           <div className="hr-text">Style</div>
           {Object.keys(componentMeta.styles).map((style) => renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', currentState, components))}
           <div className="hr-text">Events</div>
-          {Object.keys(componentMeta.events).map((eventName) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, componentMeta.events[eventName], currentState, components))}
+          {Object.keys(componentMeta.events).map((eventName) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, componentMeta.events[eventName], currentState, components, apps))}
           
           
 

frontend/src/Editor/Inspector/Utils.js

@@ -51,7 +51,7 @@ export function renderElement(component, componentMeta, paramUpdated, dataQuerie
   );
 }
 
-export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, eventMeta, currentState, components) {
+export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, eventMeta, currentState, components, apps) {
   let definition = component.component.definition.events[eventName];
   definition = definition || { };
 
@@ -65,6 +65,7 @@ export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpd
             eventOptionUpdated={eventOptionUpdated}
             currentState={currentState}
             components={components}
+            apps={apps}
         />
   );
 }

frontend/src/_helpers/appUtils.js

@@ -99,9 +99,9 @@ function executeAction(_ref, event, mode) {
     }
 
     if (event.actionId === 'go-to-app') {
-      const appId = resolveReferences(event.options.appId, _ref.state.currentState);
+      const slug = resolveReferences(event.options.slug, _ref.state.currentState);
 
-      const url = `/applications/${appId}`;
+      const url = `/applications/${slug}`;
 
       if(mode === 'view') {
         _ref.props.history.push(url);