Merge pull request #6624 from FlowFuse/chore/extract-immersive-editor-components-into-a-global-namespace

Relocate immersive editor components to a common namespace

Author: cstns

…e/Editor/components/drawer/ResizeBar.vue frontend/src/components/ResizeBar.vuefrontend/src/pages/instance/Editor/components/drawer/ResizeBar.vue renamed to frontend/src/components/ResizeBar.vue frontend/src/pages/instance/Editor/components/drawer/ResizeBar.vue renamed to frontend/src/components/ResizeBar.vue

@@ -65,7 +65,7 @@ import { mapGetters } from 'vuex'
 
 import { useResizingHelper } from '../../composables/ResizingHelper.js'
 
-import ResizeBar from '../../pages/instance/Editor/components/drawer/ResizeBar.vue'
+import ResizeBar from '../ResizeBar.vue'
 
 import CapabilitiesSelector from './components/CapabilitiesSelector.vue'
 import IncludeSelectionButton from './components/IncludeSelectionButton.vue'

frontend/src/components/expert/ExpertChatInput.vue

@@ -8,7 +8,7 @@
         type="button"
         @click="$emit('toggle')"
     >
-        <img src="../../../../images/icons/ff-minimal-grey.svg" alt="FlowFuse logo">
+        <img src="../../images/icons/ff-minimal-grey.svg" alt="FlowFuse logo">
         <ChevronRightIcon class="ff-btn--icon" />
     </button>
 </template>

…ance/Editor/components/DrawerTrigger.vue …nents/immersive-editor/DrawerTrigger.vuefrontend/src/pages/instance/Editor/components/DrawerTrigger.vue renamed to frontend/src/components/immersive-editor/DrawerTrigger.vue frontend/src/pages/instance/Editor/components/DrawerTrigger.vue renamed to frontend/src/components/immersive-editor/DrawerTrigger.vue

@@ -37,7 +37,7 @@ const States = {
     STOPPING: 'stopping'
 }
 export default {
-    name: 'EditorWrapper',
+    name: 'HostedInstanceEditorWrapper',
     components: { LoadingScreenWrapper },
     inject: ['$services'],
     props: {
@@ -116,18 +116,3 @@ export default {
     }
 }
 </script>
-
-<style scoped lang="scss">
-.editor-wrapper {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  justify-content: center;
-}
-.editor-wrapper .status-wrapper {
-    margin-top: -64px;
-}
-</style>

…ance/Editor/components/EditorWrapper.vue …e-editor/HostedInstanceEditorWrapper.vuefrontend/src/pages/instance/Editor/components/EditorWrapper.vue renamed to frontend/src/components/immersive-editor/HostedInstanceEditorWrapper.vue frontend/src/pages/instance/Editor/components/EditorWrapper.vue renamed to frontend/src/components/immersive-editor/HostedInstanceEditorWrapper.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import InstanceStatusBadge from '../../components/InstanceStatusBadge.vue'
+import InstanceStatusBadge from '../../pages/instance/components/InstanceStatusBadge.vue'
 
 export default {
     name: 'LoadingScreenWrapper',
@@ -66,7 +66,7 @@ export default {
         },
         animationData () {
             try {
-                return require(`../../../../images/lottie/immersive-editor-loading-states/${this.computedState}.json`)
+                return require(`../../images/lottie/immersive-editor-loading-states/${this.computedState}.json`)
             } catch (error) {
                 return null
             }

…itor/components/LoadingScreenWrapper.vue …mmersive-editor/LoadingScreenWrapper.vuefrontend/src/pages/instance/Editor/components/LoadingScreenWrapper.vue renamed to frontend/src/components/immersive-editor/LoadingScreenWrapper.vue frontend/src/pages/instance/Editor/components/LoadingScreenWrapper.vue renamed to frontend/src/components/immersive-editor/LoadingScreenWrapper.vue

@@ -72,7 +72,10 @@ import { ArrowLeftIcon, XIcon } from '@heroicons/vue/solid'
 import { mapActions, mapGetters } from 'vuex'
 
 import InstanceStatusPolling from '../../../components/InstanceStatusPolling.vue'
+import ResizeBar from '../../../components/ResizeBar.vue'
 import ExpertTabIcon from '../../../components/icons/ff-minimal-grey.js'
+import DrawerTrigger from '../../../components/immersive-editor/DrawerTrigger.vue'
+import EditorWrapper from '../../../components/immersive-editor/HostedInstanceEditorWrapper.vue'
 import InstanceActionsButton from '../../../components/instance/ActionButton.vue'
 import { useDrawerHelper } from '../../../composables/DrawerHelper.js'
 import usePermissions from '../../../composables/Permissions.js'
@@ -85,10 +88,6 @@ import { Roles } from '../../../utils/roles.js'
 import ConfirmInstanceDeleteDialog from '../Settings/dialogs/ConfirmInstanceDeleteDialog.vue'
 import DashboardLink from '../components/DashboardLink.vue'
 
-import DrawerTrigger from './components/DrawerTrigger.vue'
-import EditorWrapper from './components/EditorWrapper.vue'
-import ResizeBar from './components/drawer/ResizeBar.vue'
-
 // Drawer size constraints
 const DRAWER_MIN_WIDTH = 310 // Minimum drawer width in pixels
 const DRAWER_DEFAULT_WIDTH = 550 // Default drawer width in pixels