Issue/1298 eslint rule no useless fragments

.eslintrc.js

@@ -53,6 +53,7 @@ module.exports = {
           },
         ],
         'react/jsx-no-target-blank': 'error',
+        'react/jsx-no-useless-fragment': 'error',
         'react/jsx-sort-props': [
           'error',
           {

src/core/i18n/Msg.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 
 import { InterpolatedMessage, PlainMessage, ValueRecord } from './messages';
@@ -19,7 +20,7 @@ function Msg<Values extends ValueRecord>({
 function Msg<Values extends ValueRecord>({
   id,
   values,
-}: MsgProps<Values>): JSX.Element {
+}: MsgProps<Values>): ReactNode {
   const intl = useIntl();
 
   const descriptor = {
@@ -31,7 +32,7 @@ function Msg<Values extends ValueRecord>({
     ? intl.formatMessage(descriptor, values)
     : intl.formatMessage(descriptor);
 
-  return <>{str}</>;
+  return str;
 }
 
 export default Msg;

src/features/calendar/components/CalendarEventFilter/CheckboxFilterList.tsx

@@ -31,69 +31,65 @@ const CheckboxFilterList = ({
 
   const visibleOptions = expand ? options : options.slice(0, maxCollapsed);
   return (
-    <>
-      <FormGroup sx={{ mb: 2 }}>
-        <Box alignItems="center" display="flex" justifyContent="space-between">
-          <Typography color="secondary" variant="body1">
-            {title}
-          </Typography>
-          <AllAndNoneToggle
-            maxLength={options.length}
-            onSelectAll={() =>
-              onFilterChange(options.map((item) => item.value))
+    <FormGroup sx={{ mb: 2 }}>
+      <Box alignItems="center" display="flex" justifyContent="space-between">
+        <Typography color="secondary" variant="body1">
+          {title}
+        </Typography>
+        <AllAndNoneToggle
+          maxLength={options.length}
+          onSelectAll={() => onFilterChange(options.map((item) => item.value))}
+          onSelectNone={() => onFilterChange([])}
+          selectedFilterLength={selectedValues.length}
+        />
+      </Box>
+      {visibleOptions.map((item) => {
+        return (
+          <FormControlLabel
+            key={item.value}
+            control={
+              <Checkbox
+                checked={selectedValues.includes(item.value)}
+                name={item.value}
+                onChange={() => {
+                  const alreadyExists = selectedValues.includes(item.value);
+                  onFilterChange(
+                    alreadyExists
+                      ? selectedValues.filter(
+                          (filterOption) => filterOption !== item.value
+                        )
+                      : [...selectedValues, item.value]
+                  );
+                }}
+              />
             }
-            onSelectNone={() => onFilterChange([])}
-            selectedFilterLength={selectedValues.length}
+            label={item.label}
+            sx={{ pl: 1 }}
           />
-        </Box>
-        {visibleOptions.map((item) => {
-          return (
-            <FormControlLabel
-              key={item.value}
-              control={
-                <Checkbox
-                  checked={selectedValues.includes(item.value)}
-                  name={item.value}
-                  onChange={() => {
-                    const alreadyExists = selectedValues.includes(item.value);
-                    onFilterChange(
-                      alreadyExists
-                        ? selectedValues.filter(
-                            (filterOption) => filterOption !== item.value
-                          )
-                        : [...selectedValues, item.value]
-                    );
-                  }}
-                />
-              }
-              label={item.label}
-              sx={{ pl: 1 }}
-            />
-          );
-        })}
-        {options.length > maxCollapsed && (
-          <Button
-            onClick={() => setExpand(!expand)}
-            sx={{
-              display: 'flex',
-              justifyContent: 'flex-start',
-              width: 'fit-content',
-            }}
-            variant="text"
-          >
-            {expand && <Msg id={messageIds.eventFilter.collapse} />}
-            {!expand && (
-              <Typography sx={{ textDecoration: 'underline' }} variant="body2">
-                <Msg
-                  id={messageIds.eventFilter.expand}
-                  values={{ numOfOptions: options.length - maxCollapsed }}
-                />
-              </Typography>
-            )}
-          </Button>
-        )}
-      </FormGroup>
-    </>
+        );
+      })}
+      {options.length > maxCollapsed && (
+        <Button
+          onClick={() => setExpand(!expand)}
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-start',
+            width: 'fit-content',
+          }}
+          variant="text"
+        >
+          {expand && <Msg id={messageIds.eventFilter.collapse} />}
+          {!expand && (
+            <Typography sx={{ textDecoration: 'underline' }} variant="body2">
+              <Msg
+                id={messageIds.eventFilter.expand}
+                values={{ numOfOptions: options.length - maxCollapsed }}
+              />
+            </Typography>
+          )}
+        </Button>
+      )}
+    </FormGroup>
   );
 };
 

src/features/calendar/components/CalendarEventFilter/EventInputFilter.tsx

@@ -31,20 +31,16 @@ const EventInputFilter = ({
     <TextField
       fullWidth
       InputProps={{
-        endAdornment: (
-          <>
-            {userInput && (
-              <IconButton
-                onClick={() => {
-                  setUserInput('');
-                  onChangeFilterText('');
-                }}
-              >
-                <Clear />
-              </IconButton>
-            )}
-          </>
-        ),
+        endAdornment: userInput ? (
+          <IconButton
+            onClick={() => {
+              setUserInput('');
+              onChangeFilterText('');
+            }}
+          >
+            <Clear />
+          </IconButton>
+        ) : null,
         startAdornment: (
           <InputAdornment position="start">
             <FilterList />

src/features/calendar/components/EventCluster/FieldGroup.tsx

@@ -37,18 +37,16 @@ const FieldGroup: FC<FieldGroupProps> = ({ fields, height }) => {
     (f) => f.presentation === FIELD_PRESENTATION.ICON_ONLY
   );
   return (
-    <>
-      <Box className={classes.fields} height={height}>
-        <Box className={classes.fieldsWithIconOnly}>
-          {fieldsWithIconOnly.map((field, index) => (
-            <Field key={`${field.kind}-${index}`} field={field} />
-          ))}
-        </Box>
-        {fieldsWithLabel.map((field, index) => (
+    <Box className={classes.fields} height={height}>
+      <Box className={classes.fieldsWithIconOnly}>
+        {fieldsWithIconOnly.map((field, index) => (
           <Field key={`${field.kind}-${index}`} field={field} />
         ))}
       </Box>
-    </>
+      {fieldsWithLabel.map((field, index) => (
+        <Field key={`${field.kind}-${index}`} field={field} />
+      ))}
+    </Box>
   );
 };
 

src/features/calendar/components/index.tsx

@@ -87,71 +87,69 @@ const Calendar = () => {
   }
 
   return (
-    <>
-      <Box display="flex" flexDirection="column" height={'100%'} padding={2}>
-        <CalendarNavBar
-          focusDate={focusDate}
-          onChangeFocusDate={(date) => {
-            setFocusDate(date);
-          }}
-          onChangeTimeScale={(timeScale) => {
-            setSelectedTimeScale(timeScale);
-          }}
-          onStepBackward={() => {
-            // Steps back to the last day with an event on day view
-            if (selectedTimeScale === TimeScale.DAY && prevActivityDay) {
-              setFocusDate(prevActivityDay[0]);
-            } else {
-              setFocusDate(
-                dayjs(focusDate).subtract(1, selectedTimeScale).toDate()
-              );
-            }
-          }}
-          onStepForward={() => {
-            // Steps forward to the next day with an event on day view
-            if (selectedTimeScale === TimeScale.DAY && nextActivityDay) {
-              setFocusDate(nextActivityDay[0]);
-            } else {
-              setFocusDate(dayjs(focusDate).add(1, selectedTimeScale).toDate());
-            }
-          }}
-          orgId={parseInt(orgId as string)}
-          timeScale={selectedTimeScale}
-        />
-
-        <Box
-          display="flex"
-          flexDirection="column"
-          flexGrow={1}
-          marginTop={2}
-          overflow="auto"
-        >
-          <Suspense>
-            {selectedTimeScale === TimeScale.DAY && (
-              <CalendarDayView
-                focusDate={focusDate}
-                onClickPreviousDay={(date) => setFocusDate(date)}
-                previousActivityDay={prevActivityDay}
-              />
-            )}
-            {selectedTimeScale === TimeScale.WEEK && (
-              <CalendarWeekView
-                focusDate={focusDate}
-                onClickDay={(date) => navigateTo(TimeScale.DAY, date)}
-              />
-            )}
-            {selectedTimeScale === TimeScale.MONTH && (
-              <CalendarMonthView
-                focusDate={focusDate}
-                onClickDay={(date) => navigateTo(TimeScale.DAY, date)}
-                onClickWeek={(date) => navigateTo(TimeScale.WEEK, date)}
-              />
-            )}
-          </Suspense>
-        </Box>
-        <SelectionBar />
+    <Box display="flex" flexDirection="column" height={'100%'} padding={2}>
+      <CalendarNavBar
+        focusDate={focusDate}
+        onChangeFocusDate={(date) => {
+          setFocusDate(date);
+        }}
+        onChangeTimeScale={(timeScale) => {
+          setSelectedTimeScale(timeScale);
+        }}
+        onStepBackward={() => {
+          // Steps back to the last day with an event on day view
+          if (selectedTimeScale === TimeScale.DAY && prevActivityDay) {
+            setFocusDate(prevActivityDay[0]);
+          } else {
+            setFocusDate(
+              dayjs(focusDate).subtract(1, selectedTimeScale).toDate()
+            );
+          }
+        }}
+        onStepForward={() => {
+          // Steps forward to the next day with an event on day view
+          if (selectedTimeScale === TimeScale.DAY && nextActivityDay) {
+            setFocusDate(nextActivityDay[0]);
+          } else {
+            setFocusDate(dayjs(focusDate).add(1, selectedTimeScale).toDate());
+          }
+        }}
+        orgId={parseInt(orgId as string)}
+        timeScale={selectedTimeScale}
+      />
+
+      <Box
+        display="flex"
+        flexDirection="column"
+        flexGrow={1}
+        marginTop={2}
+        overflow="auto"
+      >
+        <Suspense>
+          {selectedTimeScale === TimeScale.DAY && (
+            <CalendarDayView
+              focusDate={focusDate}
+              onClickPreviousDay={(date) => setFocusDate(date)}
+              previousActivityDay={prevActivityDay}
+            />
+          )}
+          {selectedTimeScale === TimeScale.WEEK && (
+            <CalendarWeekView
+              focusDate={focusDate}
+              onClickDay={(date) => navigateTo(TimeScale.DAY, date)}
+            />
+          )}
+          {selectedTimeScale === TimeScale.MONTH && (
+            <CalendarMonthView
+              focusDate={focusDate}
+              onClickDay={(date) => navigateTo(TimeScale.DAY, date)}
+              onClickWeek={(date) => navigateTo(TimeScale.WEEK, date)}
+            />
+          )}
+        </Suspense>
       </Box>
-    </>
+      <SelectionBar />
+    </Box>
   );
 };
 

src/features/events/components/AddPersonButton.tsx

@@ -106,25 +106,23 @@ const AddPersonButton = ({ orgId, eventId }: AddPersonButtonProps) => {
               };
 
               return (
-                <>
-                  <ZUIPersonSelect
-                    getOptionDisabled={(option) =>
-                      participants.some(
-                        (participant) => participant.id == option.id
-                      )
-                    }
-                    getOptionExtraLabel={(option) => {
-                      return getOptionExtraLabel(option.id);
-                    }}
-                    name="person"
-                    onChange={(person) => {
-                      addParticipant(person.id);
-                    }}
-                    placeholder={messages.addPerson.addPlaceholder()}
-                    selectedPerson={null}
-                    variant="outlined"
-                  />
-                </>
+                <ZUIPersonSelect
+                  getOptionDisabled={(option) =>
+                    participants.some(
+                      (participant) => participant.id == option.id
+                    )
+                  }
+                  getOptionExtraLabel={(option) => {
+                    return getOptionExtraLabel(option.id);
+                  }}
+                  name="person"
+                  onChange={(person) => {
+                    addParticipant(person.id);
+                  }}
+                  placeholder={messages.addPerson.addPlaceholder()}
+                  selectedPerson={null}
+                  variant="outlined"
+                />
               );
             }}
           </ZUIFutures>