Respect schema-to-asset relationship when contributing assets

app/web/src/api/sdf/dal/module.ts

@@ -0,0 +1,21 @@
+import { SchemaId, SchemaVariantId } from "./schema";
+
+export type ModuleId = string;
+
+export interface LatestModule {
+  id: ModuleId;
+  name: string;
+  description: string;
+  ownerUserId: string;
+  ownerDisplayName: string;
+  metadata: object;
+  latestHash: string;
+  latestHashCreatedAt: IsoDateString;
+  schemaId: SchemaId;
+}
+
+export interface ModuleContributeRequest {
+  name: string;
+  version: string;
+  schemaVariantId: SchemaVariantId;
+}

app/web/src/api/sdf/dal/schema.ts

@@ -70,19 +70,6 @@ export interface SchemaVariant {
   canContribute: boolean;
 }
 
-export type ModuleId = string;
-export interface Module {
-  id: ModuleId;
-  name: string;
-  description: string;
-  ownerUserId: string;
-  ownerDisplayName: string;
-  metadata: object;
-  latestHash: string;
-  latestHashCreatedAt: IsoDateString;
-  schemaId: SchemaId;
-}
-
 export const outputSocketsAndPropsFor = (schemaVariant: SchemaVariant) => {
   const socketOptions = schemaVariant.outputSockets.map((socket) => ({
     label: `Output Socket: ${socket.name}`,

app/web/src/components/AssetCard.vue

@@ -32,11 +32,13 @@
           <EditingPill v-if="!asset.isLocked" :color="asset.color" />
           <IconButton
             v-if="asset.canContribute"
+            :selected="contributeAssetModalRef?.isOpen || false"
             class="hover:scale-125"
             icon="cloud-upload"
             tooltip="Contribute"
             tooltipPlacement="top"
             variant="simple"
+            @click="contributeAsset"
           />
 
           <IconButton
@@ -95,21 +97,50 @@
         </template>
       </ErrorMessage>
     </div>
+    <!-- FIXME(nick): this probably needs to be moved and de-duped with logic in AssetListPanel -->
+    <AssetContributeModal
+      ref="contributeAssetModalRef"
+      :contributeRequest="contributeRequest"
+      @contribute-success="onContributeAsset"
+    />
+    <Modal
+      ref="contributeAssetSuccessModalRef"
+      size="sm"
+      title="Contribution sent"
+    >
+      <p>
+        Thanks for contributing! We will review your contribution, and reach out
+        via email or on our
+        <a class="text-action-500" href="https://discord.com/invite/system-init"
+          >Discord Server</a
+        >
+        if you have any questions.
+      </p>
+    </Modal>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, PropType, ref } from "vue";
 import tinycolor from "tinycolor2";
 import clsx from "clsx";
-import { useTheme, Stack, Icon, ErrorMessage } from "@si/vue-lib/design-system";
+import {
+  useTheme,
+  Modal,
+  Stack,
+  Icon,
+  ErrorMessage,
+} from "@si/vue-lib/design-system";
 import { useRouter } from "vue-router";
+import { format as dateFormat } from "date-fns";
 import { useAssetStore } from "@/store/asset.store";
 import { SchemaVariantId, SchemaVariant } from "@/api/sdf/dal/schema";
 import { getAssetIcon } from "@/store/components.store";
 import { useModuleStore } from "@/store/module.store";
+import { ModuleContributeRequest } from "@/api/sdf/dal/module";
 import IconButton from "./IconButton.vue";
 import EditingPill from "./EditingPill.vue";
+import AssetContributeModal from "./AssetContributeModal.vue";
 
 const props = defineProps({
   titleCard: { type: Boolean },
@@ -121,6 +152,24 @@ const moduleStore = useModuleStore();
 const router = useRouter();
 const { theme } = useTheme();
 
+const contributeAssetModalRef =
+  ref<InstanceType<typeof AssetContributeModal>>();
+const contributeAssetSuccessModalRef = ref<InstanceType<typeof Modal>>();
+
+const contributeAsset = () => contributeAssetModalRef.value?.open();
+const onContributeAsset = () => contributeAssetSuccessModalRef.value?.open();
+
+const contributeRequest = computed((): ModuleContributeRequest => {
+  if (asset.value) {
+    const version = dateFormat(Date.now(), "yyyyMMddkkmmss");
+    return {
+      name: `${asset.value.schemaName} ${version}`,
+      version,
+      schemaVariantId: asset.value.schemaVariantId,
+    };
+  } else throw new Error("cannot contribute: no asset selected");
+});
+
 const editingVersionDoesNotExist = computed<boolean>(
   () =>
     assetStore.unlockedVariantIdForId[asset.value?.schemaVariantId ?? ""] ===
@@ -139,7 +188,7 @@ const asset = computed(
 );
 
 const canUpdate = computed(
-  () => !!assetStore.upgradeableModules[props.assetId],
+  () => !!moduleStore.upgradeableModules[props.assetId],
 );
 
 const updateAsset = () => {
@@ -148,7 +197,7 @@ const updateAsset = () => {
     throw new Error("cannot update asset: no asset selected");
   }
 
-  const module = assetStore.upgradeableModules[schemaVariantId];
+  const module = moduleStore.upgradeableModules[schemaVariantId];
   if (!module) {
     throw new Error("cannot update asset: no upgradeable module for asset");
   }

app/web/src/components/AssetContributeModal.vue

@@ -0,0 +1,105 @@
+<template>
+  <Modal ref="modalRef" title="Contribute Assets">
+    <Stack>
+      <div
+        v-if="enableContributeButton"
+        class="flex flex-col gap-2xs max-h-72 overflow-auto"
+      >
+        {{ props.contributeRequest.name }}
+      </div>
+      <ErrorMessage
+        v-if="contributeModuleReqStatus.isError"
+        :requestStatus="contributeModuleReqStatus"
+      />
+      <p>
+        Everything you contribute will receive a code review, and we will reach
+        out if we have any questions or concerns. Assuming things look good, we
+        will then include your asset in a future version of System Initiative!
+      </p>
+      <p>
+        By clicking the 'Contribute to System Initiative' button, you agree to
+        license any code submitted under the terms of the
+        <a
+          class="text-action-500"
+          href="https://www.apache.org/licenses/LICENSE-2.0"
+          >Apache License, Version 2.0</a
+        >, and that you intend for System Initiative, Inc. to distribute it.
+      </p>
+      <VButton
+        :disabled="!enableContributeButton"
+        :loadingText="_.sample(contributeLoadingTexts)"
+        :requestStatus="contributeModuleReqStatus"
+        label="Contribute to System Initiative"
+        icon="cloud-upload"
+        size="sm"
+        tone="action"
+        @click="contributeAssets"
+      />
+    </Stack>
+  </Modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import {
+  Modal,
+  VButton,
+  useModal,
+  Stack,
+  ErrorMessage,
+} from "@si/vue-lib/design-system";
+import * as _ from "lodash-es";
+import { useModuleStore } from "@/store/module.store";
+import { ModuleContributeRequest } from "@/api/sdf/dal/module";
+
+const moduleStore = useModuleStore();
+const modalRef = ref<InstanceType<typeof Modal>>();
+const contributeModuleReqStatus = moduleStore.getRequestStatus("CONTRIBUTE");
+
+const props = defineProps<{ contributeRequest: ModuleContributeRequest }>();
+
+const emits = defineEmits(["contributeSuccess"]);
+
+const contributeLoadingTexts = [
+  "Engaging Photon Torpedos...",
+  "Reticulating Splines...",
+  "Revolutionizing DevOps...",
+  "Calibrating Hyperspace Matrix...",
+  "Syncing Neural Circuitry...",
+  "Optimizing Tachyon Weave...",
+  "Tuning Fractal Harmonics...",
+  "Reshuffling Multiverse Threads...",
+  "Harmonizing Subspace Arrays...",
+  "Modulating Cybernetic Matrices...",
+  "Configuring Exo-Geometric Arrays...",
+  "Initializing Flux Capacitors...",
+  "Balancing Subatomic Resonance...",
+  "Fine-tuning Quantum Entanglement...",
+  "Matrixing Hyperdimensional Grids...",
+  "Coalescing Esoteric Code...",
+  "Syncopating Quantum Flux...",
+  "Reformatting Reality Lattice...",
+  "Fine-tuning Temporal Flux...",
+  "Syncing Cosmic Harmonics...",
+];
+
+const { open: openModal, close } = useModal(modalRef);
+const open = () => openModal();
+
+const isOpen = computed(() => modalRef.value?.isOpen);
+
+defineExpose({ open, close, isOpen });
+
+const enableContributeButton = computed(() => {
+  return props.contributeRequest;
+});
+
+const contributeAssets = async () => {
+  const result = await moduleStore.CONTRIBUTE(props.contributeRequest);
+  if (result.result.success) {
+    emits("contributeSuccess");
+    close();
+    await moduleStore.LOAD_LOCAL_MODULES();
+  }
+};
+</script>

app/web/src/components/AssetListItem.vue

@@ -54,6 +54,7 @@ import { TreeNode, Icon } from "@si/vue-lib/design-system";
 import clsx from "clsx";
 import { SchemaVariant } from "@/api/sdf/dal/schema";
 import { useAssetStore, schemaVariantDisplayName } from "@/store/asset.store";
+import { useModuleStore } from "@/store/module.store";
 import EditingPill from "./EditingPill.vue";
 
 const props = defineProps({
@@ -62,10 +63,12 @@ const props = defineProps({
 });
 
 const assetStore = useAssetStore();
+const moduleStore = useModuleStore();
+
 const { selectedSchemaVariants: selectedAssets } = storeToRefs(assetStore);
 
 const canUpdate = computed(
-  () => !!assetStore.upgradeableModules[props.a.schemaVariantId],
+  () => !!moduleStore.upgradeableModules[props.a.schemaVariantId],
 );
 
 const onClick = (e: MouseEvent) => {