Add checkbox for adding tutorials when creating new space and fix UI …

…issue in Mozilla regarding the URL input (#7447)
alkem-io · Jan 17, 2025 · 40d077b · 40d077b
1 parent a393c76
commit 40d077b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 25 deletions.
diff --git a/src/core/i18n/en/translation.en.json b/src/core/i18n/en/translation.en.json
@@ -3034,6 +3034,7 @@
   },
   "createSpace": {
     "title": "Create a Space",
+    "addTutorialsLabel": "Show Tutorials in this Space",
     "terms": {
       "checkboxLabel": "I have read and accept the <terms>terms and agreements (click here to open them)</terms> for creating a Space.",
       "dialogTitle": "Terms and Conditions for creating a Space",

diff --git a/src/core/utils/nameId/NameIdField.tsx b/src/core/utils/nameId/NameIdField.tsx
@@ -39,6 +39,7 @@ const NameIdField = ({
     <FormikInputField
       {...props}
       name={name}
+      sx={{ whiteSpace: 'nowrap' }}
       onBlur={() => setIsTouchedByUser(true)}
       InputProps={{
         startAdornment: <Typography color="neutral.light">{`${origin}/`}</Typography>,

diff --git a/src/domain/journey/space/createSpace/CreateSpaceDialog.tsx b/src/domain/journey/space/createSpace/CreateSpaceDialog.tsx
@@ -35,6 +35,7 @@ import Loading from '@/core/ui/loading/Loading';
 import { TagCategoryValues, info } from '@/core/logging/sentry/log';
 import { compact } from 'lodash';
 import { useNotification } from '@/core/ui/notifications/useNotification';
+import Gutters from '@/core/ui/grid/Gutters';
 
 interface FormValues extends SpaceEditFormValuesType {
   licensePlanId: string;
@@ -100,6 +101,7 @@ const CreateSpaceDialog = ({ redirectOnComplete = true, onClose, account }: Crea
   const { accountId: currentUserAccountId } = useUserContext();
 
   const [hasAcceptedTerms, setHasAcceptedTerms] = useState(false);
+  const [addTutorialCallouts, setAddTutorialCallouts] = useState(true);
 
   const [isTermsDialogOpen, setIsTermsDialogOpen] = useState(false);
 
@@ -129,6 +131,7 @@ const CreateSpaceDialog = ({ redirectOnComplete = true, onClose, account }: Crea
           },
           collaborationData: {
             calloutsSetData: {},
+            addTutorialCallouts,
           },
           tags: compact(values.tagsets?.reduce((acc: string[], tagset) => [...acc, ...tagset.tags], [])),
           licensePlanID: values.licensePlanId,
@@ -198,31 +201,42 @@ const CreateSpaceDialog = ({ redirectOnComplete = true, onClose, account }: Crea
                       maxLength={SMALL_TEXT_LENGTH}
                     />
                     <TagsetSegment title={`${t('common.tags')} (${t('common.optional')})`} tagsets={tagsets} />
-                    <FormControlLabel
-                      value={hasAcceptedTerms}
-                      onChange={(event, isChecked) => setHasAcceptedTerms(isChecked)}
-                      required
-                      control={<Checkbox />}
-                      label={
-                        <Caption>
-                          <Trans
-                            i18nKey="createSpace.terms.checkboxLabel"
-                            components={{
-                              terms: (
-                                <Link
-                                  underline="always"
-                                  onClick={event => {
-                                    event.stopPropagation();
-                                    event.preventDefault();
-                                    setIsTermsDialogOpen(true);
-                                  }}
-                                />
-                              ),
-                            }}
-                          />
-                        </Caption>
-                      }
-                    />
+
+                    <Gutters disableGap disablePadding>
+                      <FormControlLabel
+                        value={addTutorialCallouts}
+                        onChange={(event, isChecked) => setAddTutorialCallouts(isChecked)}
+                        control={<Checkbox />}
+                        label={<Caption>{t('createSpace.addTutorialsLabel')}</Caption>}
+                      />
+
+                      <FormControlLabel
+                        value={hasAcceptedTerms}
+                        onChange={(event, isChecked) => setHasAcceptedTerms(isChecked)}
+                        required
+                        control={<Checkbox />}
+                        label={
+                          <Caption>
+                            <Trans
+                              i18nKey="createSpace.terms.checkboxLabel"
+                              components={{
+                                terms: (
+                                  <Link
+                                    underline="always"
+                                    onClick={event => {
+                                      event.stopPropagation();
+                                      event.preventDefault();
+                                      setIsTermsDialogOpen(true);
+                                    }}
+                                  />
+                                ),
+                              }}
+                            />
+                          </Caption>
+                        }
+                      />
+                    </Gutters>
+
                     <DialogFooter>
                       <Actions justifyContent="end" padding={gutters()}>
                         <Button