feature(explorer): menu item to 'view raw' (yaml and basic edit)

equinor · May 2, 2024 · a1a9509 · a1a9509
1 parent af27b61
commit a1a9509
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 10 deletions.
diff --git a/packages/dm-core-plugins/src/explorer/ExplorerPlugin.tsx b/packages/dm-core-plugins/src/explorer/ExplorerPlugin.tsx
@@ -9,14 +9,25 @@ import { Progress } from '@equinor/eds-core-react'
 import { useState } from 'react'
 import Sidebar from './components/Sidebar'
 import NodeRightClickMenu from './components/context-menu/NodeRightClickMenu'
+import { default_raw_view_ui_recipe_config } from './constants'
 
 export default () => {
   const { treeNodes, loading } = useApplication()
   const [selectedType, setSelectedType] = useState<string>()
+  const [asRawView, setAsRawView] = useState<boolean>(false)
   const [selectedEntity, setSelectedEntity] = useState<string>()
   const [nodeDimensions, setNodeDimensions] = useState<string | undefined>(
     undefined
   )
+  const setRawView = (type: string, id: string) => {
+    setSelectedEntity(id)
+    setSelectedType(type)
+    setAsRawView(true)
+  }
+  const { getUiPlugin } = useApplication()
+  const TabsPlugin = getUiPlugin(
+    '@development-framework/dm-core-plugins/view_selector/tabs'
+  )
   return (
     <div className='flex-layout-container flex-row h-full'>
       {loading ? (
@@ -29,21 +40,32 @@ export default () => {
             nodes={treeNodes}
             onSelect={(node: TreeNode) => {
               if (node.type === EBlueprint.PACKAGE) return
+              setAsRawView(false)
               setSelectedType(node.type)
               setSelectedEntity(node.nodeId)
               setNodeDimensions(Array.isArray(node.entity) ? '*' : undefined)
             }}
-            NodeWrapper={NodeRightClickMenu}
+            NodeWrapper={(props) =>
+              NodeRightClickMenu({ ...props, setRawView: setRawView })
+            }
           />
         </Sidebar>
       )}
       {selectedType && selectedEntity && (
         <div className='flex-layout-container scroll'>
-          <EntityView
-            type={selectedType}
-            idReference={selectedEntity}
-            dimensions={nodeDimensions}
-          />
+          {asRawView ? (
+            <TabsPlugin
+              type={selectedType}
+              idReference={selectedEntity}
+              config={default_raw_view_ui_recipe_config}
+            />
+          ) : (
+            <EntityView
+              type={selectedType}
+              idReference={selectedEntity}
+              dimensions={nodeDimensions}
+            />
+          )}
         </div>
       )}
     </div>

diff --git a/packages/dm-core-plugins/src/explorer/components/context-menu/NodeRightClickMenu.tsx b/packages/dm-core-plugins/src/explorer/components/context-menu/NodeRightClickMenu.tsx
@@ -16,8 +16,10 @@ import { getMenuItems } from './getMenuItems'
 export const STANDARD_DIALOG_WIDTH = '100%'
 export const STANDARD_DIALOG_HEIGHT = '300px'
 
-const NodeRightClickMenu = (props: TNodeWrapperProps) => {
-  const { node, children, setNodeOpen } = props
+const NodeRightClickMenu = (
+  props: TNodeWrapperProps & { setRawView: (type: string, id: string) => void }
+) => {
+  const { node, children, setNodeOpen, setRawView } = props
   const [dialogId, setDialogId] = useState<EDialog | undefined>()
   const [showMenu, setShowMenu] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
@@ -42,7 +44,7 @@ const NodeRightClickMenu = (props: TNodeWrapperProps) => {
         placement='bottom-start'
         matchAnchorWidth={true}
       >
-        {getMenuItems(node, setDialogId)}
+        {getMenuItems(node, setDialogId, setRawView)}
       </Menu>
 
       {dialogId === EDialog.NewFolder && (

diff --git a/packages/dm-core-plugins/src/explorer/components/context-menu/getMenuItems.tsx b/packages/dm-core-plugins/src/explorer/components/context-menu/getMenuItems.tsx
@@ -8,7 +8,8 @@ import { EDialog } from '../../types'
 // See https://github.com/equinor/design-system/issues/2659
 export function getMenuItems(
   node: TreeNode,
-  setDialogId: (id: EDialog | undefined) => void
+  setDialogId: (id: EDialog | undefined) => void,
+  setRawView: (type: string, id: string) => void
 ): React.ReactElement[] {
   const menuItems = []
   const getMenuItem = (id: EDialog, text: string) => {
@@ -54,6 +55,14 @@ export function getMenuItems(
 
   // Everything besides dataSources can be deleted, copied, and edited AccessControl
   if (node.type !== 'dataSource') {
+    menuItems.push(
+      <Menu.Item
+        key={'viewRaw'}
+        onClick={() => setRawView(node.type, node.nodeId)}
+      >
+        View raw
+      </Menu.Item>
+    )
     menuItems.push(getMenuItem(EDialog.Delete, 'Delete'))
     menuItems.push(getMenuItem(EDialog.EditACL, 'Change permissions'))
     menuItems.push(getMenuItem(EDialog.CopyLink, 'Copy or link'))

diff --git a/packages/dm-core-plugins/src/explorer/constants.ts b/packages/dm-core-plugins/src/explorer/constants.ts
@@ -0,0 +1,35 @@
+export const default_raw_view_ui_recipe_config = {
+  type: 'dmss://system/Plugins/dm-core-plugins/view_selector/ViewSelectorConfig',
+  items: [
+    {
+      type: 'dmss://system/Plugins/dm-core-plugins/view_selector/ViewSelectorItem',
+      label: 'Yaml',
+      viewConfig: {
+        type: 'dmss://system/SIMOS/InlineRecipeViewConfig',
+        recipe: {
+          type: 'dmss://system/SIMOS/UiRecipe',
+          name: 'YAML',
+          description: 'YAML representation',
+          plugin: '@development-framework/dm-core-plugins/yaml',
+        },
+        scope: 'self',
+        eds_icon: 'code',
+      },
+    },
+    {
+      type: 'dmss://system/Plugins/dm-core-plugins/view_selector/ViewSelectorItem',
+      label: 'Edit',
+      viewConfig: {
+        type: 'dmss://system/SIMOS/InlineRecipeViewConfig',
+        recipe: {
+          type: 'dmss://system/SIMOS/UiRecipe',
+          name: 'Edit',
+          description: 'Default edit',
+          plugin: '@development-framework/dm-core-plugins/form',
+        },
+        scope: 'self',
+        eds_icon: 'edit',
+      },
+    },
+  ],
+}