Adding more nifty eslint rules for more consistent JSX/TSX

eslint.config.mjs

@@ -117,6 +117,10 @@ export default tseslint.config(
 
  'react-hooks/exhaustive-deps': ['error', { additionalHooks: '^(useMemoDeepEqual)$' }],
  'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }],
+ 'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
+ 'react/jsx-fragments': ['error'],
+ 'react/jsx-no-useless-fragment': ['error'],
+ 'react/self-closing-comp': ['error'],
  'react/prop-types': ['off'],
 
  'sonarjs/no-duplicate-string': ['off'],

src/App.tsx

@@ -10,7 +10,7 @@ import { InstanceSelectionWrapper } from 'src/features/instantiate/selection/Ins
 export const App = () => (
  <Routes>
  <Route
- path={'*'}
+ path='*'
  element={<Entrypoint />}
  />
  <Route

src/components/AltinnCollapsableList.tsx

@@ -28,18 +28,18 @@ export const AltinnCollapsableList = ({
  return (
  <Grid
  container={true}
- direction={'column'}
+ direction='column'
  >
  <Grid
  container={true}
- direction={'row'}
+ direction='row'
  onClick={onClickExpand}
  onKeyPress={onKeyPress}
  tabIndex={0}
  >
  <Grid
  container={true}
- direction={'row'}
+ direction='row'
  >
  {listHeader}
  </Grid>

src/components/AltinnSpinner.test.tsx

@@ -15,7 +15,7 @@ describe('tests to make sure to follow accessibility requirements', () => {
 
  test('should have role alert on spinner text to make sure screen readers is focus the text content', async () => {
  await renderWithoutInstanceAndLayout({
- renderer: () => <AltinnSpinner spinnerText={'Loading form'} />,
+ renderer: () => <AltinnSpinner spinnerText='Loading form' />,
  waitUntilLoaded: false,
  });
  await waitFor(() => {

src/components/EditIconButton.tsx

@@ -21,7 +21,7 @@ export function EditIconButton({ id, label, onClick }: IEditIconButtonProps) {
  onClick={onClick}
  >
  <PencilIcon
- fontSize={'1rem'}
+ fontSize='1rem'
  aria-hidden
  />
  {label}

src/components/LandmarkShortcuts.test.tsx

@@ -38,11 +38,11 @@ describe('LandmarkShortcuts.tsx', () => {
  {...defaultProps}
  {...props}
  />
- <main id='main-content'></main>
+ <main id='main-content' />
  <div
  id='other-content'
  tabIndex={-2}
- ></div>
+ />
  </>,
  );
  }

src/components/altinnAppHeader.tsx

@@ -47,23 +47,23 @@ export const AltinnAppHeader = ({ profile }: IHeaderProps) => {
  <ul className={classes.headerLinkList}>
  <li className={classes.headerLink}>
  <a
- className={'altinnLink'}
+ className='altinnLink'
  href={returnUrlToMessagebox(window.location.origin, party?.partyId) || '#'}
  >
  <Lang id='instantiate.inbox' />
  </a>
  </li>
  <li className={classes.headerLink}>
  <a
- className={'altinnLink'}
+ className='altinnLink'
  href={returnUrlToAllSchemas(window.location.origin) || '#'}
  >
  <Lang id='instantiate.all_forms' />
  </a>
  </li>
  <li className={classes.headerLink}>
  <a
- className={'altinnLink'}
+ className='altinnLink'
  href={returnUrlToProfile(window.location.origin, party?.partyId) || '#'}
  >
  <Lang id='instantiate.profile' />

src/components/altinnError.tsx

@@ -59,7 +59,7 @@ export const AltinnError = ({
  )}
  <div>
  <a
- className={'altinnLink'}
+ className='altinnLink'
  href={url}
  >
  {urlText}

src/components/altinnParty.tsx

@@ -163,7 +163,7 @@ export function AltinnParty({ party, onSelectParty, showSubUnits }: IAltinnParty
  <Typography>
  {party.childParties.length}
  &nbsp;
- <Lang id={'party_selection.unit_type_subunit_plural'} />
+ <Lang id='party_selection.unit_type_subunit_plural' />
  </Typography>
  </Grid>
  </Grid>
@@ -196,7 +196,7 @@ export function AltinnParty({ party, onSelectParty, showSubUnits }: IAltinnParty
  <Typography className={classes.partyName}>{childParty.name}</Typography>
  <Typography className={classes.partyInfo}>
  &nbsp;
- <Lang id={'party_selection.unit_org_number'} />
+ <Lang id='party_selection.unit_org_number' />
  &nbsp;{childParty.orgNumber}
  </Typography>
  </Grid>

src/components/form/Form.tsx

@@ -85,7 +85,7 @@ export function Form() {
  {hasRequired && (
  <MessageBanner
  error={requiredFieldsMissing}
- messageKey={'form_filler.required_description'}
+ messageKey='form_filler.required_description'
  />
  )}
  <Grid

src/components/form/HelpTextContainer.test.tsx

@@ -11,7 +11,7 @@ describe('HelpTextContainer', () => {
  await renderWithoutInstanceAndLayout({
  renderer: () => (
  <HelpTextContainer
- helpText={'Help text content'}
+ helpText='Help text content'
  {...props}
  />
  ),

src/components/form/LinkToPotentialNode.tsx

@@ -39,5 +39,5 @@ export const LinkToPotentialNode = (props: Props) => {
  );
  }
 
- return <>{props.children}</>;
+ return props.children;
 };

src/components/form/LinkToPotentialPage.tsx

@@ -33,5 +33,5 @@ export const LinkToPotentialPage = (props: Props) => {
  );
  }
 
- return <>{props.children}</>;
+ return props.children;
 };

src/components/label/Label.tsx

@@ -52,7 +52,7 @@ export function Label(props: LabelProps) {
  const textResourceBindings = (overriddenTrb ?? _trb) as ExprResolved<TRBLabel> | undefined;
 
  if (!textResourceBindings?.title) {
- return <>{children}</>;
+ return children;
  }
 
  const labelId = `label-${id}`;

src/components/message/ErrorReport.tsx

@@ -51,7 +51,7 @@ export const ErrorReport = ({ renderIds }: IErrorReportProps) => {
  <div data-testid='ErrorReport'>
  <FullWidthWrapper isOnBottom={true}>
  <Panel
- title={<Lang id={'form_filler.error_report_header'} />}
+ title={<Lang id='form_filler.error_report_header' />}
  showIcon={false}
  variant={PanelVariant.Error}
  >

src/components/molecules/AltinnCollapsibleAttachments.tsx

@@ -53,55 +53,51 @@ export function AltinnCollapsibleAttachments({
 
  const attachmentCount = hideCount ? '' : `(${attachments && attachments.length})`;
 
- return (
- <>
- {collapsible ? (
- <List
- component='nav'
- id='attachment-collapsible-list'
+ return collapsible ? (
+ <List
+ component='nav'
+ id='attachment-collapsible-list'
+ >
+ <ListItem
+ button={true}
+ onClick={handleOpenClose}
+ disableGutters={true}
+ >
+ <ListItemIcon
+ classes={{
+ root: cn({ [classes.transformArrowRight]: !open }, classes.transition),
+ }}
  >
- <ListItem
- button={true}
- onClick={handleOpenClose}
- disableGutters={true}
- >
- <ListItemIcon
- classes={{
- root: cn({ [classes.transformArrowRight]: !open }, classes.transition),
- }}
- >
- <CaretDownFillIcon
- aria-hidden='true'
- fontSize='1.5rem'
- />
- </ListItemIcon>
- <ListItemText
- primary={`${elementAsString(title)} ${attachmentCount}`}
- classes={{
- root: cn(classes.listItemTextPadding),
- primary: cn(classes.collapsedTitle),
- }}
- />
- </ListItem>
- <Collapse
- in={open}
- timeout='auto'
- unmountOnExit={true}
- >
- <AltinnAttachment attachments={attachments} />
- </Collapse>
- </List>
- ) : (
- <>
- <Typography style={fontStyle}>
- {title} {attachmentCount}
- </Typography>
- <AltinnAttachment
- attachments={attachments}
- id='attachment-list'
+ <CaretDownFillIcon
+ aria-hidden='true'
+ fontSize='1.5rem'
  />
- </>
- )}
+ </ListItemIcon>
+ <ListItemText
+ primary={`${elementAsString(title)} ${attachmentCount}`}
+ classes={{
+ root: cn(classes.listItemTextPadding),
+ primary: cn(classes.collapsedTitle),
+ }}
+ />
+ </ListItem>
+ <Collapse
+ in={open}
+ timeout='auto'
+ unmountOnExit={true}
+ >
+ <AltinnAttachment attachments={attachments} />
+ </Collapse>
+ </List>
+ ) : (
+ <>
+ <Typography style={fontStyle}>
+ {title} {attachmentCount}
+ </Typography>
+ <AltinnAttachment
+ attachments={attachments}
+ id='attachment-list'
+ />
  </>
  );
 }

src/components/molecules/AltinnContentLoader.test.tsx

@@ -11,7 +11,7 @@ const render = (props = {}) => {
 
  rtlRender(
  <AltinnContentLoader
- reason={'testing'}
+ reason='testing'
  {...allProps}
  />,
  );

src/components/organisms/AltinnAppHeader.tsx

@@ -34,7 +34,7 @@ export const AltinnAppHeader = ({ logoColor, headerBackgroundColor, party, userP
  shortcuts={[
  {
  id: 'main-content',
- text: <Lang id={'navigation.to_main_content'} />,
+ text: <Lang id='navigation.to_main_content' />,
  },
  ]}
  />

src/components/organisms/AltinnAppHeaderMenu.tsx

@@ -111,7 +111,7 @@ export function AltinnAppHeaderMenu({ party, logoColor }: IAltinnAppHeaderMenuPr
  id='logout-menu-item'
  >
  <a
- className={'altinnLink'}
+ className='altinnLink'
  href={logoutUrlAltinn(window.location.origin)}
  >
  <Lang id='general.log_out' />

src/components/organisms/AltinnReceipt.tsx

@@ -139,7 +139,7 @@ export function ReceiptComponent({
  className={classes.paddingTop24}
  >
  <a
- className={'altinnLink'}
+ className='altinnLink'
  href={subtitleurl}
  >
  {subtitle}

src/components/presentation/Presentation.tsx

@@ -35,7 +35,7 @@ export const PresentationComponent = ({ header, type, children, renderNavBar = t
  const userParty = useProfile()?.party;
  const { expandedWidth } = useUiConfigContext();
 
- const realHeader = header || (type === ProcessTaskType.Archived ? <Lang id={'receipt.receipt'} /> : undefined);
+ const realHeader = header || (type === ProcessTaskType.Archived ? <Lang id='receipt.receipt' /> : undefined);
 
  const isProcessStepsArchived = Boolean(type === ProcessTaskType.Archived);
  const backgroundColor = isProcessStepsArchived

src/components/presentation/ProcessNavigation.tsx

@@ -2,4 +2,4 @@ import React from 'react';
 
 import { ConfirmButton } from 'src/features/processEnd/confirm/components/ConfirmButton';
 
-export const ProcessNavigation = () => <ConfirmButton nodeId={'confirm-button'} />;
+export const ProcessNavigation = () => <ConfirmButton nodeId='confirm-button' />;

src/components/presentation/Progress.tsx

@@ -21,7 +21,7 @@ export const Progress = () => {
  return (
  <CircularProgress
  value={value}
- id={'progress'}
+ id='progress'
  label={labelText}
  ariaLabel={langAsString('general.progress', [currentPageNum, numberOfPages])}
  />

src/core/loading/Loader.test.tsx

@@ -10,7 +10,7 @@ describe('Loader', () => {
  it('should be able to render with minimal providers', async () => {
  jest.spyOn(console, 'error').mockImplementation(() => {});
  await renderWithMinimalProviders({
- renderer: () => <Loader reason={'testing-reason'} />,
+ renderer: () => <Loader reason='testing-reason' />,
  waitUntilLoaded: false,
  });
 

src/core/texts/appTexts.test.tsx

@@ -17,8 +17,8 @@ function AppTextsRenderer() {
  const appOwner = useAppOwner();
  return (
  <>
- <div data-testid={'appName'}>{appName}</div>
- <div data-testid={'appOwner'}>{appOwner}</div>
+ <div data-testid='appName'>{appName}</div>
+ <div data-testid='appOwner'>{appOwner}</div>
  </>
  );
 }

src/core/ui/WindowTitleProvider.tsx

@@ -18,5 +18,5 @@ export function WindowTitleProvider({ children }: PropsWithChildren) {
  }
  }, [appOwner, appName]);
 
- return <>{children}</>;
+ return children;
 }

src/features/alertOnChange/DeleteWarningPopover.tsx

@@ -53,7 +53,7 @@ export function DeleteWarningPopover({
  color='second'
  onClick={onCancelClick}
  >
- <Lang id={'general.cancel'} />
+ <Lang id='general.cancel' />
  </Button>
  </div>
  </Popover.Content>

src/features/devtools/DevToolsPanel.tsx

@@ -83,7 +83,7 @@ export const DevToolsPanel = ({ isOpen, close, children }: IDevToolsPanelProps)
  variant='tertiary'
  color='second'
  size='small'
- aria-label={'close'}
+ aria-label='close'
  icon={true}
  >
  <Close

src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx

@@ -50,7 +50,7 @@ export const DevToolsLogs = () => {
  <div className={classes.toolbar}>
  <Button
  onClick={clearLogs}
- color={'second'}
+ color='second'
  size='small'
  icon={true}
  >
@@ -61,7 +61,7 @@ export const DevToolsLogs = () => {
  </Button>
  <Button
  onClick={saveLogs}
- color={'second'}
+ color='second'
  size='small'
  icon={true}
  >