JNG-6033 modeled features

judo-ui-react-itest/ActionGroupTest/action_group_test__god/src/test/resources/snapshots/frontend-react/src/containers/Planet/View/PlanetView.tsx.snapshot

@@ -15,6 +15,7 @@ import Grid from '@mui/material/Grid';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { OBJECTCLASS } from '@pandino/pandino-api';
 import { useTrackService } from '@pandino/react-hooks';

judo-ui-react-itest/ActionGroupTest/action_group_test__god/src/test/resources/snapshots/frontend-react/src/containers/View/Galaxy/Form/ViewGalaxyForm.tsx.snapshot

@@ -21,6 +21,7 @@ import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { OBJECTCLASS } from '@pandino/pandino-api';
 import { useTrackService } from '@pandino/react-hooks';

judo-ui-react-itest/ActionGroupTest/action_group_test__god/src/test/resources/snapshots/frontend-react/src/containers/View/Galaxy/View/ViewGalaxyView.tsx.snapshot

@@ -24,6 +24,7 @@ import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { OBJECTCLASS } from '@pandino/pandino-api';
 import { ComponentProxy } from '@pandino/react-hooks';

judo-ui-react-itest/ActionGroupTest/action_group_test__god/src/test/resources/snapshots/frontend-react/src/containers/View/Matter/Form/ViewMatterForm.tsx.snapshot

@@ -16,6 +16,7 @@ import Grid from '@mui/material/Grid';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { OBJECTCLASS } from '@pandino/pandino-api';
 import { useTrackService } from '@pandino/react-hooks';

judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiGeneralHelper.java

@@ -145,6 +145,11 @@ public static String getApplicationLogo(Application application) {
         return logo == null ? "judo-color-logo.png" : logo;
     }
 
+    public static String getApplicationIcon(Application application) {
+        String icon = application.getIcon();
+        return icon == null ? "judo-icon.webp" : icon;
+    }
+
     public static EObject eContainer(EObject eObject) {
         return eObject.eContainer();
     }

judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiI18NHelper.java

@@ -314,6 +314,13 @@ public static Map<String, String> getApplicationTranslations(Application applica
                 }
             });
 
+            List<VisualElement> inputsWithLabel = new ArrayList<>();
+            collectVisualElementsMatchingCondition(container, (v) -> v instanceof Input input && input.getTooltipText() != null && !input.getTooltipText().isEmpty(), inputsWithLabel);
+
+            inputsWithLabel.forEach(i -> {
+                translations.put(getTranslationKeyForVisualElement(i) + ".tooltip", ((Input) i).getTooltipText());
+            });
+
             List<VisualElement> flexElements = new ArrayList<>();
             collectVisualElementsMatchingCondition(container, (v) -> v instanceof Flex flex && elementHasLabel(flex) && !(v instanceof PageContainer), flexElements);
             flexElements.forEach(f -> {

judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiImportHelper.java

@@ -66,7 +66,7 @@ public static SortedSet<String> getMaterialImportsForPageContainer(PageContainer
                 .map(String::toLowerCase)
                 .collect(Collectors.toSet());
 
-        SortedSet<String> imports = new TreeSet<>(Set.of("Button", "ButtonGroup", "IconButton"));
+        SortedSet<String> imports = new TreeSet<>(Set.of("Button", "ButtonGroup", "IconButton", "Tooltip"));
 
         muiMaterialWidgetImportPairs.forEach((key, value) -> {
             if (uniqueVisualElementNames.contains(key)) {

judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiPageHelper.java

@@ -529,4 +529,12 @@ public static boolean pageIsRootStateOwner(PageDefinition pageDefinition) {
                 && relationType.getIsRefreshable()
                 && (relationType.getIsMemberTypeAccess() || relationType.getIsRelationKindAssociation());
     }
+
+    public static String getAppTitle(Application application) {
+        String title = application.getTitle();
+        if (title != null && !title.isEmpty()) {
+            return title;
+        }
+        return application.getModelName();
+    }
 }

judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiPandinoHelper.java

@@ -30,6 +30,8 @@
 
 import static hu.blackbelt.judo.ui.generator.react.UiPageContainerHelper.containerComponentName;
 import static hu.blackbelt.judo.ui.generator.react.UiPageContainerHelper.simpleActionDefinitionName;
+import static hu.blackbelt.judo.ui.generator.react.UiPageHelper.getPagesForDialogs;
+import static hu.blackbelt.judo.ui.generator.react.UiPageHelper.getPagesForRouting;
 import static hu.blackbelt.judo.ui.generator.react.UiWidgetHelper.collectVisualElementsMatchingCondition;
 import static hu.blackbelt.judo.ui.generator.react.UiWidgetHelper.componentName;
 import static hu.blackbelt.judo.ui.generator.typescript.rest.commons.UiCommonsHelper.firstToLower;
@@ -124,4 +126,16 @@ public static List<VisualElement> getElementsWithHiddenBy(Container container) {
         collectVisualElementsMatchingCondition(container, e -> e.getHiddenBy() != null, elements);
         return elements.stream().sorted(Comparator.comparing(NamedElement::getFQName)).collect(Collectors.toList());
     }
+
+    public static List<PageContainer> containersWithDefaultImplementation(Application application) {
+        return application.getPageContainers().stream().filter(PageContainer::isGenerateVisualPropertiesHook).collect(Collectors.toList());
+    }
+
+    public static List<PageDefinition> pagesWithCustomActions(Application application) {
+        return getPagesForRouting(application).stream().filter(PageDefinition::isGenerateActionsHook).collect(Collectors.toList());
+    }
+
+    public static List<PageDefinition> dialogsWithCustomActions(Application application) {
+        return getPagesForDialogs(application).stream().filter(PageDefinition::isGenerateActionsHook).collect(Collectors.toList());
+    }
 }

judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiWidgetHelper.java

@@ -550,4 +550,8 @@ public static String getCellEditType(Column column) {
 
         return "text";
     }
+
+    public static boolean hasTooltipText(Input input) {
+        return input.getTooltipText() != null && !input.getTooltipText().trim().isEmpty();
+    }
 }

judo-ui-react/src/main/resources/actor/index.html.hbs

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <title>{{ application.modelName }} - {{ application.actor.simpleName }}</title>
+        <title>{{ getAppTitle application }}</title>
         <meta charset="utf-8" />
         <base href="/">
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />

judo-ui-react/src/main/resources/actor/src/App.tsx.hbs

@@ -2,6 +2,9 @@
 
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
+{{# if application.backgroundImage }}
+import Box from '@mui/material/Box';
+{{/ if }}
 import IconButton from '@mui/material/IconButton';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { SnackbarProvider, closeSnackbar } from 'notistack';
@@ -18,6 +21,17 @@ function App() {
   const location = useLocation();
 
   return (
+    {{# if application.backgroundImage }}
+      <Box sx={ {
+        margin: 0,
+        padding: 0,
+        backgroundImage: 'url({{ application.backgroundImage }})',
+        backgroundPosition: 'center center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        backgroundAttachment: 'fixed',
+      } }>
+    {{/ if }}
     <ScrollToTop>
       <EventBusProvider>
         {{# if application.authentication }}
@@ -39,6 +53,9 @@ function App() {
         {{/ if }}
       </EventBusProvider>
     </ScrollToTop>
+    {{# if application.backgroundImage }}
+    </Box>
+    {{/ if }}
   );
 }
 

judo-ui-react/src/main/resources/actor/src/components/PageHeader.tsx.hbs

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import type { Theme } from '@mui/material/styles';
+import { {{# if application.backgroundImage }}alpha, {{/ if }}type Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useEffect, useState } from 'react';
 import type { ReactNode } from 'react';
@@ -53,7 +53,11 @@ export const PageHeader = ({ title, children }: PageHeaderProps) => {
                 : DRAWER_WIDTH
               : 0
         }px)`,
+        {{# if application.backgroundImage }}
+        backgroundColor: (theme) => alpha(theme.palette.background.default, 0.9),
+        {{ else }}
         backgroundColor: (theme) => theme.palette.background.default,
+        {{/ if }}
       } }
     >
       <Container

judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/binarytypeinput.hbs

@@ -11,6 +11,9 @@
             actions={actions}
         >
     {{/ if }}
+    {{# if (hasTooltipText child) }}
+    <Box display="flex" alignItems="center">
+    {{/ if }}
     <BinaryInput
         required={actions?.is{{ firstToUpper child.attributeType.name }}Required ? actions.is{{ firstToUpper child.attributeType.name }}Required(data, editMode) : ({{# if child.requiredBy }}data.{{ child.requiredBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isRequired  }})}
         id="{{ getXMIID child }}"
@@ -53,6 +56,10 @@
             {{/ if }}
         } }
     />
+    {{# if (hasTooltipText child) }}
+      {{> actor/src/fragments/container/input-tooltip.fragment.hbs input=child }}
+    </Box>
+    {{/ if }}
     {{# if child.customImplementation }}
         </ComponentProxy>
     {{/ if }}

judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/dateinput.hbs

@@ -11,6 +11,9 @@
             actions={actions}
         >
     {{/ if }}
+    {{# if (hasTooltipText child) }}
+    <Box display="flex" alignItems="center">
+    {{/ if }}
     <DatePicker
         {{# if (shouldElementHaveAutoFocus child) }}
             inputRef={autoFocusInputRef}
@@ -65,6 +68,10 @@
         } }
         {...(actions.get{{ firstToUpper child.attributeType.name }}ValidationProps ? actions.get{{ firstToUpper child.attributeType.name }}ValidationProps(data) : {})}
     />
+    {{# if (hasTooltipText child) }}
+      {{> actor/src/fragments/container/input-tooltip.fragment.hbs input=child }}
+    </Box>
+    {{/ if }}
     {{# if child.customImplementation }}
         </ComponentProxy>
     {{/ if }}

judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/datetimeinput.hbs

@@ -11,6 +11,9 @@
             actions={actions}
         >
     {{/ if }}
+    {{# if (hasTooltipText child) }}
+    <Box display="flex" alignItems="center">
+    {{/ if }}
     <DateTimePicker
         ampm={false}
         ampmInClock={false}
@@ -66,6 +69,10 @@
             {{/ if }}
         } }
     />
+    {{# if (hasTooltipText child) }}
+      {{> actor/src/fragments/container/input-tooltip.fragment.hbs input=child }}
+    </Box>
+    {{/ if }}
     {{# if child.customImplementation }}
         </ComponentProxy>
     {{/ if }}

judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/enumerationcombo.hbs

@@ -11,6 +11,9 @@
             actions={actions}
         >
     {{/ if }}
+    {{# if (hasTooltipText child) }}
+    <Box display="flex" alignItems="center">
+    {{/ if }}
     <Autocomplete
       id="{{ getXMIID child }}"
       autoHighlight
@@ -71,6 +74,10 @@
         })}
       />}
     />
+    {{# if (hasTooltipText child) }}
+      {{> actor/src/fragments/container/input-tooltip.fragment.hbs input=child }}
+    </Box>
+    {{/ if }}
     {{# if child.customImplementation }}
         </ComponentProxy>
     {{/ if }}

judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/numericinput.hbs

@@ -11,6 +11,9 @@
             actions={actions}
         >
     {{/ if }}
+    {{# if (hasTooltipText child) }}
+    <Box display="flex" alignItems="center">
+    {{/ if }}
     <NumericInput
         required={actions?.is{{ firstToUpper child.attributeType.name }}Required ? actions.is{{ firstToUpper child.attributeType.name }}Required(data, editMode) : ({{# if child.requiredBy }}data.{{ child.requiredBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isRequired  }})}
         name="{{ child.attributeType.name }}"
@@ -57,6 +60,10 @@
             {{/ if }}
         } }
     />
+    {{# if (hasTooltipText child) }}
+      {{> actor/src/fragments/container/input-tooltip.fragment.hbs input=child }}
+    </Box>
+    {{/ if }}
     {{# if child.customImplementation }}
         </ComponentProxy>
     {{/ if }}

judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/textinput.hbs

@@ -11,6 +11,9 @@
             actions={actions}
         >
     {{/ if }}
+    {{# if (hasTooltipText child) }}
+    <Box display="flex" alignItems="center">
+    {{/ if }}
     {{# if child.isTypeAheadField }}
     <TextWithTypeAhead
         required={actions?.is{{ firstToUpper child.attributeType.name }}Required ? actions.is{{ firstToUpper child.attributeType.name }}Required(data, editMode) : ({{# if child.requiredBy }}data.{{ child.requiredBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isRequired  }})}
@@ -93,6 +96,10 @@
         {{/ if }}
     />
     {{/ if }}
+    {{# if (hasTooltipText child) }}
+      {{> actor/src/fragments/container/input-tooltip.fragment.hbs input=child }}
+    </Box>
+    {{/ if }}
     {{# if child.customImplementation }}
         </ComponentProxy>
     {{/ if }}

judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/timeinput.hbs

@@ -11,6 +11,9 @@
             actions={actions}
         >
     {{/ if }}
+    {{# if (hasTooltipText child) }}
+    <Box display="flex" alignItems="center">
+    {{/ if }}
     <TimePicker
         {{# if (shouldElementHaveAutoFocus child) }}
             inputRef={autoFocusInputRef}
@@ -64,6 +67,10 @@
             storeDiff('{{ child.attributeType.name }}', newValue);
         } }
         />
+    {{# if (hasTooltipText child) }}
+      {{> actor/src/fragments/container/input-tooltip.fragment.hbs input=child }}
+    </Box>
+    {{/ if }}
     {{# if child.customImplementation }}
         </ComponentProxy>
     {{/ if }}

judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/trinarylogiccombo.hbs

@@ -11,6 +11,9 @@
             actions={actions}
         >
     {{/ if }}
+    {{# if (hasTooltipText child) }}
+    <Box display="flex" alignItems="center">
+    {{/ if }}
     <TrinaryLogicCombobox
         name="{{ child.attributeType.name }}"
         id="{{ getXMIID child }}"
@@ -32,6 +35,10 @@
         disabled={actions?.is{{ firstToUpper child.attributeType.name }}Disabled ? actions.is{{ firstToUpper child.attributeType.name }}Disabled(data, editMode, isLoading) : ({{# if child.enabledBy }}!data.{{ child.enabledBy.name }} || {{/ if }}isLoading)}
         readOnly={actions?.is{{ firstToUpper child.attributeType.name }}Readonly ? actions.is{{ firstToUpper child.attributeType.name }}Readonly(data, editMode, isLoading) : ({{ boolValue child.attributeType.isReadOnly }} || !isFormUpdateable())}
     />
+    {{# if (hasTooltipText child) }}
+      {{> actor/src/fragments/container/input-tooltip.fragment.hbs input=child }}
+    </Box>
+    {{/ if }}
     {{# if child.customImplementation }}
         </ComponentProxy>
     {{/ if }}

judo-ui-react/src/main/resources/actor/src/fragments/container/input-tooltip.fragment.hbs

@@ -0,0 +1,5 @@
+<Tooltip title={t('{{ getTranslationKeyForVisualElement input }}.tooltip', { defaultValue: '{{ input.tooltipText }}' })} placement="right">
+  <IconButton>
+    <MdiIcon path="help-circle-outline" />
+  </IconButton>
+</Tooltip>

judo-ui-react/src/main/resources/actor/src/hooks/useLogoProps.ts.hbs

@@ -15,8 +15,8 @@ export interface UseLogoProps {
 export function useLogoProps(): UseLogoProps {
   const defaults: UseLogoProps = {
     imgSrc: '{{ getApplicationLogo application }}',
-    iconSrc: 'judo-icon.webp',
-    subTitle: '{{ application.modelName }}',
+    iconSrc: '{{ getApplicationIcon application }}',
+    subTitle: '{{ getAppTitle application }}',
   };
   const { service: useCustomLogoProps } = useTrackService<CustomLogoPropsHook>(`(${OBJECTCLASS}=${CUSTOM_LOGO_PROPS_HOOK_INTERFACE_KEY})`);
   const getCustomLogoProps = useCustomLogoProps && useCustomLogoProps();

judo-ui-react/src/main/resources/actor/src/layout/Footer.tsx.hbs

@@ -14,7 +14,7 @@ export const Footer = () => {
 
   return (
     <Stack direction="row" justifyContent="space-between" alignItems="center" sx={ { p: '24px 16px 0px', mt: 'auto' } }>
-      <Typography variant="caption">{getFooterText ? getFooterText() : `{{ application.modelName }} - ${new Date().getFullYear()}.`}</Typography>
+      <Typography variant="caption">{getFooterText ? getFooterText() : `{{ getAppTitle application }} - ${new Date().getFullYear()}.`}</Typography>
     </Stack>
   );
 };

judo-ui-react/src/main/resources/actor/src/theme/index.tsx.hbs

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
-import { createTheme } from '@mui/material/styles';
+import { {{# if application.backgroundImage }}alpha, {{/ if }}createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import { amber, deepOrange, grey } from '@mui/material/colors';
@@ -189,6 +189,11 @@ const baseTheme = (paletteTheme: Theme) => createTheme(
             boxShadow: '0px 0px 8px 1px rgba(0,0,0,0.05)',
             borderRadius: density.borderRadius,
           },
+          {{# if application.backgroundImage }}
+          root: {
+            background: alpha(paletteTheme.palette.background.default, 0.97),
+          },
+          {{/ if }}
         },
       },
       MuiDrawer: {