feat: branch name rules and router for names containing slash character

Author: dkrizan

ee/backend/app/src/main/kotlin/io/tolgee/ee/api/v2/hateoas/model/branching/CreateBranchModel.kt

@@ -2,13 +2,15 @@ package io.tolgee.ee.api.v2.hateoas.model.branching
 
 import io.swagger.v3.oas.annotations.media.Schema
 import jakarta.validation.constraints.Pattern
+import org.hibernate.validator.constraints.Length
 import org.springframework.hateoas.RepresentationModel
 
 @Suppress("unused")
 open class CreateBranchModel(
   @Schema(description = "Branch name, example = feature/new-feature")
-  @field:Pattern(regexp = "^[a-z0-9]([a-z0-9-_]*[a-z0-9])?$", message = "invalid_pattern")
+  @field:Pattern(regexp = "^[a-z0-9]([a-z0-9-_/]*[a-z0-9])?$", message = "invalid_pattern")
+  @field:Length(min = 2, max = 100, message = "max_length")
   val name: String,
   @Schema(description = "Origin branch id")
   val originBranchId: Long,
-  ) : RepresentationModel<CreateBranchModel>()
+) : RepresentationModel<CreateBranchModel>()

webapp/src/constants/GlobalValidationSchema.tsx

@@ -526,10 +526,10 @@ export class Validation {
     Yup.object().shape({
       name: Yup.string()
         .required()
-        .min(3)
+        .min(2)
         .max(100)
         .matches(
-          /^[a-z0-9]([a-z0-9-_]*[a-z0-9])?$/i,
+          /^[a-z0-9]([a-z0-9-_/]*[a-z0-9])?$/i,
           t('validation_invalid_branch_name')
         ),
     });

webapp/src/constants/links.tsx

@@ -350,6 +350,11 @@ export class LINKS {
   static PROJECT_ADD = Link.ofParent(LINKS.PROJECTS, 'add');
 
   static PROJECT_TRANSLATIONS = Link.ofParent(LINKS.PROJECT, 'translations');
+  static PROJECT_TRANSLATIONS_BRANCHED_VIEW = Link.ofParent(
+    LINKS.PROJECT_TRANSLATIONS,
+    'tree/' + p(PARAMS.TRANSLATIONS_BRANCH) + '*'
+  );
+
   static PROJECT_TRANSLATIONS_BRANCHED = Link.ofParent(
     LINKS.PROJECT_TRANSLATIONS,
     'tree/' + p(PARAMS.TRANSLATIONS_BRANCH)

webapp/src/ee/branching/BranchMergeDetailView.tsx

@@ -401,29 +401,41 @@ export const BranchMergeDetailView: React.FC = () => {
           )}
         </Typography>
         <Box display="flex" alignItems="center">
-          <SuccessChip
-            icon={<CheckCircle width={18} height={18} />}
-            label={<T keyName={'branch_merges_merged_button'} />}
-          />
-          {merge && merge?.mergedAt == null && (
+          {merge && merge.mergedAt && (
+            <SuccessChip
+              icon={<CheckCircle width={18} height={18} />}
+              label={<T keyName={'branch_merges_merged_button'} />}
+            />
+          )}
+          {merge && (
             <>
-              <IconButton
-                onClick={handleOpen}
-                data-cy="project-dashboard-language-menu"
-              >
-                <DotsVertical />
-              </IconButton>
-              <Menu
-                anchorEl={anchorEl}
-                open={Boolean(anchorEl)}
-                onClose={closeWith()}
-              >
-                <MenuItem onClick={closeWith(handleCancel)}>
-                  <Typography color={(theme) => theme.palette.error.main}>
-                    <T keyName="branch_merge_delete_button" />
-                  </Typography>
-                </MenuItem>
-              </Menu>
+              <>
+                {merge.mergedAt && (
+                  <SuccessChip
+                    icon={<CheckCircle width={18} height={18} />}
+                    label={<T keyName={'branch_merges_merged_button'} />}
+                  />
+                )}
+              </>
+              <>
+                <IconButton
+                  onClick={handleOpen}
+                  data-cy="project-dashboard-language-menu"
+                >
+                  <DotsVertical />
+                </IconButton>
+                <Menu
+                  anchorEl={anchorEl}
+                  open={Boolean(anchorEl)}
+                  onClose={closeWith()}
+                >
+                  <MenuItem onClick={closeWith(handleCancel)}>
+                    <Typography color={(theme) => theme.palette.error.main}>
+                      <T keyName="branch_merge_delete_button" />
+                    </Typography>
+                  </MenuItem>
+                </Menu>
+              </>
             </>
           )}
         </Box>

webapp/src/ee/branching/components/BranchForm.tsx

@@ -1,12 +1,13 @@
 import { StandardForm } from 'tg.component/common/form/StandardForm';
 import { components } from 'tg.service/apiSchema.generated';
 import React, { FC } from 'react';
-import { Box } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { TextField } from 'tg.component/common/form/fields/TextField';
 import { FieldLabel } from 'tg.component/FormField';
 import { T, useTranslate } from '@tolgee/react';
 import { Validation } from 'tg.constants/GlobalValidationSchema';
 import { BranchSelectField } from 'tg.component/branching/BranchSelectField';
+import { LabelHint } from 'tg.component/common/LabelHint';
 
 type BranchModel = components['schemas']['BranchModel'];
 
@@ -15,6 +16,13 @@ export type BranchFormValues = {
   originBranchId: number;
 };
 
+const StyledHint = styled(Box)`
+  ul {
+    margin: 0;
+    padding-left: 16px;
+  }
+`;
+
 export const BranchForm: FC<{
   branch?: BranchModel;
   defaultBranch?: BranchModel;
@@ -44,7 +52,20 @@ export const BranchForm: FC<{
         <Box display="flex" mb={2}>
           <Box display="grid" flexGrow={1}>
             <FieldLabel>
-              <T keyName="project_branch_name" />
+              <Box display="flex" alignItems="center" gap={1}>
+                <LabelHint
+                  title={
+                    <StyledHint>
+                      <T
+                        keyName="branch_name_rules"
+                        params={{ ul: <ul />, li: <li /> }}
+                      />
+                    </StyledHint>
+                  }
+                >
+                  <T keyName="project_branch_name" />
+                </LabelHint>
+              </Box>
             </FieldLabel>
             <TextField size="small" name="name" required={true} />
           </Box>

webapp/src/views/projects/ProjectRouter.tsx

@@ -43,7 +43,7 @@ export const ProjectRouter = () => {
           <TranslationsView />
         </Route>
 
-        <Route exact path={LINKS.PROJECT_TRANSLATIONS_BRANCHED.template}>
+        <Route exact path={LINKS.PROJECT_TRANSLATIONS_BRANCHED_VIEW.template}>
           <TranslationsView />
         </Route>