[BUG] Improve stack naming and validation logic.

client/src/components/ComposeEditor/StackPanel.tsx

@@ -77,7 +77,13 @@ const StackPanel: React.FC<StackPanelProps> = ({
             name={'name'}
             label={'Stack name'}
             initialValue={generateReadableName()}
-            rules={[{ required: true, message: 'Please enter a name' }]}
+            rules={[
+              { required: true, message: 'Please enter a name' },
+              {
+                pattern: /^(?!.*[:\/\\_.]).*$/,
+                message: 'Characters not allowed',
+              },
+            ]}
             fieldProps={{
               addonBefore: (
                 <StackIconSelector

client/src/pages/ComposeEditor/index.tsx

@@ -397,7 +397,13 @@ const ComposeEditor = () => {
                 <ProFormText
                   name={'name'}
                   placeholder={'Name'}
-                  rules={[{ required: true, message: 'Please enter a name' }]}
+                  rules={[
+                    { required: true, message: 'Please enter a name' },
+                    {
+                      pattern: /^(?!.*[:\/\\_.]).*$/,
+                      message: 'Characters not allowed',
+                    },
+                  ]}
                   fieldProps={{
                     ref: nameRef,
                     defaultValue:

server/src/helpers/docker/utils.ts

@@ -0,0 +1,14 @@
+import yaml from 'js-yaml';
+import logger from '../../logger';
+
+export function extractTopLevelName(content: string): string | undefined {
+  try {
+    const parsedYaml = yaml.load(content);
+    if (typeof parsedYaml === 'object' && parsedYaml !== null) {
+      return (parsedYaml as { [key: string]: any }).name;
+    }
+  } catch (err: any) {
+    logger.error('Error parsing YAML:' + err.message);
+  }
+  return undefined;
+}

server/src/modules/repository/ContainerCustomStacksRepositoryComponent.ts

@@ -10,6 +10,7 @@ import ContainerCustomStack from '../../data/database/model/ContainerCustomStack
 import ContainerCustomStackRepository from '../../data/database/model/ContainerCustomStackRepository';
 import ContainerCustomStackRepo from '../../data/database/repository/ContainerCustomStackRepo';
 import ContainerStacksRepositoryRepo from '../../data/database/repository/ContainerCustomStackRepositoryRepo';
+import { extractTopLevelName } from '../../helpers/docker/utils';
 import { FileInfo, getMatchingFiles } from '../../helpers/files/recursive-find';
 import logger from '../../logger';
 import { NotFoundError } from '../../middlewares/api/ApiError';
@@ -152,11 +153,18 @@ class ContainerCustomStacksRepositoryComponent extends EventManager {
       `Processing stack ${JSON.stringify(foundStack)} - In database: ${stackFoundInDatabase ? 'true' : 'false'}`,
     );
     const stackContent = FileSystemManager.readFile(foundStack.fullPath as string);
+    const embeddedProjectName = extractTopLevelName(stackContent);
     const stackData: ContainerCustomStack = {
       path: foundStack.fullPath,
       name:
         stackFoundInDatabase?.name ||
-        foundStack.fullPath.split(`${this.uuid}/`)[1].replaceAll('/', '_').toLowerCase(),
+        embeddedProjectName ||
+        foundStack.fullPath
+          .split(`${this.uuid}/`)[1]
+          .replaceAll('/', '-')
+          .replaceAll(':', '-')
+          .replaceAll('.', '-')
+          .toLowerCase(),
       containerCustomStackRepository: containerCustomStackRepository,
       uuid: stackFoundInDatabase?.uuid || uuidv4(),
       lockJson: true,

shared-lib/src/types/api.ts

@@ -865,6 +865,7 @@ export type ContainerCustomStack = {
   json: object;
   yaml: string;
   name: string;
+  type: string;
   rawStackValue: object;
   lockJson: boolean;
   icon: string;