DRAFT: Making namespaces as a hidden feature

Closes tolgee#2594

TODO.md

@@ -0,0 +1,4 @@
+* Save settings to DB
+* Hide select boxes by the settings
+* Add liquibase changeset for customers already using namespaces, disable them only when there are none
+  * Default is off, set it to on for customers who already use it

backend/data/src/main/kotlin/io/tolgee/dtos/request/project/EditProjectRequest.kt

@@ -13,6 +13,7 @@ data class EditProjectRequest(
   @field:Pattern(regexp = "^[a-z0-9-]*[a-z]+[a-z0-9-]*$", message = "invalid_pattern")
   var slug: String? = null,
   var baseLanguageId: Long? = null,
+  var useNamespaces: Boolean = false,
   var defaultNamespaceId: Long? = null,
   @field:Size(min = 3, max = 2000)
   var description: String? = null,

backend/data/src/main/kotlin/io/tolgee/model/Project.kt

@@ -125,6 +125,9 @@ class Project(
   @ColumnDefault("true")
   override var icuPlaceholders: Boolean = true
 
+  @ColumnDefault("false")
+  var useNamespaces: Boolean = false
+
   @ColumnDefault("0")
   var lastTaskNumber: Long = 0
 

backend/data/src/main/kotlin/io/tolgee/service/project/ProjectService.kt

@@ -180,6 +180,7 @@ class ProjectService(
     project.name = dto.name
     project.description = dto.description
     project.icuPlaceholders = dto.icuPlaceholders
+    project.useNamespaces = dto.useNamespaces
 
     if (project.defaultNamespace != null) {
       namespaceService.deleteUnusedNamespaces(listOf(project.defaultNamespace!!))

webapp/src/service/apiSchema.generated.ts

@@ -1152,6 +1152,7 @@ export interface components {
       slug?: string;
       /** Format: int64 */
       baseLanguageId?: number;
+      useNamespaces: boolean;
       /** Format: int64 */
       defaultNamespaceId?: number;
       description?: string;
@@ -1336,6 +1337,7 @@ export interface components {
       avatar?: components["schemas"]["Avatar"];
       organizationOwner?: components["schemas"]["SimpleOrganizationModel"];
       baseLanguage?: components["schemas"]["LanguageModel"];
+      useNamespaces: boolean;
       defaultNamespace?: components["schemas"]["NamespaceModel"];
       organizationRole?: "MEMBER" | "OWNER";
       directPermission?: components["schemas"]["PermissionModel"];

webapp/src/views/projects/project/ProjectSettingsGeneral.tsx

@@ -15,11 +15,13 @@ import { Box, styled } from '@mui/material';
 import { ProjectLanguagesProvider } from 'tg.hooks/ProjectLanguagesProvider';
 import { useProjectNamespaces } from 'tg.hooks/useProjectNamespaces';
 import { DefaultNamespaceSelect } from './components/DefaultNamespaceSelect';
+import { UseNamespacesCheckbox } from './components/UseNamespacesCheckbox';
 
 type FormValues = {
   name: string;
   description: string | undefined;
   baseLanguageId: number | undefined;
+  useNamespaces: boolean | false;
   defaultNamespaceId: number | '';
 };
 
@@ -49,6 +51,15 @@ const LanguageSelect = () => {
   );
 };
 
+const NamespacesCheckbox = () => {
+  return (
+    <UseNamespacesCheckbox
+      label={<T keyName="project_settings_use_namespaces" />}
+      name="useNamespaces"
+    />
+  );
+};
+
 const NamespaceSelect = () => {
   const { allNamespacesWithNone } = useProjectNamespaces();
   return (
@@ -69,6 +80,7 @@ export const ProjectSettingsGeneral = () => {
     name: project.name,
     baseLanguageId: project.baseLanguage?.id,
     description: project.description ?? '',
+    useNamespaces: project.useNamespaces ?? false,
     defaultNamespaceId: defaultNamespace?.id ?? '',
   } satisfies FormValues;
 
@@ -82,6 +94,7 @@ export const ProjectSettingsGeneral = () => {
     const data = {
       ...values,
       description: values.description || undefined,
+      useNamespaces: values.useNamespaces || false,
       defaultNamespaceId:
         values.defaultNamespaceId === 0 ? undefined : values.defaultNamespaceId,
     };
@@ -157,6 +170,7 @@ export const ProjectSettingsGeneral = () => {
           <ProjectLanguagesProvider>
             <LanguageSelect />
           </ProjectLanguagesProvider>
+          <NamespacesCheckbox />
           <NamespaceSelect />
         </Box>
       </StandardForm>

webapp/src/views/projects/project/components/UseNamespacesCheckbox.tsx

@@ -0,0 +1,24 @@
+import { FC, ReactNode } from 'react';
+import { Box, Checkbox, MenuItem } from '@mui/material';
+
+import { Select } from 'tg.component/common/form/fields/Select';
+import { components } from 'tg.service/apiSchema.generated';
+import { FieldLabel } from 'tg.component/FormField';
+import { useTranslate } from '@tolgee/react';
+
+export const UseNamespacesCheckbox: FC<{
+  label?: ReactNode;
+  name: string;
+}> = (props) => {
+  return (
+    <Box>
+      <FieldLabel>{props.label}</FieldLabel>
+      <Checkbox
+        data-cy="default-namespace-select"
+        sx={{ mt: 0 }}
+        name={props.name}
+        size="small"
+      />
+    </Box>
+  );
+};

webapp/src/views/projects/translations/KeyCreateForm/FormBody.tsx

@@ -126,7 +126,7 @@ export const FormBody: React.FC<Props> = ({ onCancel, autofocus }) => {
             {({ field, form }: FieldProps<any>) => {
               return (
                 <div>
-                  <FieldLabel>
+                  <FieldLabel> {/*TODO tady možná taky*/}
                     <LabelHint title={t('translation_single_namespace_hint')}>
                       <T keyName="translation_single_label_namespace" />
                     </LabelHint>

webapp/src/views/projects/translations/KeyEdit/KeyGeneral.tsx

@@ -67,10 +67,11 @@ export const KeyGeneral = () => {
           </EditorWrapper>
           <FieldError error={errors.name} />
         </StyledSection>
+        {/*<ConditionalFormItem>*/}
         <StyledSection>
           <FieldLabel>
             <LabelHint title={t('translations_key_edit_label_namespace_hint')}>
-              {t('translations_key_edit_label_namespace')}
+              {t('translations_key_edit_label_namespace')} tady
             </LabelHint>
           </FieldLabel>
           <NamespaceSelector
@@ -84,6 +85,7 @@ export const KeyGeneral = () => {
           />
           <FieldError error={errors.namespace} />
         </StyledSection>
+        {/*</ConditionalFormItem>*/}
       </StyledKeyNsContainer>
 
       <StyledSection>