Fix PR comments

frontend/libs/studio-components/src/components/StudioSpinner/StudioSpinner.tsx

@@ -13,18 +13,22 @@ export type StudioSpinnerProps = {
 
 type ParagraphSize = Exclude<SpinnerProps['size'], '2xs' | 'xxsmall' | 'l' | 'xl' | 'xlarge'>;
 
+const convertSpinnerSizeToFittingParagraphSize = (
+  spinnerSize: SpinnerProps['size'],
+): ParagraphSize => {
+  const spinnerSizeIsSmaller = spinnerSize === '2xs' || spinnerSize === 'xxsmall';
+  const spinnerSizeIsBigger =
+    spinnerSize === 'xl' || spinnerSize === 'lg' || spinnerSize === 'xlarge';
+  return spinnerSizeIsSmaller ? 'xs' : spinnerSizeIsBigger ? 'md' : spinnerSize;
+};
+
 export const StudioSpinner = forwardRef<HTMLDivElement, StudioSpinnerProps>(
   (
     { spinnerTitle, showSpinnerTitle = false, size = 'medium', variant = 'interaction', ...rest },
     ref,
   ): JSX.Element => {
     const spinnerDescriptionId = useId();
-    const paragraphSize: ParagraphSize =
-      size === '2xs' || size === 'xxsmall'
-        ? 'xs'
-        : size === 'xl' || size === 'lg' || size === 'xlarge'
-          ? 'md'
-          : size;
+    const paragraphSize: ParagraphSize = convertSpinnerSizeToFittingParagraphSize(size);
 
     return (
       <div className={classes.spinnerWrapper} ref={ref} {...rest}>

frontend/packages/ux-editor/src/components/config/editModal/EditImage/ConflictingImageSourceAlert/ConflictingImageSourceAlert.tsx

@@ -13,7 +13,7 @@ export const ConflictingImageSourceAlert = ({
   conflictSource,
 }: ConflictingImageSourceAlertProps) => {
   const { t } = useTranslation();
-  
+
   return (
     showAlert && (
       <Alert size='small' className={classes.alert}>

frontend/packages/ux-editor/src/components/config/editModal/EditImage/EditImage.tsx

@@ -9,6 +9,13 @@ import classes from './EditImage.module.css';
 import { useDeleteImageMutation } from 'app-shared/hooks/mutations/useDeleteImageMutation';
 import { LocalImage } from './LocalImage';
 import { ExternalImage } from './ExternalImage';
+import {
+  extractFileNameFromImageSrc,
+  updateComponentWithDeletedImageReference,
+  updateComponentWithImage,
+} from './EditImageUtils';
+
+export const WWWROOT_FILE_PATH = 'wwwroot/';
 
 enum ImageTab {
   Import = 'import',
@@ -31,30 +38,15 @@ export const EditImage = ({ component, handleComponentChange }: EditImageProps)
   const fileName = extractFileNameFromImageSrc(component.image?.src?.nb, org, app);
   const imageOriginsFromLibrary = !imageFileNamesArePending && imageFileNames?.includes(fileName);
 
-  const handleImageChange = async (imageSource: string, fromUrl: boolean = false) => {
-    const updatedComponent = updateComponentWithImage(
-      fromUrl ? imageSource : `wwwroot/${imageSource}`,
-    );
+  const handleImageChange = async (imageSource: string) => {
+    const updatedComponent = updateComponentWithImage(component, imageSource);
     handleComponentChange(updatedComponent);
     await refetchImageFileNames();
   };
-  const updateComponentWithImage = (imageSource: string) => {
-    return {
-      ...component,
-      image: {
-        ...component.image,
-        src: {
-          ...component.image?.src,
-          nb: imageSource, // How to handle different images for different languages?
-        },
-      },
-    };
-  };
+
   const handleDeleteImageReference = () => {
-    component.image.src = {};
-    handleComponentChange({
-      ...component,
-    });
+    const updateComponent = updateComponentWithDeletedImageReference(component);
+    handleComponentChange(updateComponent);
   };
 
   const handleDeleteImage = (fileNameToDelete: string) => {
@@ -85,23 +77,11 @@ export const EditImage = ({ component, handleComponentChange }: EditImageProps)
       <Tabs.Content value={ImageTab.ExternalUrl} className={classes.urlTab}>
         <ExternalImage
           existingImageUrl={imageOriginsFromLibrary ? undefined : component.image?.src?.nb}
-          onUrlChange={(imageSrc: string) => handleImageChange(imageSrc, true)}
+          onUrlChange={handleImageChange}
           onUrlDelete={handleDeleteImageReference}
           imageOriginsFromLibrary={imageOriginsFromLibrary}
         />
       </Tabs.Content>
     </Tabs>
   );
 };
-
-const extractFileNameFromImageSrc = (imageSrc: string, org: string, app: string) => {
-  if (!imageSrc) return '';
-  const relativeFilePath = `/${org}/${app}/`;
-  const wwwroot = 'wwwroot/';
-  const indexOfRelativePath: number = imageSrc.indexOf(relativeFilePath);
-  const indexOfWwwroot: number = imageSrc.indexOf(wwwroot);
-  if (indexOfRelativePath > -1)
-    return imageSrc.slice(indexOfRelativePath + relativeFilePath.length);
-  if (indexOfWwwroot > -1) return imageSrc.slice(indexOfRelativePath + wwwroot.length + 1); // why do I need this +1
-  return imageSrc; // What to return?
-};

frontend/packages/ux-editor/src/components/config/editModal/EditImage/EditImageUtils.ts

@@ -0,0 +1,38 @@
+import type { FormItem } from '@altinn/ux-editor/types/FormItem';
+import type { ComponentType } from 'app-shared/types/ComponentType';
+import { WWWROOT_FILE_PATH } from './EditImage';
+
+export const updateComponentWithImage = (
+  component: FormItem<ComponentType.Image>,
+  imageSource: string,
+) => {
+  return {
+    ...component,
+    image: {
+      ...component.image,
+      src: {
+        ...component.image?.src,
+        nb: imageSource, // How to handle different images for different languages?
+      },
+    },
+  };
+};
+
+export const updateComponentWithDeletedImageReference = (
+  component: FormItem<ComponentType.Image>,
+) => {
+  component.image.src = {};
+  return component;
+};
+
+export const extractFileNameFromImageSrc = (imageSrc: string, org: string, app: string) => {
+  if (!imageSrc) return '';
+  const relativeFilePath = `/${org}/${app}/`;
+  const indexOfRelativePathInImageSource: number = imageSrc.indexOf(relativeFilePath);
+  const indexOfWwwrootInImageSource: number = imageSrc.indexOf(WWWROOT_FILE_PATH);
+  if (indexOfRelativePathInImageSource > -1)
+    return imageSrc.slice(indexOfRelativePathInImageSource + relativeFilePath.length);
+  if (indexOfWwwrootInImageSource > -1)
+    return imageSrc.slice(indexOfWwwrootInImageSource + WWWROOT_FILE_PATH.length);
+  return imageSrc; // What to return?
+};

frontend/packages/ux-editor/src/components/config/editModal/EditImage/ExternalImage/ExternalImage.tsx

@@ -8,6 +8,7 @@ import { useValidateImageExternalUrlQuery } from 'app-shared/hooks/queries/useVa
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import type { TFunction } from 'i18next';
 import { ConflictingImageSourceAlert } from '../ConflictingImageSourceAlert';
+import type { ExternalImageUrlValidationResponse } from 'app-shared/types/api/ExternalImageUrlValidationResponse';
 
 export interface ExternalImageProps {
   existingImageUrl: string;
@@ -44,7 +45,7 @@ export const ExternalImage = ({
     }
   };
 
-  const handleValidation = (validation: string) => {
+  const handleValidation = (validation: ExternalImageUrlValidationResponse): string => {
     if (validation === 'Ok') {
       return '';
     } else if (validation === 'NotValidUrl') {

frontend/packages/ux-editor/src/components/config/editModal/EditImage/LocalImage/ImportImage/AddImageFromLibrary/ChooseFromLibrary.tsx

@@ -24,23 +24,46 @@ export const ChooseFromLibrary = ({ onAddImageReference }: ChooseFromLibraryProp
         </StudioParagraph>
       ) : (
         imagesFileNames.map((imageFileName) => (
-          <div key={imageFileName} className={classes.card}>
-            <Card onClick={() => onAddImageReference(imageFileName)}>
-              <Card.Media>
-                <img src={imagePath(org, app, imageFileName)} alt='' />
-              </Card.Media>
-              <Card.Header>
-                <Heading size='xs' className={classes.fileName} title={imageFileName}>
-                  {imageFileName}
-                </Heading>
-              </Card.Header>
-              <Card.Content className={classes.missingFileDescription}>
-                {t('ux_editor.properties_panel.images.description_missing')}
-              </Card.Content>
-            </Card>
-          </div>
+          <ImageFromLibrary
+            key={imageFileName}
+            imageFileName={imageFileName}
+            onAddImageReference={onAddImageReference}
+            imageSource={imagePath(org, app, imageFileName)}
+          />
         ))
       )}
     </div>
   );
 };
+
+interface ImageFromLibraryProps {
+  imageFileName: string;
+  onAddImageReference: (fileName: string) => void;
+  imageSource: string;
+}
+
+const ImageFromLibrary = ({
+  imageFileName,
+  onAddImageReference,
+  imageSource,
+}: ImageFromLibraryProps) => {
+  const { t } = useTranslation();
+  // The img component requires an alt which we can set to be the descriptions from the metadata in the library when this is available.
+  return (
+    <div className={classes.card}>
+      <Card onClick={() => onAddImageReference(imageFileName)}>
+        <Card.Media>
+          <img src={imageSource} alt='' />
+        </Card.Media>
+        <Card.Header>
+          <Heading size='xs' className={classes.fileName} title={imageFileName}>
+            {imageFileName}
+          </Heading>
+        </Card.Header>
+        <Card.Content className={classes.missingFileDescription}>
+          {t('ux_editor.properties_panel.images.description_missing')}
+        </Card.Content>
+      </Card>
+    </div>
+  );
+};

frontend/packages/ux-editor/src/components/config/editModal/EditImage/LocalImage/ImportImage/ImportImage.tsx

@@ -9,6 +9,7 @@ import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils';
 import { UploadImage } from './UploadImage/UploadImage';
 import { useTranslation } from 'react-i18next';
 import { OverrideExistingImageModal } from './OverrideExistingImageModal/OverrideExistingImageModal';
+import { WWWROOT_FILE_PATH } from '../../../EditImage/EditImage';
 
 interface ImportImageProps {
   onImageChange: (imageSource: string) => void;
@@ -39,7 +40,7 @@ export const ImportImage = ({ onImageChange }: ImportImageProps) => {
       }
       try {
         await uploadImage(formData);
-        onImageChange(imageFile.name);
+        onImageChange(`${WWWROOT_FILE_PATH}${imageFile.name}`);
       } catch (error) {
         setShowOverrideExistingImageModalOpen(true);
       }

frontend/packages/ux-editor/src/components/config/editModal/EditImage/LocalImage/PreviewImageSummary/PreviewFileInfo.module.css

@@ -0,0 +1,18 @@
+.fileDescription,
+.fileName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fileName {
+  font-weight: bold;
+}
+
+.missingFileDescription {
+  font-style: italic;
+}
+
+.fileInfoContainer {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

frontend/packages/ux-editor/src/components/config/editModal/EditImage/LocalImage/PreviewImageSummary/PreviewFileInfo.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import classes from './PreviewFileInfo.module.css';
+import { StudioParagraph } from '@studio/components';
+import { useTranslation } from 'react-i18next';
+
+interface PreviewFileInfoProps {
+  existingImageUrl: string;
+  existingImageDescription?: string;
+}
+
+export const PreviewFileInfo = ({
+  existingImageUrl,
+  existingImageDescription,
+}: PreviewFileInfoProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={classes.fileInfoContainer}>
+      <StudioParagraph size='small' className={classes.fileName}>
+        {existingImageUrl}
+      </StudioParagraph>
+      {existingImageDescription ? (
+        <StudioParagraph size='small' className={classes.fileDescription}>
+          {existingImageDescription}
+        </StudioParagraph>
+      ) : (
+        <StudioParagraph size='small' className={classes.missingFileDescription}>
+          {t('ux_editor.properties_panel.images.description_missing')}
+        </StudioParagraph>
+      )}
+    </div>
+  );
+};

frontend/packages/ux-editor/src/components/config/editModal/EditImage/LocalImage/PreviewImageSummary/PreviewImageSummary.module.css

@@ -6,25 +6,6 @@
   margin: 0 var(--fds-spacing-5);
 }
 
-.fileDescription,
-.fileName {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.fileName {
-  font-weight: bold;
-}
-
-.missingFileDescription {
-  font-style: italic;
-}
-
-.fileInfoContainer {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .fileIcon {
   font-size: var(--fds-sizing-5);
 }

frontend/packages/ux-editor/src/components/config/editModal/EditImage/LocalImage/PreviewImageSummary/PreviewImageSummary.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { ImageIcon } from '@studio/icons';
-import { StudioDeleteButton, StudioParagraph } from '@studio/components';
+import { StudioDeleteButton } from '@studio/components';
 import classes from './PreviewImageSummary.module.css';
 import { useTranslation } from 'react-i18next';
 import { DeleteOptionsModal } from './DeleteOptionsModal/DeleteOptionsModal';
 import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils';
+import { PreviewFileInfo } from '@altinn/ux-editor/components/config/editModal/EditImage/LocalImage/PreviewImageSummary/PreviewFileInfo';
 
 export interface PreviewImageSummaryProps {
   existingImageUrl: string;
@@ -25,20 +26,10 @@ export const PreviewImageSummary = ({
   return (
     <div className={classes.previewContainer}>
       <ImageIcon className={classes.fileIcon} />
-      <div className={classes.fileInfoContainer}>
-        <StudioParagraph size='small' className={classes.fileName}>
-          {existingImageUrl}
-        </StudioParagraph>
-        {existingImageDescription ? (
-          <StudioParagraph size='small' className={classes.fileDescription}>
-            {existingImageDescription}
-          </StudioParagraph>
-        ) : (
-          <StudioParagraph size='small' className={classes.missingFileDescription}>
-            {t('ux_editor.properties_panel.images.description_missing')}
-          </StudioParagraph>
-        )}
-      </div>
+      <PreviewFileInfo
+        existingImageUrl={existingImageUrl}
+        existingImageDescription={existingImageDescription}
+      />
       <StudioDeleteButton
         title={t('ux_editor.properties_panel.images.delete_image_reference_title')}
         variant='tertiary'