merge: #3274

3274: Toggle DiagramNode Icons r=stack72 a=stack72 Co-authored-by: stack72 <[email protected]>
systeminit · Feb 6, 2024 · 7863dea · 7863dea
2 parents 9e2add3 + ddeb9a4
commit 7863dea
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/app/web/src/components/ModelingDiagram/DiagramGroup.vue b/app/web/src/components/ModelingDiagram/DiagramGroup.vue
@@ -233,9 +233,9 @@
         }"
       />
 
-      <!-- package/type icon -->
+      <!--       package/type icon-->
       <DiagramIcon
-        v-if="group.def.typeIcon"
+        v-if="group.def.typeIcon && !featureFlagsStore.REMOVE_COMPONENT_ICONS"
         :icon="highlightParent ? 'frame' : group.def.typeIcon"
         :color="colors.icon"
         :size="GROUP_HEADER_ICON_SIZE"
@@ -249,7 +249,7 @@
       <v-text
         ref="titleTextRef"
         :config="{
-          x: 42,
+          x: getTextPosition(),
           y: 2,
           verticalAlign: 'top',
           align: 'left',
@@ -270,7 +270,7 @@
       <v-text
         ref="titleTextRef"
         :config="{
-          x: 42,
+          x: getTextPosition(),
           y: 20,
           verticalAlign: 'top',
           align: 'left',
@@ -402,6 +402,7 @@ import {
   SOCKET_GAP,
   SOCKET_MARGIN_TOP,
 } from "@/components/ModelingDiagram/diagram_constants";
+import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import {
   DiagramDrawEdgeState,
   DiagramEdgeData,
@@ -438,6 +439,7 @@ const props = defineProps({
 });
 
 const diagramContext = useDiagramContext();
+const featureFlagsStore = useFeatureFlagsStore();
 
 const componentId = computed(() => props.group.def.componentId);
 const parentComponentId = computed(() => _.last(props.group.def.ancestorIds));
@@ -628,4 +630,12 @@ const highlightAsNewParent = computed(() => {
       props.group.uniqueKey
   );
 });
+
+function getTextPosition() {
+  if (featureFlagsStore.REMOVE_COMPONENT_ICONS) {
+    return 2;
+  }
+
+  return 24;
+}
 </script>
diff --git a/app/web/src/components/ModelingDiagram/DiagramNode.vue b/app/web/src/components/ModelingDiagram/DiagramNode.vue
@@ -41,7 +41,7 @@
 
       <!-- package/type icon -->
       <DiagramIcon
-        v-if="node.def.typeIcon"
+        v-if="node.def.typeIcon && !featureFlagsStore.REMOVE_COMPONENT_ICONS"
         :icon="node.def.typeIcon"
         :color="colors.icon"
         :size="22"
@@ -54,7 +54,7 @@
       <v-text
         ref="titleTextRef"
         :config="{
-          x: -halfWidth + 24 + 8,
+          x: -halfWidth + getTextPosition() + 8,
           y: 4,
           verticalAlign: 'top',
           align: 'left',
@@ -71,7 +71,7 @@
       <v-text
         ref="subtitleTextRef"
         :config="{
-          x: -halfWidth + 24 + 8,
+          x: -halfWidth + getTextPosition() + 8,
           y: headerTextHeight + 6,
           verticalAlign: 'top',
           align: 'left',
@@ -277,6 +277,7 @@ import { Tween } from "konva/lib/Tween";
 import { Vector2d } from "konva/lib/types";
 import { getToneColorHex, useTheme } from "@si/vue-lib/design-system";
 import { useComponentsStore } from "@/store/components.store";
+import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import {
   DiagramEdgeData,
   DiagramElementUniqueKey,
@@ -320,6 +321,7 @@ const emit = defineEmits<{
 }>();
 
 const componentsStore = useComponentsStore();
+const featureFlagsStore = useFeatureFlagsStore();
 const componentId = computed(() => props.node.def.componentId);
 
 const diffIconHover = ref(false);
@@ -502,4 +504,12 @@ function onClick(detailsTabSlug: string) {
     detailsTab: detailsTabSlug,
   });
 }
+
+function getTextPosition() {
+  if (featureFlagsStore.REMOVE_COMPONENT_ICONS) {
+    return 2;
+  }
+
+  return 24;
+}
 </script>
diff --git a/app/web/src/store/feature_flags.store.ts b/app/web/src/store/feature_flags.store.ts
@@ -16,6 +16,7 @@ const FLAG_MAPPING = {
   OVERRIDE_SCHEMA: "override_schema",
   JOI_VALIDATIONS: "joi_validations",
   SHOW_EDGES_ON_SELECT: "show_edges_on_select",
+  REMOVE_COMPONENT_ICONS: "remove_component_icons",
 };
 
 type FeatureFlags = keyof typeof FLAG_MAPPING;