Feature: action framework UI prototype

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/cache@v1
+      - uses: actions/cache@v4
         with:
           path: ~/.cache/yarn
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -31,7 +31,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/cache@v1
+      - uses: actions/cache
         with:
           path: ~/.cache/yarn
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

.github/workflows/deploy-preview.yml

@@ -8,7 +8,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/cache@v1
+      - uses: actions/cache@v4 # Updated from v1 to v4
         with:
           path: ~/.cache/yarn
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -42,7 +42,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/cache@v1
+      - uses: actions/cache@v4 # Updated from v1 to v4
         with:
           path: ~/.cache/yarn
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

apps/sensenet/src/components/context-menu/use-context-menu-actions.ts

@@ -196,8 +196,19 @@ export function useContextMenuActions(
           },
         })
         break
+      /*Az az új hozzáállás, hogy ha nem találja meg az action-t akkor jöjjön be az operation kezelő.
+        Ezt majd le kell!! cserélni úgy, hogy vizsgálva legyen a Type-ja*/
       default:
-        logger.warning({ message: `${actionName} is not implemented yet. Try to use it from command palette.` })
+        openDialog({
+          name: 'operation',
+          props: {
+            content,
+            OperationName: actionName,
+          },
+          dialogProps: { classes: { paper: globalClasses.pickerDialog } },
+        })
+        break
+      // logger.warning({ message: `${actionName} is not implemented yet. Try to use it from command palette.` })
     }
   }
 

apps/sensenet/src/components/dialogs/dialog-provider.tsx

@@ -13,6 +13,7 @@ import {
   DateRangePickerProps,
   DeleteContentDialogProps,
   ExecuteActionDialogProps,
+  OperationsDialogProps,
   PermissionEditorDialogProps,
   ReferenceContentListProps,
   RestoreProps,
@@ -24,6 +25,7 @@ export type DialogWithProps = (
   | { name: 'delete'; props: DeleteContentDialogProps }
   | { name: 'error'; props: ErrorBoundaryState }
   | { name: 'copy-move'; props: CopyMoveDialogProps }
+  | { name: 'operation'; props: OperationsDialogProps }
   | { name: 'check-in'; props: CheckInProps }
   | { name: 'are-you-sure'; props: AreYouSureProps }
   | { name: 'approve'; props: ApproveProps }

apps/sensenet/src/components/dialogs/dialogs.tsx

@@ -24,6 +24,7 @@ const ChangePasswordDialog = lazy(() => import('./change-password'))
 const DateRangePicker = lazy(() => import('./date-range-picker'))
 const AddDeleteUserGroups = lazy(() => import('./add-delete-user-groups'))
 const ColumnSettings = lazy(() => import('./column-settings'))
+const Operations = lazy(() => import('./operations'))
 
 function dialogRenderer(dialog: DialogWithProps) {
   switch (dialog.name) {
@@ -69,6 +70,8 @@ function dialogRenderer(dialog: DialogWithProps) {
       return <DateRangePicker {...dialog.props} />
     case 'column-settings':
       return <ColumnSettings {...dialog.props} />
+    case 'operation':
+      return <Operations {...dialog.props} />
     default:
       return null
   }

apps/sensenet/src/components/dialogs/index.ts

@@ -19,3 +19,4 @@ export * from './restore'
 export * from './save-query'
 export * from './add-delete-user-groups'
 export * from './column-settings'
+export * from './operations'

apps/sensenet/src/components/dialogs/operations.tsx

@@ -0,0 +1,166 @@
+import { Button, createStyles, DialogActions, DialogContent, makeStyles, TextField } from '@material-ui/core'
+import { GenericContent } from '@sensenet/default-content-types'
+import { useLogger, useRepository } from '@sensenet/hooks-react'
+import React, { useEffect, useRef, useState } from 'react'
+import { useCurrentUser } from '../../context'
+import { useGlobalStyles } from '../../globalStyles'
+import { useLocalization } from '../../hooks'
+import { Icon } from '../Icon'
+import { DialogTitle, useDialog } from '.'
+
+export interface OperationsDialogProps {
+  content: GenericContent
+  OperationName: string
+}
+/*Ezt itt jól ki kell dolgozni!!! nem végleges csak demora van egyszerűsítve
+  Valószínüleg nem is itt lesz a végleges helye hanem ott ahol a GenericContent van
+*/
+type UIDescription = {
+  title?: string
+  submitTitle?: string
+  elements: Array<{
+    name?: string
+    description?: string
+    inputProps: React.HTMLProps<HTMLInputElement>
+  }>
+}
+const useStyles = makeStyles(() =>
+  createStyles({
+    form: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      rowGap: '30px',
+      '& :is(h3,p)': {
+        margin: '0 0',
+        fontWeight: 'normal',
+      },
+      '& input': {
+        padding: '0',
+      },
+      '& .input-container': {
+        width: '300px',
+      },
+    },
+  }),
+)
+
+export function OperationsDialog(props: OperationsDialogProps) {
+  const { closeLastDialog } = useDialog()
+  const currentUser = useCurrentUser()
+  const classes = useStyles()
+  const logger = useLogger('Operations')
+  const formRef = useRef<HTMLFormElement>(null)
+  const repository = useRepository()
+  const localization = useLocalization().operations
+  const globalClasses = useGlobalStyles()
+
+  const [UIDescription, setUIDescription] = useState<UIDescription>()
+
+  useEffect(() => {
+    console.log(props.OperationName)
+    const loadOperation = async () => {
+      try {
+        const result = await repository.executeAction<any, UIDescription>({
+          method: 'GET',
+          idOrPath: props.content.Path,
+          name: props.OperationName,
+        })
+        setUIDescription(result)
+      } catch (error) {
+        logger.error({ message: error.message })
+      }
+    }
+
+    loadOperation()
+  }, [logger, props.OperationName, props.content.Path, repository])
+
+  const submitAction = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!formRef.current) return
+
+    const formData = new FormData(formRef.current)
+    const formJson: Record<string, any> = {}
+
+    formData.forEach((value, key) => {
+      formJson[key] = value
+    })
+
+    try {
+      await repository.executeAction<any, UIDescription>({
+        method: 'POST',
+        idOrPath: props.content.Path,
+        name: props.OperationName,
+        body: formJson,
+      })
+
+      logger.information({ message: localization.success })
+
+      closeLastDialog()
+    } catch (error) {
+      logger.error({ message: error.message })
+    }
+  }
+
+  return (
+    <>
+      <DialogTitle>
+        <div className={globalClasses.centered}>
+          <Icon
+            style={{
+              margin: '0 1em 0 0',
+              transition: 'filter linear 1s, opacity linear 1.5s',
+            }}
+            item={currentUser}
+          />
+          {UIDescription?.title || localization.title}
+        </div>
+      </DialogTitle>
+      <>
+        <DialogContent>
+          <form
+            ref={formRef}
+            className={classes.form}
+            id="operation-form"
+            onSubmit={(e) => {
+              submitAction(e)
+            }}>
+            {UIDescription?.elements.map((field, index) => {
+              const { inputProps, description, name } = field
+
+              return (
+                <div className="input-container" key={index}>
+                  <h3>{name}</h3>
+                  <p>{description}</p>
+
+                  <TextField
+                    name={inputProps.name}
+                    required={Boolean(inputProps.required)}
+                    fullWidth
+                    inputProps={inputProps}
+                  />
+                </div>
+              )
+            })}
+          </form>
+        </DialogContent>
+        <DialogActions>
+          <Button aria-label={localization.cancel} className={globalClasses.cancelButton} onClick={closeLastDialog}>
+            {localization.cancel}
+          </Button>
+          <Button
+            aria-label={localization.submit}
+            form="operation-form"
+            color="primary"
+            variant="contained"
+            type="submit"
+            autoFocus={true}>
+            {UIDescription?.submitTitle || localization.submit}
+          </Button>
+        </DialogActions>
+      </>
+    </>
+  )
+}
+
+export default OperationsDialog

apps/sensenet/src/localization/default.ts

@@ -685,6 +685,12 @@ const values = {
     trash: 'Trash',
     '/Root/ContentTemplates': 'Content Templates',
   },
+  operations: {
+    title: 'Action Framkework Demo',
+    submit: 'Upload',
+    cancel: 'Cancel',
+    success: 'Succesfull Operation!',
+  },
 }
 
 export default values