JNG-4639: qa friendly elements (#29)

BlackBeltTechnology · Mar 16, 2023 · e79a5f4 · e79a5f4
1 parent 643c295
commit e79a5f4
Show file tree

Hide file tree

Showing 61 changed files with 205 additions and 124 deletions.
diff --git a/judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiGeneralHelper.java b/judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiGeneralHelper.java
@@ -5,15 +5,14 @@
 import hu.blackbelt.judo.meta.ui.Application;
 import hu.blackbelt.judo.meta.ui.NavigationItem;
 import hu.blackbelt.judo.meta.ui.Sort;
-import hu.blackbelt.judo.meta.ui.Stretch;
 import hu.blackbelt.judo.meta.ui.data.*;
 import lombok.extern.java.Log;
 import org.eclipse.emf.ecore.EObject;
-import org.eclipse.emf.ecore.xmi.XMIResource;
 
 import java.util.Collection;
 import java.util.stream.Collectors;
 
+import static hu.blackbelt.judo.ui.generator.typescript.rest.commons.UiCommonsHelper.getXMIID;
 import static java.util.Arrays.stream;
 
 @Log
@@ -75,6 +74,10 @@ public static String fqClass(String fqName) {
                 .collect(Collectors.joining());
     }
 
+    public static String createId(EObject element) {
+        return fqClass(getXMIID(element).replaceAll("@", ""));
+    }
+
     public static Boolean isNavItemAGroup(NavigationItem navigationItem) {
         return navigationItem.getTarget() == null;
     }

diff --git a/judo-ui-react/src/main/resources/actor/src/components-api/components/MenuTree.ts.hbs b/judo-ui-react/src/main/resources/actor/src/components-api/components/MenuTree.ts.hbs
@@ -5,6 +5,7 @@
 // Template name: {{ template.templateName }}
 
 export type MenuItem = {
+  id: string;
   icon?: string;
   label: string;
   to?: string;

diff --git a/judo-ui-react/src/main/resources/actor/src/components-api/dialog/ConfirmationDialog.ts.hbs b/judo-ui-react/src/main/resources/actor/src/components-api/dialog/ConfirmationDialog.ts.hbs
@@ -7,6 +7,7 @@
 import type { ReactNode } from 'react';
 
 export interface ConfirmationDialogProps {
+  id: string,
   confirmationMessage: string | ReactNode;
   title: string | ReactNode;
   resolve: (value: boolean) => void;

diff --git a/judo-ui-react/src/main/resources/actor/src/components-api/dialog/DialogContext.ts.hbs b/judo-ui-react/src/main/resources/actor/src/components-api/dialog/DialogContext.ts.hbs
@@ -18,10 +18,11 @@ export interface PageDialogProviderContext {
 }
 
 export interface ConfirmDialogProviderContext {
-  openConfirmDialog: (confirmationMessage: string | ReactNode, title?: string | ReactNode) => Promise<boolean>;
+  openConfirmDialog: (id: string, confirmationMessage: string | ReactNode, title?: string | ReactNode) => Promise<boolean>;
 }
 
 export interface OpenRangeDialogProps<T extends JudoStored<T>, U extends QueryCustomizer<T>> {
+  id: string;
   columns: GridColumns<T>;
   defaultSortField: GridSortItem;
   rangeCall: (queryCustomizer: U) => Promise<Array<T>>;
@@ -38,5 +39,5 @@ export interface RangeDialogProviderContext {
 }
 
 export interface FilterDialogProviderContext {
-  openFilterDialog: (filterOptions: FilterOption[], filters?: Filter[]) => Promise<Filter[]>;
+  openFilterDialog: (id: string, filterOptions: FilterOption[], filters?: Filter[]) => Promise<Filter[]>;
 }
diff --git a/judo-ui-react/src/main/resources/actor/src/components-api/dialog/FilterDialog.ts.hbs b/judo-ui-react/src/main/resources/actor/src/components-api/dialog/FilterDialog.ts.hbs
@@ -7,6 +7,7 @@
 import { _BooleanOperation, _EnumerationOperation, _NumericOperation, _StringOperation } from '@judo/data-api-common';
 
 export interface FilterOption {
+  id: string;
   attributeName: string;
   label?: string;
   filterType: FilterType;
@@ -32,12 +33,15 @@ export type FilterBy = {
 };
 
 export interface Filter {
-  id: number;
+  id: string;
+  operationId: string;
+  valueId: string;
   filterOption: FilterOption;
   filterBy: FilterBy;
 }
 
 export interface FilterDialogProps {
+  id: string;
   filters?: Filter[];
   filterOptions: FilterOption[];
   resolve: (value: any) => void;
@@ -46,16 +50,21 @@ export interface FilterDialogProps {
 }
 
 export interface FilterOperatorProps {
+  operatorId: string;
+  valueId: string;
   filter: Filter;
   setFilterOperator: (filter: Filter, newOperator: Operation) => void;
 }
 
 export interface FilterInputProps {
+  operatorId: string;
+  valueId: string;
   filter: Filter;
   setFilterValue: (filter: Filter, newValue: any) => void;
 }
 
 export interface FilterProps {
+  id: string;
   filter: Filter;
   closeHandler: (filter: Filter) => void;
   setFilterValue: (filter: Filter, newValue: any) => void;

diff --git a/judo-ui-react/src/main/resources/actor/src/components/ApplicationSelector.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/ApplicationSelector.tsx.hbs
@@ -28,11 +28,11 @@ export function ApplicationSelector() {
 
     return (
         <>
-            <Button variant="text" sx={ { width: '100%' } } onClick={handleClickListItem} endIcon={<MdiIcon path="chevron_down" />}>
+            <Button id="application-selector" variant="text" sx={ { width: '100%' } } onClick={handleClickListItem} endIcon={<MdiIcon path="chevron_down" />}>
                 <Typography sx={ { fontWeight: 500 } }>{ t('applications.{{ application.actor.simpleName }}', { defaultValue: '{{ application.actor.simpleName }}' }) as string }</Typography>
             </Button>
             <Menu
-                id="app-selector-menu"
+                id="application-selector-menu"
                 anchorEl={anchorEl}
                 open={applicationSelectorOpen}
                 onClose={handleClose}
@@ -45,7 +45,7 @@ export function ApplicationSelector() {
                     <Typography>{ t('judo.applications.available_applications', { defaultValue: 'Available applications' }) as string }</Typography>
                 </MenuItem>
                 {Object.keys(alternativeApplications).map(key => (
-                    <MenuItem key={key} onClick={() => handleMenuItemClick(key)}>
+                    <MenuItem id={key} key={key} onClick={() => handleMenuItemClick(key)}>
                         <Typography>{alternativeApplications[key]}</Typography>
                     </MenuItem>
                 ))}

diff --git a/judo-ui-react/src/main/resources/actor/src/components/CustomBreadcrumb.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/CustomBreadcrumb.tsx.hbs
@@ -152,7 +152,7 @@ export const CustomBreadcrumb = () => {
   const breadcrumbItems = useContext(BreadcrumbContextState);
 
   return (
-    <Breadcrumbs maxItems={2} separator=">">
+    <Breadcrumbs id="application-breadcrumb" maxItems={2} separator=">">
       <MdiIcon path="home" />
       {breadcrumbItems.map(({ label, key }, index) => {
         return (

diff --git a/judo-ui-react/src/main/resources/actor/src/components/DropdownButton.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/DropdownButton.tsx.hbs
@@ -10,6 +10,7 @@ import type { ReactNode, KeyboardEvent, SyntheticEvent } from 'react';
 import { MdiIcon } from './MdiIcon';
 
 interface DropdownMenuItem {
+  id: string,
   disabled?: boolean;
   visible?: boolean;
   label?: string;
@@ -20,7 +21,7 @@ interface DropdownMenuItem {
 
 interface DropdownButtonProps {
   children?: ReactNode;
-  id?: string | undefined;
+  id: string;
   menuItems: DropdownMenuItem[];
   disabled?: boolean;
   showDropdownIcon?: boolean;
@@ -107,7 +108,7 @@ export function DropdownButton({
                       return (
                         <MenuItem
                           key={menuItem.label ?? '' + index}
-                          id={menuItem.label ?? '' + index}
+                          id={menuItem.id}
                           disabled={menuItem.disabled ?? false}
                           onClick={(event) => {
                             handleClose(event);

diff --git a/judo-ui-react/src/main/resources/actor/src/components/Hero.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/Hero.tsx.hbs
@@ -9,13 +9,13 @@ import type { HeroProps } from '../components-api';
 
 export function Hero(props: HeroProps) {
   return (
-    <Box sx={ { p: 2, display: 'flex', flexDirection: 'row', alignItems: 'center' } } >
-      <img src={props.imgSrc} alt="hero" style={ { width: '4rem', marginRight: '.5rem' } } />
+    <Box id="application-hero" sx={ { p: 2, display: 'flex', flexDirection: 'row', alignItems: 'center' } } >
+      <img id="application-hero-image" src={props.imgSrc} alt="hero" style={ { width: '4rem', marginRight: '.5rem' } } />
       <Box sx={ { p: 2, display: 'flex', flexDirection: 'column', alignItems: 'stretch' } } >
-        {props.preferredUsername && <Typography sx={ { fontWeight: 'bold' } }>
+        {props.preferredUsername && <Typography id="application-hero-preferred-username" sx={ { fontWeight: 'bold' } }>
           {props.preferredUsername}
         </Typography>}
-        {props.email && <Typography sx={ { fontWeight: 'light' } }>
+        {props.email && <Typography id="application-hero-email" sx={ { fontWeight: 'light' } }>
           {props.email}
         </Typography>}
       </Box>

diff --git a/judo-ui-react/src/main/resources/actor/src/components/Logo.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/Logo.tsx.hbs
@@ -24,6 +24,7 @@ export function Logo(props: LogoProps) {
       } }
     >
       <img
+        id="application-logo"
         src={props.imgSrc}
         alt="logo"
         style={ {

diff --git a/judo-ui-react/src/main/resources/actor/src/components/ModeledTabs.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/ModeledTabs.tsx.hbs
@@ -4,19 +4,20 @@ import { Tabs, Tab, Box } from '@mui/material';
 import { MdiIcon } from './MdiIcon';
 
 export interface TabPanelProps {
+    id: string;
     children?: ReactNode;
     index: number;
     value: number;
 }
 
 export function TabPanel(props: TabPanelProps) {
-    const { children, value, index, ...other } = props;
+    const { id, children, value, index, ...other } = props;
 
     return (
         <div
             role="tabpanel"
             hidden={value !== index}
-            id={`modeled-tabs-tab-${index}`}
+            id={id}
             aria-labelledby={`simple-tab-${index}`}
             {...other}
         >
@@ -37,29 +38,30 @@ export interface ChildTabProps {
 }
 
 export interface ModeledTabsProps {
+    id: string,
     activeIndex: number,
     childTabs: ChildTabProps[],
     children: ReactNode;
 }
 
-export function ModeledTabs({ activeIndex, childTabs, children }: ModeledTabsProps) {
+export function ModeledTabs({ id, activeIndex, childTabs, children }: ModeledTabsProps) {
     const [value, setValue] = useState<number>(activeIndex);
 
     const handleChange = (event: SyntheticEvent, newValue: number) => {
         setValue(newValue);
     };
 
     return (
-        <Box sx={ { width: '100%' } }>
+        <Box id={id} sx={ { width: '100%' } }>
             <Box sx={ { borderBottom: 1, borderColor: 'divider' } }>
                 <Tabs value={value} onChange={handleChange} textColor="secondary" indicatorColor="secondary">
                     {childTabs.map((c: any, index: number) => (
-                    <Tab key={c.id} label={c.label} icon={c.icon ? <MdiIcon path={c.icon} /> : '' } iconPosition="start" id={c.id} disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }}{{ else }}false{{/ if }} } />
+                    <Tab id={`${c.id}-tab`} key={c.id} label={c.label} icon={c.icon ? <MdiIcon path={c.icon} /> : '' } iconPosition="start" disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }}{{ else }}false{{/ if }} } />
                     ))}
                 </Tabs>
             </Box>
             {childTabs.map((c: any, index: number) => (
-                <TabPanel key={c.id} value={value} index={index}>
+                <TabPanel id={`${c.id}-tab-panel`} key={c.id} value={value} index={index}>
                     {Array.isArray(children) ? children[index] : ''}
                 </TabPanel>
             ))}

diff --git a/judo-ui-react/src/main/resources/actor/src/components/PageHeader.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/PageHeader.tsx.hbs
@@ -28,7 +28,7 @@ export const PageHeader = ({ title, children }: PageHeaderProps) => {
           <Container component="main" maxWidth="xl">
             <Grid container alignItems="center" justifyContent="space-between" spacing={1}>
               <Grid item>
-                <Typography component="span" color="text.primary" variant="h5">
+                <Typography id="application-page-header-title" component="span" color="text.primary" variant="h5">
                   {title}
                 </Typography>
               </Grid>

diff --git a/judo-ui-react/src/main/resources/actor/src/components/dialog/ConfirmationDialog.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/dialog/ConfirmationDialog.tsx.hbs
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import type { ConfirmationDialogProps } from '../../components-api';
 
 export const ConfirmationDialog = ({
+  id,
   confirmationMessage,
   title,
   resolve,
@@ -38,18 +39,18 @@ export const ConfirmationDialog = ({
   };
 
   return (
-    <Dialog open={open} onClose={handleClose} scroll="paper" fullWidth={true} maxWidth={'xs'}>
-      {title && <DialogTitle id="scroll-dialog-title">{title}</DialogTitle>}
+    <Dialog id={id} open={open} onClose={handleClose} scroll="paper" fullWidth={true} maxWidth={'xs'}>
+      {title && <DialogTitle id={`${id}-dialog-title`}>{title}</DialogTitle>}
       <DialogContent dividers={!!title}>
         <DialogContentText id="scroll-dialog-description" ref={descriptionElementRef} tabIndex={-1}>
           {confirmationMessage}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button variant="text" onClick={cancel}>
+        <Button id={`${id}-action-cancel`} variant="text" onClick={cancel}>
           { t('judo.modal.confirm.cancel', { defaultValue: 'No' }) as string }
         </Button>
-        <Button variant="contained" onClick={ok}>
+        <Button id={`${id}-action-confirm`} variant="contained" onClick={ok}>
           { t('judo.modal.confirm.confirm', { defaultValue: 'Yes' }) as string }
         </Button>
       </DialogActions>

diff --git a/judo-ui-react/src/main/resources/actor/src/components/dialog/DialogProvider.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/dialog/DialogProvider.tsx.hbs
@@ -56,6 +56,7 @@ export const DialogProvider = ({ children }: DialogProviderProps) => {
   };
 
   const handleOpenRangeDialog = async <T extends JudoStored<T>, U extends QueryCustomizer<T>>({
+    id,
     columns,
     defaultSortField,
     rangeCall,
@@ -69,6 +70,7 @@ export const DialogProvider = ({ children }: DialogProviderProps) => {
     return new Promise<T[] | T>((resolve) => {
       setRangeDialog(
         <RangeDialog<T, U>
+          id={id}
           handleClose={handleCloseRangeDialog}
           open={true}
           resolve={resolve}
@@ -97,12 +99,13 @@ export const DialogProvider = ({ children }: DialogProviderProps) => {
     return false;
   };
 
-  const handleOpenConfirmDialog = async (confirmationMessage: string | ReactNode, title?: string | ReactNode) => {
+  const handleOpenConfirmDialog = async (id: string, confirmationMessage: string | ReactNode, title?: string | ReactNode) => {
     setIsOpenConfirmDialog(true);
 
     return new Promise<boolean>((resolve) => {
       setConfirmDialog(
         <ConfirmationDialog
+          id={id}
           confirmationMessage={confirmationMessage}
           title={title}
           handleClose={handleCloseConfirmDialog}
@@ -126,12 +129,13 @@ export const DialogProvider = ({ children }: DialogProviderProps) => {
     return false;
   };
 
-  const handleOpenFilterDialog = async (filterOptions: FilterOption[], filters?: Filter[]) => {
+  const handleOpenFilterDialog = async (id: string, filterOptions: FilterOption[], filters?: Filter[]) => {
     setIsOpenFilterDialog(true);
 
     return new Promise<Filter[]>((resolve) => {
       setFilterDialog(
         <FilterDialog
+          id={id}
           filters={filters}
           filterOptions={filterOptions}
           handleClose={handleCloseFilterDialog}