Merge pull request #4084 from systeminit/jobelenus/locked-funcs

Locked funcs!
systeminit · Jul 4, 2024 · 6bdadfa · 6bdadfa
2 parents 7cbdc68 + 6d98af2
commit 6bdadfa
Show file tree

Hide file tree

Showing 21 changed files with 277 additions and 183 deletions.
diff --git a/app/web/src/api/sdf/dal/schema.ts b/app/web/src/api/sdf/dal/schema.ts
@@ -65,6 +65,7 @@ export interface SchemaVariant {
   inputSockets: InputSocket[];
   outputSockets: OutputSocket[];
   props: Prop[];
+  canCreateNewComponents: boolean;
 }
 
 export const outputSocketsAndPropsFor = (schemaVariant: SchemaVariant) => {

diff --git a/app/web/src/components/AssetCard.vue b/app/web/src/components/AssetCard.vue
@@ -49,11 +49,7 @@
           />
 
           <IconButton
-            v-if="
-              ffStore.IMMUTABLE_SCHEMA_VARIANTS &&
-              asset.isLocked &&
-              editingVersionDoesNotExist
-            "
+            v-if="asset.isLocked && editingVersionDoesNotExist"
             class="hover:scale-125"
             variant="simple"
             icon="sliders-vertical"
@@ -70,7 +66,7 @@
     </div>
     <div class="flex flex-col">
       <ErrorMessage
-        v-if="asset && ffStore.IMMUTABLE_SCHEMA_VARIANTS && asset.isLocked"
+        v-if="asset && asset.isLocked"
         icon="lock"
         variant="block"
         tone="warning"
@@ -92,7 +88,6 @@ import tinycolor from "tinycolor2";
 import clsx from "clsx";
 import { useTheme, Stack, Icon, ErrorMessage } from "@si/vue-lib/design-system";
 import { useAssetStore, SchemaVariantListEntry } from "@/store/asset.store";
-import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import { SchemaVariantId } from "@/api/sdf/dal/schema";
 import { getAssetIcon } from "@/store/components.store";
 import IconButton from "./IconButton.vue";
@@ -104,7 +99,6 @@ const props = defineProps({
 });
 
 const { theme } = useTheme();
-const ffStore = useFeatureFlagsStore();
 
 const editingVersionDoesNotExist = computed<boolean>(() => {
   const unlockedExists = assetStore.variantList.some(

diff --git a/app/web/src/components/AssetDetailsPanel.vue b/app/web/src/components/AssetDetailsPanel.vue
@@ -10,7 +10,7 @@
           class="flex flex-row items-center justify-around gap-xs p-xs border-b dark:border-neutral-600"
         >
           <VButton
-            :disabled="saveAssetReqStatus.isPending"
+            :disabled="saveAssetReqStatus.isPending || editingAsset.isLocked"
             :loading="updateAssetReqStatus.isPending"
             :requestStatus="updateAssetReqStatus"
             icon="bolt"
@@ -65,7 +65,7 @@
         <VormInput
           id="schemaName"
           v-model="editingAsset.schemaName"
-          :disabled="ffStore.IMMUTABLE_SCHEMA_VARIANTS && editingAsset.isLocked"
+          :disabled="editingAsset.isLocked"
           compact
           label="Asset Name"
           placeholder="(mandatory) Provide the asset a name"
@@ -76,7 +76,7 @@
         <VormInput
           id="displayName"
           v-model="editingAsset.displayName"
-          :disabled="ffStore.IMMUTABLE_SCHEMA_VARIANTS && editingAsset.isLocked"
+          :disabled="editingAsset.isLocked"
           compact
           label="Display name"
           placeholder="(optional) Provide the asset version a display name"
@@ -86,7 +86,7 @@
         <VormInput
           id="category"
           v-model="editingAsset.category"
-          :disabled="ffStore.IMMUTABLE_SCHEMA_VARIANTS && editingAsset.isLocked"
+          :disabled="editingAsset.isLocked"
           compact
           label="Category"
           placeholder="(mandatory) Provide a category for the asset"
@@ -96,7 +96,7 @@
         <VormInput
           id="componentType"
           v-model="editingAsset.componentType"
-          :disabled="ffStore.IMMUTABLE_SCHEMA_VARIANTS && editingAsset.isLocked"
+          :disabled="editingAsset.isLocked"
           :options="componentTypeOptions"
           compact
           label="Component Type"
@@ -106,15 +106,15 @@
         <VormInput
           id="description"
           v-model="editingAsset.description"
-          :disabled="ffStore.IMMUTABLE_SCHEMA_VARIANTS && editingAsset.isLocked"
+          :disabled="editingAsset.isLocked"
           compact
           label="Description"
           placeholder="(optional) Provide a brief description of the asset"
           type="textarea"
           @blur="updateAsset"
         />
         <VormInput
-          :disabled="ffStore.IMMUTABLE_SCHEMA_VARIANTS && editingAsset.isLocked"
+          :disabled="editingAsset.isLocked"
           compact
           label="color"
           type="container"
@@ -129,7 +129,7 @@
         <VormInput
           id="link"
           v-model="editingAsset.link"
-          :disabled="ffStore.IMMUTABLE_SCHEMA_VARIANTS && editingAsset.isLocked"
+          :disabled="editingAsset.isLocked"
           compact
           label="Documentation Link"
           placeholder="(optional) Provide a documentation link for the asset"
@@ -180,7 +180,6 @@ import {
 import * as _ from "lodash-es";
 import { FuncKind, FuncId } from "@/api/sdf/dal/func";
 import { useAssetStore } from "@/store/asset.store";
-import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import { ComponentType } from "@/api/sdf/dal/schema";
 import ColorPicker from "./ColorPicker.vue";
 import AssetFuncAttachModal from "./AssetFuncAttachModal.vue";
@@ -190,7 +189,6 @@ const props = defineProps<{
   assetId?: string;
 }>();
 
-const ffStore = useFeatureFlagsStore();
 const assetStore = useAssetStore();
 const loadAssetReqStatus = assetStore.getRequestStatus(
   "LOAD_SCHEMA_VARIANT",
@@ -256,7 +254,12 @@ const saveAssetReqStatus = assetStore.getRequestStatus(
 );
 const executeAsset = async () => {
   if (editingAsset.value) {
-    await assetStore.REGENERATE_VARIANT(editingAsset.value.schemaVariantId);
+    const resp = await assetStore.REGENERATE_VARIANT(
+      editingAsset.value.schemaVariantId,
+    );
+    if (resp.result.success) {
+      assetStore.setSchemaVariantSelection(resp.result.data.schemaVariantId);
+    }
   }
 };
 
@@ -272,7 +275,7 @@ const cloneAsset = async (name: string) => {
     );
     if (result.result.success) {
       cloneAssetModalRef.value?.modal?.close();
-      await assetStore.setSchemaVariantSelection(result.result.data.id, true);
+      assetStore.setSchemaVariantSelection(result.result.data.id, true);
     }
   }
 };

diff --git a/app/web/src/components/AssetEditor.vue b/app/web/src/components/AssetEditor.vue
@@ -18,12 +18,9 @@
           : `asset-${assetId}`
       "
       v-model="editingAsset"
+      :disabled="selectedAsset.isLocked"
+      :recordId="selectedAsset.schemaVariantId"
       :typescript="editorTs || ''"
-      :disabled="
-        isReadOnly ||
-        (useFeatureFlagsStore().IMMUTABLE_SCHEMA_VARIANTS &&
-          selectedAsset.isLocked)
-      "
       @change="onChange"
     />
   </ScrollArea>
@@ -48,7 +45,6 @@ import { useAssetStore } from "@/store/asset.store";
 import { useFuncStore } from "@/store/func/funcs.store";
 import { useChangeSetsStore } from "@/store/change_sets.store";
 import { editor_ts, loadEditorTs } from "@/utils/load_editor_ts";
-import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import CodeEditor from "./CodeEditor.vue";
 import AssetEditorHeader from "./AssetEditorHeader.vue";
 
@@ -71,10 +67,6 @@ const selectedAssetFuncCode = computed(() => {
   return funcStore.funcCodeById[fId]?.code;
 });
 
-const isReadOnly = computed(() => {
-  return false;
-});
-
 const editingAsset = ref<string>(selectedAssetFuncCode.value ?? "");
 
 const loadAssetReqStatus = assetStore.getRequestStatus(
@@ -100,7 +92,7 @@ watch(
   },
 );
 
-const onChange = () => {
+const onChange = (_: string, code: string) => {
   if (
     !selectedAsset.value ||
     selectedAssetFuncCode.value === editingAsset.value ||
@@ -115,7 +107,7 @@ const onChange = () => {
       {
         ...selectedAsset.value,
       },
-      editingAsset.value,
+      code,
     );
 };
 

diff --git a/app/web/src/components/AssetFuncAttachDropdown.vue b/app/web/src/components/AssetFuncAttachDropdown.vue
@@ -9,11 +9,16 @@
     @click="onClick"
   >
     <DropdownMenu ref="menuRef" compact forceAlignRight>
-      <DropdownMenuItem icon="plus" @select="emit('selectedAttachType', 'new')">
+      <DropdownMenuItem
+        icon="plus"
+        :disabled="assetStore.selectedSchemaVariant?.isLocked"
+        @select="emit('selectedAttachType', 'new')"
+      >
         New function
       </DropdownMenuItem>
       <DropdownMenuItem
         icon="func"
+        :disabled="assetStore.selectedSchemaVariant?.isLocked"
         @select="emit('selectedAttachType', 'existing')"
       >
         Existing
@@ -26,8 +31,11 @@
 import { PropType, ref } from "vue";
 import { ApiRequestStatus } from "@si/vue-lib/pinia";
 import { DropdownMenu, DropdownMenuItem } from "@si/vue-lib/design-system";
+import { useAssetStore } from "@/store/asset.store";
 import IconButton from "./IconButton.vue";
 
+const assetStore = useAssetStore();
+
 defineProps({
   requestStatus: { type: Object as PropType<ApiRequestStatus> },
 });

diff --git a/app/web/src/components/AssetFuncAttachModal.vue b/app/web/src/components/AssetFuncAttachModal.vue
@@ -119,6 +119,7 @@
         <CodeEditor
           v-if="loadFuncDetailsReq && !loadFuncDetailsReq?.value.isPending"
           v-model="selectedFuncCode"
+          :recordId="selectedExistingFuncId"
           disabled
           typescript="yes"
           noLint

diff --git a/app/web/src/components/AttributesPanel/AttributesPanelItem.vue b/app/web/src/components/AttributesPanel/AttributesPanelItem.vue
@@ -511,6 +511,7 @@
           <CodeEditor
             :id="`${changeSetsStore.selectedChangeSetId}/${attributeDef.valueId}`"
             v-model="newValueString"
+            :recordId="attributeDef.valueId"
           />
         </template>
       </div>

diff --git a/app/web/src/components/CodeEditor.vue b/app/web/src/components/CodeEditor.vue
@@ -70,6 +70,7 @@ import {
 const props = defineProps({
   id: String,
   modelValue: { type: String, required: true },
+  recordId: { type: String, required: true },
   disabled: { type: Boolean },
   json: Boolean,
   typescript: { type: String },
@@ -81,24 +82,25 @@ const props = defineProps({
 const emit = defineEmits<{
   "update:modelValue": [v: string];
   blur: [v: string];
-  change: [v: string];
+  change: [id: string, v: string];
   close: [];
 }>();
 
 watch(
   () => props.modelValue,
   () => {
-    if (!props.id && yText) {
-      view.update([
-        view.state.update({
-          changes: {
-            from: 0,
-            to: view.state.doc.length,
-            insert: props.modelValue,
-          },
-        }),
-      ]);
-    }
+    // always up the code editor with the new text that comes from the prop
+    // Note: props are read only, and will change when the selected func/variant changes
+    // this does not change as a result of a user typing
+    view.update([
+      view.state.update({
+        changes: {
+          from: 0,
+          to: view.state.doc.length,
+          insert: props.modelValue,
+        },
+      }),
+    ]);
   },
 );
 
@@ -130,7 +132,7 @@ function onEditorValueUpdated(update: ViewUpdate) {
   if (!update.docChanged) return;
 
   emit("update:modelValue", update.state.doc.toString());
-  emit("change", view.state.doc.toString());
+  emit("change", props.recordId, view.state.doc.toString());
 
   const serializedState = update.view.state.toJSON({ history: historyField });
   if (props.id && serializedState.history) {
@@ -296,7 +298,7 @@ let wsProvider: WebsocketProvider | undefined;
 let yText: Y.Text | undefined;
 onBeforeUnmount(() => {
   if (view) {
-    emit("change", view.state.doc.toString());
+    emit("change", props.recordId, view.state.doc.toString());
     emit("blur", view.state.doc.toString());
     wsProvider?.destroy();
   }
@@ -384,7 +386,7 @@ const mountEditor = async () => {
     });
 
     view.contentDOM.onblur = () => {
-      emit("change", view.state.doc.toString());
+      emit("change", props.recordId, view.state.doc.toString());
       emit("blur", view.state.doc.toString());
     };
   };

diff --git a/app/web/src/components/FuncEditor/ActionDetails.vue b/app/web/src/components/FuncEditor/ActionDetails.vue
@@ -5,7 +5,7 @@
         id="create"
         v-model="isCreate"
         title="This action creates a resource"
-        :disabled="disabled"
+        :disabled="disabled || func?.isLocked"
         @update:model-value="setCreate"
       />
     </div>
@@ -14,7 +14,7 @@
         id="refresh"
         v-model="isRefresh"
         title="This action refreshes a resource"
-        :disabled="disabled"
+        :disabled="disabled || func?.isLocked"
         @update:model-value="setRefresh"
       />
     </div>
@@ -23,7 +23,7 @@
         id="delete"
         v-model="isDelete"
         title="This action deletes a resource"
-        :disabled="disabled"
+        :disabled="disabled || func?.isLocked"
         @update:model-value="setDelete"
       />
     </div>
@@ -57,6 +57,10 @@ const isCreate = ref(false);
 const isDelete = ref(false);
 const isRefresh = ref(false);
 
+const func = computed(() => {
+  return funcStore.funcsById[props.funcId];
+});
+
 const binding = computed(() => {
   const bindings = funcStore.actionBindings[props.funcId];
   const binding = bindings