Merge/develop into sn auth extraimprovements (#1649)

* feature: schema selector field #2217

* feature: add extra class

* refactor: revert package manager

* remove package mamnager

* fix: undefined on no message

* refactor: modify comment

* change pre-comit hook

* refacotr builds

* revert  ci cahnges

* remove wake up notifyier

* remove story book ci

* fature: add link to refences

* fix: remove console log

* feature: loading state to operation

* merge: integrate develop into sn-auth-extraimprovements

- package.json: add packageManager and empty dependencies from develop
- operations dialog: combine null-safe elements?.map with InfluenceField support
- default-item-template: take develop version, export getAppPathAndContent/buildCustomPath helpers
- reference-grid: keep ag-grid table view, add clickable Path column navigation, accept paths/dialogTitleComponent props from develop

---------

Co-authored-by: Hassan Adam <hassana@sensenet.com>

Author: VargaJoe

.github/workflows/deploy-preview.yml

@@ -27,10 +27,6 @@ jobs:
         run: yarn snapp build
         env:
           RELATIVE_CI_KEY: ${{ secrets.RELATIVE_CI_KEY }}
-
-      - name: wake up deploy notifier
-        run: yarn wait-on https://sensenet-sn-deploy-notifier.glitch.me/ -l -t 300000 -i 10000
-
       - name: Publish
         run: npx netlify-cli@v2.41.0 deploy --dir=./apps/sensenet/build --message ${{ github.event.pull_request.number }}
         env:

.husky/pre-commit

@@ -1,14 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# Detect /dev/tty using readlink and fd/2
-tty=$(readlink /proc/$$/fd/2)
-
-# Use the detected tty for redirection
-if [[ -n "$tty" ]]; then
-    exec >"$tty" 2>&1
-else
-    echo "Could not detect /dev/tty"
-fi
-
 yarn lint-staged

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

@@ -24,7 +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'))
+const Operations = lazy(() => import('./operations/operations'))
 
 function dialogRenderer(dialog: DialogWithProps) {
   switch (dialog.name) {

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

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

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

@@ -0,0 +1,41 @@
+import React from 'react'
+
+export type TInfluenceField = {
+  name?: string
+  description?: string
+  radioOptions: Array<{ optionTitle: string; influencedFieldId: string; value: string }>
+}
+
+export const InfluenceField: React.FC<TInfluenceField> = ({ name, description, radioOptions }) => {
+  return (
+    <div className="input-container influence-field">
+      <h3>{name}</h3>
+      <p>{description}</p>
+
+      {radioOptions.map((option) => {
+        const { optionTitle, value, influencedFieldId } = option
+
+        return (
+          <>
+            <input
+              type="radio"
+              id={optionTitle}
+              name={name}
+              value={optionTitle}
+              onClick={() => {
+                const element = document.getElementById(influencedFieldId) as HTMLInputElement
+
+                if (!element) {
+                  return
+                }
+
+                element.value = value
+              }}
+            />
+            <label htmlFor={optionTitle}>{optionTitle}</label>
+          </>
+        )
+      })}
+    </div>
+  )
+}

…et/src/components/dialogs/operations.tsx …onents/dialogs/operations/operations.tsxapps/sensenet/src/components/dialogs/operations.tsx renamed to apps/sensenet/src/components/dialogs/operations/operations.tsx apps/sensenet/src/components/dialogs/operations.tsx renamed to apps/sensenet/src/components/dialogs/operations/operations.tsx

@@ -1,30 +1,43 @@
-import { Button, createStyles, DialogActions, DialogContent, makeStyles, TextField } from '@material-ui/core'
+import {
+  Button,
+  CircularProgress,
+  createStyles,
+  DialogActions,
+  DialogContent,
+  makeStyles,
+  TextField,
+} from '@material-ui/core'
 import { GenericContent } from '@sensenet/default-content-types'
 import { useLogger, useRepository, useSession } 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 '.'
-
+import { DialogTitle, useDialog } from '..'
+import { useCurrentUser } from '../../../context'
+import { useGlobalStyles } from '../../../globalStyles'
+import { useLocalization } from '../../../hooks'
+import { Icon } from '../../Icon'
+import { InfluenceField, TInfluenceField } from './influenceField'
 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 = {
+/*Ezt itt jól ki kell dolgozni!!! nem végleges csak demora van egyszerűsítve*/
+
+type baseDescriptionFields = {
   title?: string
   submitTitle?: string
-  elements: Array<{
-    name?: string
-    description?: string
-    inputProps: React.HTMLProps<HTMLInputElement>
-  }>
 }
 
+type simpleInputField = {
+  name?: string
+  description?: string
+  inputProps: React.HTMLProps<HTMLInputElement>
+}
+
+type UIDescription =
+  | baseDescriptionFields & {
+      elements: Array<simpleInputField | TInfluenceField>
+    }
+
 type OperationResult = {
   ToastMessage?: string
 }
@@ -61,6 +74,7 @@ export function OperationsDialog(props: OperationsDialogProps) {
   const globalClasses = useGlobalStyles()
 
   const [UIDescription, setUIDescription] = useState<UIDescription>()
+  const [isOperationSubmiting, setIsOperationSubmiting] = useState(false)
 
   useEffect(() => {
     const loadOperation = async () => {
@@ -80,6 +94,7 @@ export function OperationsDialog(props: OperationsDialogProps) {
   }, [logger, props.OperationName, props.content.Path, repository])
 
   const submitAction = async (e: React.FormEvent<HTMLFormElement>) => {
+    setIsOperationSubmiting(true)
     e.preventDefault()
     if (!formRef.current) return
 
@@ -98,13 +113,15 @@ export function OperationsDialog(props: OperationsDialogProps) {
         body: formJson,
       })
 
-      const success = `: ${result?.ToastMessage}` || ''
+      const success = result.ToastMessage ? `: ${result?.ToastMessage}` : ''
 
       logger.information({ message: `${localization.success}${success}` })
 
       closeLastDialog()
     } catch (error) {
       logger.error({ message: error.message })
+    } finally {
+      setIsOperationSubmiting(false)
     }
   }
 
@@ -132,6 +149,10 @@ export function OperationsDialog(props: OperationsDialogProps) {
               submitAction(e)
             }}>
             {UIDescription?.elements?.map((field, index) => {
+              if ('radioOptions' in field) {
+                return <InfluenceField {...field} key={index} />
+              }
+
               const { inputProps, description, name } = field
 
               return (
@@ -160,6 +181,8 @@ export function OperationsDialog(props: OperationsDialogProps) {
             color="primary"
             variant="contained"
             type="submit"
+            disabled={isOperationSubmiting}
+            endIcon={isOperationSubmiting && <CircularProgress size={20} />}
             autoFocus={true}>
             {UIDescription?.submitTitle || localization.submit}
           </Button>

apps/sensenet/src/components/field-controls/reference-grid.tsx

@@ -1,6 +1,7 @@
 import { ReactClientFieldSetting, ReferenceGrid as SnReferenceGrid } from '@sensenet/controls-react'
 import { clsx } from 'clsx'
 import React from 'react'
+import { PATHS } from '../../application-paths'
 import { useGlobalStyles } from '../../globalStyles'
 import { Icon } from '../Icon'
 
@@ -14,6 +15,7 @@ export const ReferenceGrid: React.FC<ReactClientFieldSetting> = (props) => {
         <Icon item={item} style={{ width: 'auto', height: 'auto', marginTop: 1, paddingTop: 1 }} />
       )}
       pickerClasses={{ cancelButton: globalClasses.cancelButton }}
+      paths={PATHS}
     />
   )
 }

package.json

@@ -77,5 +77,7 @@
       "eslint --ext .jsx,.js --cache --fix",
       "prettier --write"
     ]
-  }
+  },
+  "dependencies": {},
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx

@@ -1,15 +1,15 @@
+/* eslint-disable require-jsdoc */
 import {
   Avatar,
+  createStyles,
   Icon,
   IconButton,
   ListItem,
   ListItemAvatar,
   ListItemIcon,
   ListItemSecondaryAction,
   ListItemText,
-  Table,
-  TableBody,
-  TableCell,
+  makeStyles,
 } from '@material-ui/core'
 import { InsertDriveFile } from '@material-ui/icons'
 import { Repository } from '@sensenet/client-core'
@@ -18,6 +18,42 @@ import { GenericContent, Image, User } from '@sensenet/default-content-types'
 import React from 'react'
 import { renderIconDefault } from '../icon'
 
+export type PathConfig = {
+  appPath: string
+  snPath?: string
+}
+
+export type Paths = Record<string, PathConfig>
+
+export function getAppPathAndContent(PATHS: Paths, targetPath: string) {
+  const matches = Object.entries(PATHS)
+    .filter(([, config]) => config.snPath && targetPath.startsWith(config.snPath))
+    .sort((a, b) => b[1].snPath!.length - a[1].snPath!.length)
+
+  if (!matches[0]) return undefined
+
+  const [, config] = matches[0]
+  const contentePath = targetPath.substring(config.snPath!.length)
+
+  return {
+    appPath: config.appPath,
+    contentePath,
+  }
+}
+
+export function buildCustomPath(path: string, action: string | undefined, contentePath: string) {
+  const customPath = path
+    .replace(':browseType', 'explorer')
+    .replace('/:path', '') // Remove the path parameter
+    .replace(':action?', action || 'default')
+
+  const url = new URL(window.location.origin)
+  url.pathname = customPath
+  url.searchParams.set('content', contentePath)
+
+  return url.toString()
+}
+
 interface DefaultItemTemplateProps {
   content: GenericContent
   remove?: (id: number) => void
@@ -27,13 +63,29 @@ interface DefaultItemTemplateProps {
   repository?: Repository
   multiple: boolean
   renderIcon?: (name: string) => JSX.Element
+  paths: Paths
 }
 
+const useStyles = makeStyles(() =>
+  createStyles({
+    referenceItemText: {
+      textAlign: 'left',
+      paddingRight: 15,
+      cursor: 'pointer',
+      '&[data-clickable="true"]:hover': {
+        textDecoration: 'underline',
+      },
+    },
+  }),
+)
+
 /**
  * Represents a default renderer for reference grid row
  */
 export const DefaultItemTemplate: React.FC<DefaultItemTemplateProps> = (props) => {
-  const { content, repository } = props
+  const { content, repository, paths } = props
+
+  const classes = useStyles()
 
   const renderIcon = (item: GenericContent | User | Image) => {
     if (repository?.schemas.isContentFromType<User>(item, 'User')) {
@@ -111,26 +163,24 @@ export const DefaultItemTemplate: React.FC<DefaultItemTemplateProps> = (props) =
     <ListItem style={props.actionName === 'browse' ? { padding: 0 } : undefined} key={content.Id} button={false}>
       {content.Type ? renderIcon(content) : null}
       <ListItemText
-        primary={
-          content.Path?.trim() === '' ? (
-            content.DisplayName
-          ) : (
-            <Table>
-              <TableBody>
-                <TableCell component="th" title={content.Path} scope="row">
-                  {content.Path}
-                </TableCell>
-                <TableCell component="th" scope="row">
-                  {content.DisplayName}
-                </TableCell>
-                <TableCell component="th" scope="row">
-                  {content.Type}
-                </TableCell>
-              </TableBody>
-            </Table>
-          )
-        }
-        style={{ textAlign: 'left', paddingRight: 15 }}
+        onClick={() => {
+          if (content.Id === -1 || !paths) {
+            return
+          }
+          const referencedItemPaths = getAppPathAndContent(paths, content.Path)
+
+          if (!referencedItemPaths) {
+            return
+          }
+
+          const { appPath, contentePath } = referencedItemPaths
+
+          const fullUrl = buildCustomPath(appPath, props.actionName, contentePath)
+          window.location.href = fullUrl
+        }}
+        primary={content.DisplayName}
+        className={classes.referenceItemText}
+        data-clickable={content.Id !== -1}
       />
       {props.actionName && props.actionName !== 'browse' && !props.readOnly ? (
         <ListItemSecondaryAction>