Enable component name autocomplete

src/main/webapp/features/filters/sagas.ts

@@ -21,6 +21,7 @@ import { all, call, put, select, takeLatest } from 'redux-saga/effects';
 
 import { actions } from './slice';
 import { actions as appActions } from '../app/slice';
+import { actions as studioActions } from '../studio/slice';
 import { selectors as studioSelectors } from '../studio/slice';
 
 import { architectureResourceApi, basePath } from '../../services/config';
@@ -131,6 +132,7 @@ function* refresh() {
 export default function* root() {
   yield all([
     takeLatest(actions.getInitial, getInitial),
+    takeLatest(studioActions.setRaw, getInitial),
     takeLatest(appActions.setSource, refresh)
   ]);
 }

src/main/webapp/features/studio/Editor/editorOptions.ts

@@ -1,6 +1,8 @@
 import * as monaco from 'monaco-editor';
 
 import { architectureResourceApi } from '../../../services/config';
+import { selectors as filtersSelectors } from '../../filters/slice';
+import { store } from '../../../store';
 
 monaco.editor.defineTheme('lowfer', {
   base: 'vs', // can also be vs-dark or hc-black
@@ -23,26 +25,45 @@ const createComponentTypesProposals = async (range: any) => {
   }));
 };
 
+const createComponentNamesProposals = (range: any) => {
+  const components = filtersSelectors.getComponents(store.getState());
+  return components?.map((component) => ({
+    label: component.name,
+    kind: monaco.languages.CompletionItemKind.Function,
+    documentation: component.name,
+    insertText: component.name,
+    range
+  }));
+};
+
 monaco.languages.registerCompletionItemProvider('yaml', {
   triggerCharacters: [':', ' '],
+  // @ts-ignore
   provideCompletionItems: (model, position) => {
     const textUntilPosition = model.getValueInRange({
       startLineNumber: position.lineNumber,
       startColumn: 1,
       endLineNumber: position.lineNumber,
       endColumn: position.column
     });
-    const match = textUntilPosition.match(/type:/);
-    if (!match) {
-      return { suggestions: [] };
-    }
     const word = model.getWordUntilPosition(position);
     const range = {
       startLineNumber: position.lineNumber,
       endLineNumber: position.lineNumber,
       startColumn: word.startColumn,
       endColumn: word.endColumn
     };
+    const namesMatch = textUntilPosition.match(/component:/);
+    if (namesMatch) {
+      return {
+        suggestions: createComponentNamesProposals(range)
+      };
+    }
+    const typesMatch = textUntilPosition.match(/type:/);
+    if (!typesMatch) {
+      return { suggestions: [] };
+    }
+
     return new Promise((resolve) => {
       createComponentTypesProposals(range).then((suggestions) => {
         resolve({

src/main/webapp/features/studio/Editor/index.tsx

@@ -31,10 +31,6 @@ const Editor = () => {
 
   const [value, setValue] = useState(raw);
 
-  useEffect(() => {
-    dispatch(actions.getComponentTypes());
-  }, [dispatch]);
-
   useEffect(() => {
     setValue(raw);
   }, [setValue, raw]);