Fixed error message and wraped input field with FormField

Altinn · Dec 15, 2023 · 3f3da2b · 3f3da2b
1 parent e256848
commit 3f3da2b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 28 deletions.
diff --git a/frontend/app-development/features/appPublish/components/createAppReleaseComponent.module.css b/frontend/app-development/features/appPublish/components/createAppReleaseComponent.module.css
@@ -5,12 +5,7 @@
   gap: 1rem;
 }
 
-.createReleaseInvalidTagName {
-  background-color: #fbf6bd;
-  padding: 1.2rem;
-  padding: 1.2rem 0 1.2rem 0;
-}
-
 .releaseVersionInput {
   width: 50%;
+  margin-bottom: 8px;
 }
diff --git a/frontend/app-development/features/appPublish/components/createAppReleaseComponent.tsx b/frontend/app-development/features/appPublish/components/createAppReleaseComponent.tsx
@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import classes from './createAppReleaseComponent.module.css';
 import type { ChangeEvent } from 'react';
-import { LegacyTextField, Button, LegacyTextArea } from '@digdir/design-system-react';
+import { Button, Textfield, Textarea } from '@digdir/design-system-react';
 import { versionNameValid } from './utils';
 import { useBranchStatusQuery, useAppReleasesQuery } from '../../../hooks/queries';
 import { useCreateReleaseMutation } from '../../../hooks/mutations';
 import { useTranslation } from 'react-i18next';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { FormField } from '../../../../packages/shared/src/components/FormField/FormField';
 
 export function CreateReleaseComponent() {
   const { org, app } = useStudioUrlParams();
@@ -37,27 +38,40 @@ export function CreateReleaseComponent() {
 
   return (
     <div className={classes.createReleaseForm}>
-      {!versionNameValid(releases, tagName) ? (
-        <div className={classes.createReleaseInvalidTagName}>
-          {t('app_create_release.release_versionnumber_validation')}
-        </div>
-      ) : null}
-      <div className={classes.releaseVersionInput}>
-        <LegacyTextField
-          label={t('app_create_release.release_versionnumber')}
-          onChange={handleTagNameChange}
-          value={tagName}
-          isValid={versionNameValid(releases, tagName)}
-        />
-      </div>
-      <div>
-        <LegacyTextArea
-          label={t('app_create_release.release_description')}
-          value={body}
-          onChange={handleBodyChange}
-          rows={4}
-        />
-      </div>
+      <FormField
+        value={tagName}
+        customValidationRules={(value: string) => {
+          const trimmedValue = value.trim().toLowerCase();
+          if (releases.some((release) => release.tagName.toLowerCase() === trimmedValue)) {
+            return t('app_create_release.release_versionnumber_already_exists');
+          }
+          return versionNameValid(releases, trimmedValue)
+            ? ''
+            : t('app_create_release.release_versionnumber_validation');
+        }}
+        customValidationMessages={(errorCode) => errorCode}
+        renderField={({ fieldProps }) => (
+          <div className={classes.releaseVersionInput}>
+            <Textfield
+              {...fieldProps}
+              label={t('app_create_release.release_versionnumber')}
+              onChange={handleTagNameChange}
+            />
+          </div>
+        )}
+      />
+      <FormField
+        value={body}
+        renderField={({ fieldProps }) => (
+          <Textarea
+            {...fieldProps}
+            label={t('app_create_release.release_description')}
+            value={body}
+            onChange={handleBodyChange}
+            rows={4}
+          />
+        )}
+      />
       <div>
         <Button
           onClick={handleBuildVersionClick}

diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -28,6 +28,7 @@
   "app_create_release.release_creating": "Bygger en ny versjon av applikasjonen, startet av",
   "app_create_release.release_description": "Beskriv innholdet i versjonen",
   "app_create_release.release_versionnumber": "Versjonsnummer",
+  "app_create_release.release_versionnumber_already_exists": "Et versjonnummer med det navnet finnes allerede.",
   "app_create_release.release_versionnumber_validation": "Må være en unik kombinasjon av tall, små bokstaver (a-z) og spesialtegnene \".\" og \"-\". Maks 128 tegn.",
   "app_create_release.still_building_release": "Bygger fortsatt versjon {{version}}",
   "app_create_release_errors.build_cannot_be_saved": "Huff da, vi opplever en teknisk feil som fører til at applikasjonen ikke blir bygget. Forsøk å laste siden på nytt (f5). Dersom problemet vedvarer, kontakt",