Removed components and put visual script behind feature flag (#10764)

* Removed components and put visual studio behind feature flag

* Add reactor

* getMutableState

* Tada

* Hide empty categories

packages/editor/src/services/ComponentShelfCategoriesState.ts

@@ -23,6 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import { FeatureFlags } from '@etherealengine/common/src/constants/FeatureFlags'
 import { Component } from '@etherealengine/ecs'
 import { VisualScriptComponent } from '@etherealengine/engine'
 import { PositionalAudioComponent } from '@etherealengine/engine/src/audio/components/PositionalAudioComponent'
@@ -43,22 +44,18 @@ import { NewVolumetricComponent } from '@etherealengine/engine/src/scene/compone
 import { ParticleSystemComponent } from '@etherealengine/engine/src/scene/components/ParticleSystemComponent'
 import { PortalComponent } from '@etherealengine/engine/src/scene/components/PortalComponent'
 import { PrimitiveGeometryComponent } from '@etherealengine/engine/src/scene/components/PrimitiveGeometryComponent'
-import { ReflectionProbeComponent } from '@etherealengine/engine/src/scene/components/ReflectionProbeComponent'
 import { RenderSettingsComponent } from '@etherealengine/engine/src/scene/components/RenderSettingsComponent'
-import { SDFComponent } from '@etherealengine/engine/src/scene/components/SDFComponent'
 import { ScenePreviewCameraComponent } from '@etherealengine/engine/src/scene/components/ScenePreviewCamera'
 import { SceneSettingsComponent } from '@etherealengine/engine/src/scene/components/SceneSettingsComponent'
-import { ScreenshareTargetComponent } from '@etherealengine/engine/src/scene/components/ScreenshareTargetComponent'
 import { ShadowComponent } from '@etherealengine/engine/src/scene/components/ShadowComponent'
 import { SkyboxComponent } from '@etherealengine/engine/src/scene/components/SkyboxComponent'
 import { SpawnPointComponent } from '@etherealengine/engine/src/scene/components/SpawnPointComponent'
-import { SplineComponent } from '@etherealengine/engine/src/scene/components/SplineComponent'
-import { SplineTrackComponent } from '@etherealengine/engine/src/scene/components/SplineTrackComponent'
 import { TextComponent } from '@etherealengine/engine/src/scene/components/TextComponent'
 import { VariantComponent } from '@etherealengine/engine/src/scene/components/VariantComponent'
 import { VideoComponent } from '@etherealengine/engine/src/scene/components/VideoComponent'
 import { VolumetricComponent } from '@etherealengine/engine/src/scene/components/VolumetricComponent'
-import { defineState } from '@etherealengine/hyperflux'
+import useFeatureFlags from '@etherealengine/engine/src/useFeatureFlags'
+import { defineState, getMutableState } from '@etherealengine/hyperflux'
 import {
   AmbientLightComponent,
   DirectionalLightComponent,
@@ -73,6 +70,7 @@ import { RigidBodyComponent } from '@etherealengine/spatial/src/physics/componen
 import { TriggerComponent } from '@etherealengine/spatial/src/physics/components/TriggerComponent'
 import { PostProcessingComponent } from '@etherealengine/spatial/src/renderer/components/PostProcessingComponent'
 import { LookAtComponent } from '@etherealengine/spatial/src/transform/components/LookAtComponent'
+import { useEffect } from 'react'
 
 export const ComponentShelfCategoriesState = defineState({
   name: 'ee.editor.ComponentShelfCategories',
@@ -105,27 +103,24 @@ export const ComponentShelfCategoriesState = defineState({
         DirectionalLightComponent,
         HemisphereLightComponent
       ],
-      FX: [
-        LoopAnimationComponent,
-        ShadowComponent,
-        ParticleSystemComponent,
-        EnvmapComponent,
-        SDFComponent,
-        PostProcessingComponent,
-        ReflectionProbeComponent
-      ],
-      Scripting: [VisualScriptComponent],
+      FX: [LoopAnimationComponent, ShadowComponent, ParticleSystemComponent, EnvmapComponent, PostProcessingComponent],
+      Scripting: [],
       Settings: [SceneSettingsComponent, RenderSettingsComponent, MediaSettingsComponent, CameraSettingsComponent],
-      Visual: [
-        EnvMapBakeComponent,
-        ScenePreviewCameraComponent,
-        SkyboxComponent,
-        SplineTrackComponent,
-        SplineComponent,
-        TextComponent,
-        ScreenshareTargetComponent,
-        LookAtComponent
-      ]
+      Visual: [EnvMapBakeComponent, ScenePreviewCameraComponent, SkyboxComponent, TextComponent, LookAtComponent]
     } as Record<string, Component[]>
+  },
+  reactor: () => {
+    const [visualScriptPanelEnabled] = useFeatureFlags([FeatureFlags.Studio.Panel.VisualScript])
+    const cShelfState = getMutableState(ComponentShelfCategoriesState)
+    useEffect(() => {
+      if (visualScriptPanelEnabled) {
+        cShelfState.Scripting.merge([VisualScriptComponent])
+        return () => {
+          cShelfState.Scripting.set((curr) => {
+            return curr.splice(curr.findIndex((item) => item.name == VisualScriptComponent.name))
+          })
+        }
+      }
+    }, [visualScriptPanelEnabled])
   }
 })

packages/ui/src/components/editor/panels/Properties/elementList/index.tsx

@@ -145,7 +145,7 @@ const useComponentShelfCategories = (search: string) => {
   useMutableState(ComponentShelfCategoriesState).value
 
   if (!search) {
-    return Object.entries(getState(ComponentShelfCategoriesState))
+    return Object.entries(getState(ComponentShelfCategoriesState)).filter(([_, items]) => !!items.length)
   }
 
   const searchString = search.toLowerCase()