fix: improve display of warning error with popup (#812)

* RM#87294
axelor · Nov 29, 2024 · a9799f7 · a9799f7
1 parent bfa318e
commit a9799f7
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 11 deletions.
diff --git a/changelogs/unreleased/87274.json b/changelogs/unreleased/87274.json
@@ -0,0 +1,5 @@
+{
+  "title": "Menu: use popup to display error message",
+  "type": "fix",
+  "packages": "core"
+}
diff --git a/changelogs/unreleased/87274_CardIndicator.json b/changelogs/unreleased/87274_CardIndicator.json
@@ -0,0 +1,5 @@
+{
+  "title": "CardIndicator: add possibility to display indication in popup",
+  "type": "feat",
+  "packages": "ui"
+}
diff --git a/changelogs/unreleased/87274_InfoBubble.json b/changelogs/unreleased/87274_InfoBubble.json
@@ -0,0 +1,5 @@
+{
+  "title": "InfoBubble: add usePopup props to display indication in popup",
+  "type": "feat",
+  "packages": "ui"
+}
diff --git a/packages/core/src/navigator/drawer/DrawerContent.js b/packages/core/src/navigator/drawer/DrawerContent.js
@@ -215,7 +215,9 @@ const DrawerContent = ({
     <SafeAreaView style={styles.container}>
       {externalMenuIsVisible && (
         <View style={styles.iconsContainer}>
-          <ScrollView showsVerticalScrollIndicator={false}>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.scrollView}>
             {drawerModules.map(_module => (
               <View style={styles.globalContainer} key={_module.name}>
                 <MenuIconButton
@@ -307,6 +309,9 @@ const getStyles = Colors =>
       marginHorizontal: 12,
       zIndex: 3,
     },
+    scrollView: {
+      paddingBottom: 10,
+    },
     otherIconsContainer: {
       marginVertical: 8,
     },

diff --git a/packages/core/src/navigator/drawer/MenuIconButton.js b/packages/core/src/navigator/drawer/MenuIconButton.js
@@ -83,6 +83,7 @@ const MenuIconButton = ({
         {compatibilityError && (
           <InfoBubble
             style={styles.infoBubble}
+            usePopup={true}
             iconName="exclamation-triangle-fill"
             badgeColor={Colors.errorColor}
             textIndicationStyle={styles.textIndicationStyle}

diff --git a/packages/ui/__tests__/components/molecules/CardIndicator.test.js b/packages/ui/__tests__/components/molecules/CardIndicator.test.js
@@ -19,14 +19,15 @@
 import React from 'react';
 import {View} from 'react-native';
 import {shallow} from 'enzyme';
-import {Card, CardIndicator, Text} from '@axelor/aos-mobile-ui';
+import {Card, CardIndicator, Text, Alert} from '@axelor/aos-mobile-ui';
 
 describe('CardIndicator Component', () => {
   const props = {
     indication: 'heart',
     children: <View testID="children" />,
     isVisible: true,
-    handleClose: () => {},
+    handleClose: jest.fn(),
+    usePopup: false,
   };
 
   it('should render without crashing', () => {
@@ -35,16 +36,27 @@ describe('CardIndicator Component', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
-  it('renders the right informations', () => {
+  it('renders the right components when usePopup is false', () => {
     const wrapper = shallow(<CardIndicator {...props} />);
 
     expect(wrapper.contains(props.children)).toBe(true);
     expect(wrapper.find(Card).exists()).toBe(true);
     expect(wrapper.find(Text).prop('children')).toBe(props.indication);
 
     wrapper.setProps({isVisible: false});
-
     expect(wrapper.contains(props.children)).toBe(true);
     expect(wrapper.find(Card).exists()).toBe(false);
   });
+
+  it('renders the right components when usePopup is true', () => {
+    const wrapper = shallow(<CardIndicator {...props} usePopup={true} />);
+
+    expect(wrapper.contains(props.children)).toBe(true);
+    expect(wrapper.find(Alert).exists()).toBe(true);
+    expect(wrapper.find(Text).prop('children')).toBe(props.indication);
+
+    wrapper.setProps({isVisible: false});
+    expect(wrapper.contains(props.children)).toBe(true);
+    expect(wrapper.find(Alert).exists()).toBe(false);
+  });
 });
diff --git a/packages/ui/__tests__/components/organisms/InfoBubble.test.js b/packages/ui/__tests__/components/organisms/InfoBubble.test.js
@@ -28,6 +28,7 @@ describe('InfoBubble Component', () => {
     iconName: 'plus',
     badgeColor: Colors.primaryColor,
     indication: 'This is an info bubble.',
+    usePopup: false,
   };
 
   it('should render without crashing', () => {
@@ -78,4 +79,10 @@ describe('InfoBubble Component', () => {
     wrapper.find(TouchableOpacity).simulate('press');
     expect(wrapper.find(CardIndicator).prop('isVisible')).toBe(false);
   });
+
+  it('should pass usePopup to CardIndicator', () => {
+    const wrapper = shallow(<InfoBubble {...props} usePopup={true} />);
+
+    expect(wrapper.find(CardIndicator).prop('usePopup')).toBe(true);
+  });
 });
diff --git a/packages/ui/src/components/molecules/CardIndicator/CardIndicator.tsx b/packages/ui/src/components/molecules/CardIndicator/CardIndicator.tsx
@@ -24,6 +24,7 @@ import {
 } from '../../../hooks/use-click-outside';
 import {checkNullString} from '../../../utils';
 import {Card, Text} from '../../atoms';
+import Alert from '../Alert/Alert';
 
 interface CardIndicatorProps {
   style?: any;
@@ -34,6 +35,7 @@ interface CardIndicatorProps {
   isVisible: boolean;
   handleClose: () => void;
   space?: number;
+  usePopup?: boolean;
 }
 
 const CardIndicator = ({
@@ -45,6 +47,7 @@ const CardIndicator = ({
   isVisible,
   handleClose,
   space = Dimensions.get('window').width * 0.08,
+  usePopup = false,
 }: CardIndicatorProps) => {
   const wrapperRef = useRef(null);
   const clickOutside = useClickOutside({wrapperRef});
@@ -60,14 +63,28 @@ const CardIndicator = ({
     }
   }, [clickOutside, isVisible, handleClose]);
 
+  const renderIndication = () => {
+    if (checkNullString(indication)) {
+      return null;
+    }
+
+    return usePopup ? (
+      <Alert
+        visible={isVisible}
+        cancelButtonConfig={{onPress: handleClose, showInHeader: true}}>
+        <Text>{indication}</Text>
+      </Alert>
+    ) : (
+      <Card style={[styles.indicationCard, textIndicationStyle]}>
+        <Text>{indication}</Text>
+      </Card>
+    );
+  };
+
   return (
     <View ref={wrapperRef} style={[styles.container, style]}>
       {children}
-      {!checkNullString(indication) && isVisible ? (
-        <Card style={[styles.indicationCard, textIndicationStyle]}>
-          <Text>{indication}</Text>
-        </Card>
-      ) : null}
+      {isVisible && renderIndication()}
     </View>
   );
 };

diff --git a/packages/ui/src/components/organisms/InfoBubble/InfoBubble.tsx b/packages/ui/src/components/organisms/InfoBubble/InfoBubble.tsx
@@ -31,6 +31,7 @@ interface InfoBubbleProps {
   size?: number;
   position?: 'left' | 'right';
   coloredBubble?: boolean;
+  usePopup?: boolean;
 }
 
 const InfoBubble = ({
@@ -42,6 +43,7 @@ const InfoBubble = ({
   size = Dimensions.get('window').width * 0.07,
   position = 'right',
   coloredBubble = true,
+  usePopup = false,
 }: InfoBubbleProps) => {
   const styles = useMemo(() => getStyles(badgeColor, size), [badgeColor, size]);
 
@@ -54,7 +56,8 @@ const InfoBubble = ({
       position={position}
       isVisible={isVisible}
       handleClose={() => setIsVisible(false)}
-      textIndicationStyle={textIndicationStyle}>
+      textIndicationStyle={textIndicationStyle}
+      usePopup={usePopup}>
       <TouchableOpacity onPress={() => setIsVisible(current => !current)}>
         <Icon
           name={iconName}

diff --git a/packages/ui/stories/molecules/CardIndicator.stories.tsx b/packages/ui/stories/molecules/CardIndicator.stories.tsx
@@ -35,9 +35,11 @@ export const CardIndicator: Story<typeof Component> = {
     position: 'right',
     space: 50,
     isVisible: true,
+    usePopup: false,
   },
   argTypes: {
     handleClose: disabledControl,
+    usePopup: {control: 'boolean'},
   },
   render: args => {
     return (

diff --git a/packages/ui/stories/organisms/InfoBubble.stories.tsx b/packages/ui/stories/organisms/InfoBubble.stories.tsx
@@ -37,9 +37,11 @@ export const InfoBubble: Story<typeof Component> = {
     size: 25,
     position: 'right',
     coloredBubble: true,
+    usePopup: false,
   },
   argTypes: {
     badgeColor: colorPicker,
+    usePopup: {control: 'boolean'},
   },
   render: args => (
     <View style={styles.view}>