EDM-2290: Align to UX design

Author: celdrake

libs/i18n/locales/en/translation.json

@@ -345,15 +345,18 @@
   "Content is base64 encoded": "Content is base64 encoded",
   "Delete file": "Delete file",
   "Add file": "Add file",
-  "Inline application": "Inline application",
-  "Image based application": "Image based application",
-  "Compose": "Compose",
-  "Quadlet": "Quadlet",
+  "Quadlet application": "Quadlet application",
+  "Compose application": "Compose application",
   "Application {{ appNum }}": "Application {{ appNum }}",
   "Application type": "Application type",
   "Select an application type": "Select an application type",
-  "Application format": "Application format",
-  "Select an application format": "Select an application format",
+  "Definition source": "Definition source",
+  "Configuration Sources": "Configuration Sources",
+  "OCI reference": "OCI reference",
+  "Pull definitions from container registry (reusable, versioned).": "Pull definitions from container registry (reusable, versioned).",
+  "Inline": "Inline",
+  "Define application files directly in this interface (custom, one-off).": "Define application files directly in this interface (custom, one-off).",
+  "OCI reference URL": "OCI reference URL",
   "Application name": "Application name",
   "The unique identifier for this application.": "The unique identifier for this application.",
   "If not specified, the image name will be used. Application name must be unique.": "If not specified, the image name will be used. Application name must be unique.",
@@ -362,6 +365,7 @@
   "Add an application variable": "Add an application variable",
   "Application workloads": "Application workloads",
   "Define the application workloads that shall run on the device.": "Define the application workloads that shall run on the device.",
+  "Configure containerized applications and services that will run on your fleet devices. You can deploy single containers, Quadlet applications for advanced container orchestration or inline applications with custom files.": "Configure containerized applications and services that will run on your fleet devices. You can deploy single containers, Quadlet applications for advanced container orchestration or inline applications with custom files.",
   "Delete application": "Delete application",
   "Add application": "Add application",
   "(0777) Read, write, and execute permissions for all users.": "(0777) Read, write, and execute permissions for all users.",
@@ -433,8 +437,9 @@
   "The device will download and apply updates as soon as they are available.": "The device will download and apply updates as soon as they are available.",
   "Device alias": "Device alias",
   "Device labels": "Device labels",
+  "Quadlet": "Quadlet",
+  "Compose": "Compose",
   "Image based": "Image based",
-  "Inline": "Inline",
   "Unnamed": "Unnamed",
   "Device fleet": "Device fleet",
   "Edge Manager will not manage system image": "Edge Manager will not manage system image",
@@ -667,7 +672,7 @@
   "Use alphanumeric characters, or underscore (_)": "Use alphanumeric characters, or underscore (_)",
   "Variable value is required.": "Variable value is required.",
   "Variable names of an application must be unique": "Variable names of an application must be unique",
-  "Application type is required": "Application type is required",
+  "Definition source is required": "Definition source is required",
   "Name is required for {{ appType }} applications.": "Name is required for {{ appType }} applications.",
   "Use lowercase alphanumeric characters, or dash (-). Must start and end with an alphanumeric character.": "Use lowercase alphanumeric characters, or dash (-). Must start and end with an alphanumeric character.",
   "File path is required": "File path is required",
@@ -679,6 +684,8 @@
   "Unsupported quadlet file type {{ extension }}. Supported types: {{ supportedTypes }}": "Unsupported quadlet file type {{ extension }}. Supported types: {{ supportedTypes }}",
   "Quadlet application must include at least one of the following file types: {{ supportedTypes }}": "Quadlet application must include at least one of the following file types: {{ supportedTypes }}",
   "Quadlet files must be at root level (no subdirectories)": "Quadlet files must be at root level (no subdirectories)",
+  "Definition source must be image for this type of applications": "Definition source must be image for this type of applications",
+  "Application type is required": "Application type is required",
   "Image is required.": "Image is required.",
   "Application image includes invalid characters.": "Application image includes invalid characters.",
   "Application name must be unique.": "Application name must be unique.",

libs/ui-components/src/components/DetailsPage/Tables/ApplicationsTable.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Bullseye } from '@patternfly/react-core';
+import { Bullseye, Label } from '@patternfly/react-core';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
 import { DeviceApplicationStatus } from '@flightctl/types';
@@ -35,6 +35,7 @@ const ApplicationsTable = ({ appsStatus, specApps }: ApplicationsTableProps) =>
           <Th modifier="wrap">{t('Status')}</Th>
           <Th modifier="wrap">{t('Ready')}</Th>
           <Th modifier="wrap">{t('Restarts')}</Th>
+          <Th modifier="wrap">{t('Type')}</Th>
         </Tr>
       </Thead>
       <Tbody>
@@ -43,6 +44,7 @@ const ApplicationsTable = ({ appsStatus, specApps }: ApplicationsTableProps) =>
             status: null,
             ready: '-',
             restarts: '-',
+            appType: null,
           };
 
           return (
@@ -53,6 +55,9 @@ const ApplicationsTable = ({ appsStatus, specApps }: ApplicationsTableProps) =>
               </Td>
               <Td dataLabel={t('Ready')}>{appDetails.ready}</Td>
               <Td dataLabel={t('Restarts')}>{appDetails.restarts}</Td>
+              <Td dataLabel={t('Type')}>
+                {appDetails.appType ? <Label variant="outline">{appDetails.appType}</Label> : '-'}
+              </Td>
             </Tr>
           );
         })}

libs/ui-components/src/components/Device/EditDeviceWizard/deviceSpecUtils.ts

@@ -10,7 +10,6 @@ import {
   GitConfigProviderSpec,
   HttpConfigProviderSpec,
   ImageMountVolumeProviderSpec,
-  ImagePullPolicy,
   InlineApplicationProviderSpec,
   InlineConfigProviderSpec,
   KubernetesSecretProviderSpec,
@@ -231,21 +230,19 @@ export const toAPIApplication = (app: AppForm): ApplicationProviderSpec => {
   if (isImageAppForm(app)) {
     const data: ApplicationProviderSpec = {
       image: app.image,
+      appType: app.appType,
       envVars,
       volumes,
     };
     if (app.name) {
       data.name = app.name;
     }
-    if (app.appType) {
-      data.appType = app.appType;
-    }
     return data;
   }
 
   return {
     name: app.name,
-    appType: app.appType || AppType.AppTypeCompose,
+    appType: app.appType,
     inline: app.files.map(
       (file): InlineApplicationFileFixed => ({
         path: file.path,
@@ -397,22 +394,24 @@ const getAppFormVariables = (app: ApplicationProviderSpecFixed) =>
 export const getApplicationValues = (deviceSpec?: DeviceSpec): AppForm[] => {
   const apps = deviceSpec?.applications || [];
   return apps.map((app) => {
+    if (!app.appType) {
+      throw new Error('Application appType is required');
+    }
     if (isImageAppProvider(app)) {
       return {
         specType: AppSpecType.OCI_IMAGE,
         name: app.name || '',
         image: app.image,
-        appType: app.appType,
+        appType: app.appType as AppType.AppTypeCompose | AppType.AppTypeQuadlet,
         variables: getAppFormVariables(app),
         volumes: app.volumes || [],
       };
     }
 
-    // Inline applications can either be "Compose" or "Quadlet"
     const inlineApp = app as InlineApplicationProviderSpec;
     return {
       specType: AppSpecType.INLINE,
-      appType: app.appType || AppType.AppTypeCompose,
+      appType: app.appType,
       name: app.name || '',
       files: inlineApp.inline,
       variables: getAppFormVariables(app),