merge: #3465

3465: feat(web,sdf): Debug component id and schema variant id on UI r=vbustamante a=vbustamante

<img width="404" alt="image" src="https://github.com/systeminit/si/assets/6564471/38179a3d-d6c1-42eb-9866-7b3f86d5be47">


Co-authored-by: Victor Bustamante <victor@systeminit.com>

Author: si-bors-ng[bot]

app/web/src/components/ComponentDebugDetails.vue

@@ -12,78 +12,78 @@
       <div class="border border-neutral-500 m-xs">
         <!-- Component -->
         <Collapsible
-          label="Component"
           defaultOpen
-          textSize="lg"
           extraBorderAtBottomOfContent
+          label="Component"
+          textSize="lg"
         >
           <dl class="border-l-2 p-xs flex flex-col gap-xs">
-            <DebugViewItem title="Id" :data="componentId" />
+            <DebugViewItem :data="componentId" title="Id" />
             <DebugViewItem
-              title="Variant Id"
               :data="debugData.schemaVariantId"
+              title="Variant Id"
             />
           </dl>
         </Collapsible>
 
         <!-- Attributes -->
         <Collapsible
-          label="Attributes"
           :defaultOpen="false"
           contentAs="ul"
+          label="Attributes - Not Reimplemented"
           textSize="lg"
         >
           <Collapsible
             v-for="attribute in debugData.attributes"
             :key="attribute.path"
-            :label="attribute.path"
             :defaultOpen="false"
+            :label="attribute.path"
             as="li"
-            xPadding="double"
             contentClasses="px-sm"
             extraBorderAtBottomOfContent
+            xPadding="double"
           >
             <AttributeDebugView :data="attribute.debugData" />
           </Collapsible>
         </Collapsible>
 
         <!-- Input Sockets -->
         <Collapsible
-          label="Input Sockets"
           :defaultOpen="false"
           contentAs="ul"
+          label="Input Sockets - Not Reimplemented"
           textSize="lg"
         >
           <Collapsible
             v-for="attribute in debugData.inputSockets"
             :key="attribute.name"
-            xPadding="double"
-            contentClasses="px-sm"
-            extraBorderAtBottomOfContent
-            :label="attribute.name"
             :defaultOpen="false"
+            :label="attribute.name"
             as="li"
+            contentClasses="px-sm"
+            extraBorderAtBottomOfContent
+            xPadding="double"
           >
             <AttributeDebugView :data="attribute.debugData" />
           </Collapsible>
         </Collapsible>
 
         <!-- Output Sockets -->
         <Collapsible
-          label="Output Sockets"
           :defaultOpen="false"
           contentAs="ul"
+          label="Output Sockets - Not Reimplemented"
           textSize="lg"
         >
           <Collapsible
             v-for="attribute in debugData.outputSockets"
             :key="attribute.name"
-            xPadding="double"
-            contentClasses="px-sm"
-            extraBorderAtBottomOfContent
-            :label="attribute.name"
             :defaultOpen="false"
+            :label="attribute.name"
             as="li"
+            contentClasses="px-sm"
+            extraBorderAtBottomOfContent
+            xPadding="double"
           >
             <AttributeDebugView :data="attribute.debugData" />
           </Collapsible>
@@ -93,7 +93,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import {
   Collapsible,
   ErrorMessage,

lib/sdf-server/src/server/service/component.rs

@@ -31,6 +31,7 @@ pub mod list_qualifications;
 // pub mod list_resources;
 // pub mod refresh;
 // pub mod resource_domain_diff;
+pub mod debug;
 pub mod get_code;
 pub mod set_type;
 
@@ -173,8 +174,8 @@ pub fn routes() -> Router<AppState> {
             post(delete_property_editor_value::delete_property_editor_value),
         )
         .route("/set_type", post(set_type::set_type))
-    // .route("/refresh", post(refresh::refresh))
-    // .route("/resource_domain_diff", get(resource_domain_diff::get_diff))
-    // .route("/debug", get(debug::debug_component))
+        // .route("/refresh", post(refresh::refresh))
+        // .route("/resource_domain_diff", get(resource_domain_diff::get_diff))
+        .route("/debug", get(debug::debug_component))
     // .route("/json", get(json::json))
 }