[No QA] Create InlineSystemMessage component #9168

Gonals · 2022-05-25T14:10:27Z

Details

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/211552

Tests

We can't really display this component yet, since we don't store network errors on actions for now, so, to test this, you can call the component around here so it displays under all messages. You can pass anything as the message prop:

We'll do more thorough testing of the component and its visual when we actually place it

Gonals · 2022-05-26T08:48:19Z

Ready for review!

src/components/InlineSystemMessage.js

Julesssss · 2022-05-26T09:58:17Z

src/components/InlineSystemMessage.js

+};
+
+const InlineSystemMessage = (props) => {
+    if (props.message.length() === 0) {


I think this should be props.message.length === 0, as I'm getting a length is not a function error

Ah, totally right. My bad, as I added this at the end 😬

Julesssss

Looking good, left a couple of minor points.

Julesssss · 2022-05-26T10:13:39Z

I could only get it to display in the message header, please save me from my stupidity and help me figure out exactly where to place the component :D

Gonals · 2022-05-26T10:34:07Z

I could only get it to display in the message header, please save me from my stupidity and help me figure out exactly where to place the component :D

Here:

                <>
                <ReportActionItemFragment
                    key={`actionFragment-${props.action.sequenceNumber}-${index}`}
                    fragment={fragment}
                    isAttachment={props.action.isAttachment}
                    attachmentInfo={props.action.attachmentInfo}
                    loading={props.action.loading}
                />
                <InlineSystemMessage
                    message={'This is the error message, yeah'}
                />
                </>

Make sure to group both components with <> </>

Gonals · 2022-05-26T10:34:15Z

Comments addressed!

Julesssss · 2022-05-26T18:11:53Z

Looks good to me on both mobile and web 👍

OSBotify · 2022-05-26T19:49:01Z

🚀 Deployed to staging by @Julesssss in version: 1.1.68-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

roryabraham · 2022-05-27T00:02:42Z

src/components/InlineSystemMessage.js

+    }
+    return (
+        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+            <Icon src={Expensicons.Exclamation} fill={colors.red} />


We should never reference colors directly in the UI – instead we should always reference themes. This is so that we can easily add darkmode (and potentially other themes?) later on.

Created a quick follow-up PR #9198

Ah, nice spot Rory. Thanks

OSBotify · 2022-05-30T09:28:21Z