Fikser Sonarqube issues

Dockerfile

@@ -1,7 +1,7 @@
 FROM node:20-bullseye-slim
 
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
 
 WORKDIR /app
 

packages/nextjs/playwright/screenshot.spec.ts

@@ -28,7 +28,7 @@ for (const story of stories) {
                 }
             );
         } catch (error) {
-            return;
+            throw new Error(`Failed to take screenshot for ${story.title} ${story.name}: ${error}`);
         }
     });
 }

packages/nextjs/src/components/ContentMapper.tsx

@@ -94,7 +94,7 @@ type Props = {
 };
 
 export const ContentMapper = ({ content }: Props) => {
-    const Component = contentToReactComponent[content.type] || ContentTypeNotSupportedPage;
+    const Component = contentToReactComponent[content.type] ?? ContentTypeNotSupportedPage;
 
     // @ts-ignore
     return <Component {...content} />;

packages/nextjs/src/components/FragmentComponent.tsx

@@ -10,7 +10,7 @@ type Props = {
     editorProps?: ComponentEditorProps;
 };
 
-const _FragmentComponent = ({ componentProps, pageProps }: Props) => {
+const NestedFragmentComponent = ({ componentProps, pageProps }: Props) => {
     if (!componentProps.fragment?.type) {
         return (
             <EditorHelp
@@ -34,10 +34,10 @@ export const FragmentComponent = ({ componentProps, pageProps, editorProps }: Pr
     if (editorProps) {
         return (
             <div {...editorProps}>
-                <_FragmentComponent pageProps={pageProps} componentProps={componentProps} />
+                <NestedFragmentComponent pageProps={pageProps} componentProps={componentProps} />
             </div>
         );
     }
 
-    return <_FragmentComponent pageProps={pageProps} componentProps={componentProps} />;
+    return <NestedFragmentComponent pageProps={pageProps} componentProps={componentProps} />;
 };

packages/nextjs/src/components/PageBase.tsx

@@ -12,7 +12,7 @@ export type PageProps = {
 
 export const PageBase = (props: PageProps) => {
     const content =
-        props?.content || makeErrorProps('www.nav.no', 'Ukjent feil - kunne ikke laste innhold');
+        props?.content ?? makeErrorProps('www.nav.no', 'Ukjent feil - kunne ikke laste innhold');
 
     return (
         <PageContextProvider content={content}>

packages/nextjs/src/components/PageWrapper.tsx

@@ -111,7 +111,7 @@ export const PageWrapper = (props: Props) => {
             );
         }
 
-        document.documentElement.lang = content.language || 'no';
+        document.documentElement.lang = content.language ?? 'no';
     }, [content, router]);
 
     return (

packages/nextjs/src/components/_common/accordion/Accordion.tsx

@@ -60,7 +60,7 @@ export const Accordion = ({ accordion }: AccordionProps) => {
                 const isValid = validatePanel(item);
                 return (
                     <DSAccordion.Item
-                        key={index}
+                        key={item.anchorId ?? item.title}
                         className={styles.item}
                         open={openAccordions.includes(index)}
                         onOpenChange={(open) => handleOpenChange(open, item.title, index)}

packages/nextjs/src/components/_common/alternativeAudience/AlternativeAudience.tsx

@@ -92,7 +92,7 @@ export const AlternativeAudience = () => {
             <BodyLong size="small" className={style.text}>
                 {getRelatedString('relatedAudience').replace('{name}', productName)}{' '}
                 {audienceLinks.map((link, index) => (
-                    <Fragment key={index}>
+                    <Fragment key={`${link.url}-${link.title}`}>
                         <LenkeInline href={link.url} analyticsComponent="alternativ-målgruppe">
                             {link.title}
                         </LenkeInline>

packages/nextjs/src/components/_common/button/Button.tsx

@@ -39,7 +39,7 @@ export const Button = ({
     return (
         <DsButton
             as={LenkeBase}
-            href={href || '#'}
+            href={href ?? '#'}
             className={classNames(style.button, fullWidth && style.buttonFullWidth, className)}
             onClick={(e) => {
                 if (!href) {

packages/nextjs/src/components/_common/calculator/Calculator.tsx

@@ -50,7 +50,7 @@ const populateDefaultValues = (fields: CalculatorFieldData[]) => {
             return collection;
         }
 
-        const fieldWithUserInput = inputField || dropdownField;
+        const fieldWithUserInput = inputField ?? dropdownField;
 
         if (fieldWithUserInput) {
             const { variableName } = fieldWithUserInput;
@@ -139,7 +139,7 @@ export const Calculator = ({ header, calculatorData }: Props) => {
                     {fields
                         .filter((field) => !field.globalValue)
                         .map((field) => {
-                            const fieldKey = (field.dropdownField?.variableName ||
+                            const fieldKey = (field.dropdownField?.variableName ??
                                 field.inputField?.variableName) as string;
 
                             return (

packages/nextjs/src/components/_common/calculator/calculatorField/CalculatorField.tsx

@@ -33,7 +33,7 @@ export const CalculatorField = (props: Props) => {
                     name={field.inputField.variableName}
                     label={field.inputField.label}
                     type="number"
-                    value={value?.toString() || ''}
+                    value={value?.toString() ?? ''}
                     onChange={(e) => onChange(field.inputField.variableName, e.currentTarget.value)}
                     autoComplete={autoComplete ? 'on' : 'off'}
                 />
@@ -45,7 +45,7 @@ export const CalculatorField = (props: Props) => {
                     onChange={(e) =>
                         onChange(field.dropdownField.variableName, e.currentTarget.value)
                     }
-                    value={value || ''}
+                    value={value ?? ''}
                     autoComplete={autoComplete ? 'on' : 'off'}
                 >
                     {field.dropdownField.optionItems.map((option) => (

packages/nextjs/src/components/_common/card/MicroCard/MicroCards.tsx

@@ -36,8 +36,8 @@ export const MicroCards = ({ header, card_list }: Props) => {
                 </BodyShort>
             )}
             <div className={style.wrapper}>
-                {cardProps.map((card, index) => (
-                    <MicroCard {...card} key={index} />
+                {cardProps.map((card) => (
+                    <MicroCard {...card} key={card.link?.url ?? card.link?.text} />
                 ))}
             </div>
         </>

packages/nextjs/src/components/_common/card/card-utils.ts

@@ -51,7 +51,7 @@ export const getCardProps = (
     const { title, ingress, illustration, externalProductUrl } = data;
 
     const cardType = cardTypeMap[type];
-    const cardUrl = externalProductUrl || _path;
+    const cardUrl = externalProductUrl ?? _path;
     const cardTitle = title || displayName;
 
     const link = {
@@ -60,7 +60,7 @@ export const getCardProps = (
     };
 
     const tagline = getContentTagline(targetContent, language);
-    const description = ingressOverride || ingress;
+    const description = ingressOverride ?? ingress;
 
     return {
         type: cardType,

packages/nextjs/src/components/_common/contact-option/CallOption/CallOption.tsx

@@ -79,7 +79,7 @@ export const CallOption = ({
                     analyticsComponent={'Kontakt-oss kanal'}
                 >
                     <Heading level="3" size="small">
-                        {title || callTranslations.title}
+                        {title ?? callTranslations.title}
                     </Heading>
                 </LenkeBase>
                 {alertText && (
@@ -89,7 +89,7 @@ export const CallOption = ({
                 )}
                 <BodyLong className={sharedStyle.text}>
                     <ParsedHtml
-                        htmlProps={overrideText || ingress || text || callTranslations.ingress}
+                        htmlProps={overrideText ?? ingress ?? text ?? callTranslations.ingress}
                     />
                 </BodyLong>
                 {!alertText && regularOpeningHours && specialOpeningHours && (
@@ -107,7 +107,7 @@ export const CallOption = ({
                         <BodyShort as="span">{sharedTranslations.seeMoreOptions}</BodyShort>
                     </LenkeBase>
                 )}
-                </div>
+            </div>
         </div>
     );
 };

packages/nextjs/src/components/_common/contact-option/ChatOption/ChatOption.tsx

@@ -40,7 +40,7 @@ export const ChatOption = (props: ChatData) => {
                     className={sharedStyle.link}
                 >
                     <Heading level="3" size="small">
-                        {title || translations.title}
+                        {title ?? translations.title}
                     </Heading>
                 </LenkeBase>
                 {alertText && (
@@ -49,7 +49,7 @@ export const ChatOption = (props: ChatData) => {
                     </Alert>
                 )}
                 <BodyLong as="div" className={sharedStyle.text}>
-                    <ParsedHtml htmlProps={overrideText || ingress || translations.ingress} />
+                    <ParsedHtml htmlProps={overrideText ?? ingress ?? translations.ingress} />
                 </BodyLong>
                 {!alertText && (
                     <TextWithIndicator

packages/nextjs/src/components/_common/contact-option/DefaultOption.tsx

@@ -31,7 +31,7 @@ export const DefaultOption = (props: Props) => {
     ): Partial<React.ComponentProps<typeof LenkeBase>> & { href: string } => {
         if (channel === 'write') {
             return {
-                href: url || Config.urls.skrivTilOss,
+                href: url ?? Config.urls.skrivTilOss,
             };
         }
 
@@ -72,7 +72,7 @@ export const DefaultOption = (props: Props) => {
 
         if (channel === 'custom') {
             return {
-                href: url || '#',
+                href: url ?? '#',
                 target: '_blank',
                 analyticsEvent: AnalyticsEvents.NAVIGATION,
             };
@@ -81,12 +81,12 @@ export const DefaultOption = (props: Props) => {
         return { href: '#' };
     };
 
-    const titleActual = title || (channel !== 'custom' ? getTranslations(channel).title : null);
+    const titleActual = title ?? (channel !== 'custom' ? getTranslations(channel).title : null);
 
     const ingressActual =
-        ingress || (channel !== 'custom' ? getTranslations(channel).ingress : null);
+        ingress ?? (channel !== 'custom' ? getTranslations(channel).ingress : null);
 
-    const iconName = icon || 'place';
+    const iconName = icon ?? 'place';
 
     return (
         <div className={sharedStyle.contactOption}>

packages/nextjs/src/components/_common/contact-option/WriteOption/WriteOption.tsx

@@ -25,13 +25,13 @@ export const WriteOption = ({ ingress, url, alertText, title }: Props) => {
             <Icon type="message" />
             <div className={sharedStyle.content}>
                 <LenkeBase
-                    href={url || Config.urls.skrivTilOss}
+                    href={url ?? Config.urls.skrivTilOss}
                     analyticsLinkGroup={layoutConfig.title}
                     analyticsComponent={'Kontakt-oss kanal'}
                     className={sharedStyle.link}
                 >
                     <Heading level="3" size="small">
-                        {title || translations.title}
+                        {title ?? translations.title}
                     </Heading>
                 </LenkeBase>
                 {alertText && (
@@ -40,7 +40,7 @@ export const WriteOption = ({ ingress, url, alertText, title }: Props) => {
                     </Alert>
                 )}
                 <BodyLong as="div" className={sharedStyle.text}>
-                    <ParsedHtml htmlProps={ingress || translations.ingress} />
+                    <ParsedHtml htmlProps={ingress ?? translations.ingress} />
                 </BodyLong>
             </div>
         </div>

packages/nextjs/src/components/_common/contact-option/openingInfo/helpers/processOpeningHours.ts

@@ -61,7 +61,7 @@ export const processOpeningHours = (
         const dayToCheck = now.add(i, 'day');
 
         const openingHour =
-            getSpecialOpeningHour(specialOpeningHours, dayToCheck) ||
+            getSpecialOpeningHour(specialOpeningHours, dayToCheck) ??
             getRegularOpeningHour(regularOpeningHours, dayToCheck);
 
         openingHours.push(transformOpeningHour({ openingHour, day: dayToCheck }));

packages/nextjs/src/components/_common/content-list/ContentList.tsx

@@ -61,7 +61,7 @@ export const ContentList = ({
     return (
         <Lenkeliste
             lenker={lenkeData}
-            tittel={hideTitle ? undefined : title || content.displayName}
+            tittel={hideTitle ? undefined : (title ?? content.displayName)}
             listType={listType}
             className={className}
         />

packages/nextjs/src/components/_common/expandable/Expandable.tsx

@@ -46,7 +46,7 @@ export const Expandable = ({
         handleStickyScrollOffset(isOpening, accordionRef.current);
         logAnalyticsEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
             tittel,
-            opprinnelse: analyticsOriginTag || 'utvidbar tekst',
+            opprinnelse: analyticsOriginTag ?? 'utvidbar tekst',
             komponent: 'Expandable',
             målgruppe: context,
             innholdstype: innholdsTypeMap[contentProps.type],
@@ -80,7 +80,7 @@ export const Expandable = ({
             ref={accordionRef}
             onToggle={(isOpen) => toggleExpandCollapse(isOpen, title)}
             open={isOpen}
-            aria-label={ariaLabel || title}
+            aria-label={ariaLabel ?? title}
             tabIndex={-1}
         >
             <ExpansionCard.Header className={style.header}>

packages/nextjs/src/components/_common/headers/Header.tsx

@@ -16,10 +16,15 @@ type Props = {
 
 export const Header = ({ children, size, level, anchorId, className }: Props) => {
     const anchor = anchorId ? (anchorId.startsWith('#') ? anchorId : `#${anchorId}`) : undefined;
-    const fallbackSizeByLevel = levelToSize[level] || 'large';
+    const fallbackSizeByLevel = levelToSize[level] ?? 'large';
 
-    return (        
-        <Heading id={anchorId} size={size || fallbackSizeByLevel} level={level} className={classNames(style.header, className)}>
+    return (
+        <Heading
+            id={anchorId}
+            size={size ?? fallbackSizeByLevel}
+            level={level}
+            className={classNames(style.header, className)}
+        >
             {anchor && (level === '2' || level === '3') ? (
                 <a href={anchor} className={style.anchorLink}>
                     {children}

packages/nextjs/src/components/_common/headers/generalPageHeader/GeneralPageHeaderTagLine.tsx

@@ -43,7 +43,7 @@ export const GeneralPageHeaderTagLine = (props: Props) => {
         }
 
         const currentAudienceLabel = getAudienceLabel(currentAudienceKey);
-        const providerTypes = getProviderTypes(currentAudience) || [];
+        const providerTypes = getProviderTypes(currentAudience) ?? [];
         const providerTypesString = joinWithConjunction(
             providerTypes.map((type) => getProviderAudienceLabel(type)),
             language

packages/nextjs/src/components/_common/image/XpImage.tsx

@@ -18,5 +18,5 @@ export const XpImage = ({ imageProps, alt, ...rest }: Props) => {
         return null;
     }
 
-    return <NextImage {...rest} src={imageUrl} alt={alt || ''} />;
+    return <NextImage {...rest} src={imageUrl} alt={alt ?? ''} />;
 };

packages/nextjs/src/components/_common/lenke/lenkeBase/LenkeBase.tsx

@@ -56,9 +56,9 @@ export const LenkeBase = ({
     const analyticsData = {
         komponent: analyticsComponent,
         lenkegruppe: analyticsLinkGroup,
-        seksjon: analyticsLinkGroup || layoutConfig.title,
+        seksjon: analyticsLinkGroup ?? layoutConfig.title,
         destinasjon: url,
-        lenketekst: analyticsLabel || onlyText(children),
+        lenketekst: analyticsLabel ?? onlyText(children),
         målgruppe: context,
         innholdstype: innholdsTypeMap[contentProps.type],
     };
@@ -80,7 +80,7 @@ export const LenkeBase = ({
                 {...rest}
                 href={url}
                 onClick={(e) => {
-                    logAnalyticsEvent(analyticsEvent || AnalyticsEvents.NAVIGATION, analyticsData);
+                    logAnalyticsEvent(analyticsEvent ?? AnalyticsEvents.NAVIGATION, analyticsData);
                     onClick?.(e);
                 }}
                 shallow={shallow}

packages/nextjs/src/components/_common/lenke/lenkeStandalone/LenkeStandalone.tsx

@@ -35,7 +35,7 @@ export const LenkeStandalone = ({
             className={classNames(style.navnoLenke, withChevron && style.withChevron, className)}
             analyticsComponent={component}
             analyticsLinkGroup={linkGroup}
-            analyticsLabel={analyticsLabel || (typeof children === 'string' ? children : undefined)}
+            analyticsLabel={analyticsLabel ?? (typeof children === 'string' ? children : undefined)}
         >
             <BodyShort className={style.lenketekst} as={'span'}>
                 {withChevron && (

packages/nextjs/src/components/_common/metatags/HeadWithMetatags.tsx

@@ -33,7 +33,7 @@ const isNoIndex = (content: ContentProps) =>
     content.isPagePreview || contentTypesWithNoIndex.has(content.type) || content.data?.noindex;
 
 const getCanonicalUrl = (content: ContentProps) => {
-    return content.data?.canonicalUrl || `${appOrigin}${getPublicPathname(content)}`;
+    return content.data?.canonicalUrl ?? `${appOrigin}${getPublicPathname(content)}`;
 };
 
 export const getPageTitle = (content: ContentProps) =>

packages/nextjs/src/components/_common/pageNavigationMenu/SectionNavigation/SectionNavigation.tsx

@@ -32,7 +32,7 @@ const getAnchorsFromComponents = (language: Language, region?: RegionProps) => {
         }
 
         if (component.descriptor === PartType.RelatedSituations) {
-            const actualTitle = component.config?.title || defaultTitle;
+            const actualTitle = component.config?.title ?? defaultTitle;
             return [
                 ...acc,
                 {

packages/nextjs/src/components/_common/parsedHtml/ParsedHtml.tsx

@@ -128,7 +128,7 @@ export const ParsedHtml = ({ htmlProps }: Props) => {
                 return (
                     <NextImage
                         {...props}
-                        alt={attribs.alt || ''}
+                        alt={attribs.alt ?? ''}
                         src={getMediaUrl(attribs.src, !!editorView, language)}
                     />
                 );