Default Subspace template selection/display for Space (#7290)

alkem-io · Dec 11, 2024 · d790c10 · d790c10
1 parent 459051b
commit d790c10
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 147 deletions.
diff --git a/src/core/i18n/en/translation.en.json b/src/core/i18n/en/translation.en.json
@@ -2031,12 +2031,12 @@
           "subspaces": {
             "description": "Here you can edit Subspaces for this Space.",
             "defaultSettings": {
-              "title": "Default settings",
+              "title": "Default Subspace Template",
               "description": "Choose the default settings that will apply when creating a new Subspace within this Space. These settings can be modified during the creation process or at a later time.",
               "defaultCollaborationTemplate": {
-                "selectDifferentTemplate": "Select Collaboration Template",
-                "title": "Selecting the Default Collaboration Template",
-                "description": "Customize the default template for newly created Subspaces. Admins can modify it later in the Innovation flow settings. \n\nBelow you can choose between the templates collected in the Space Templates library."
+                "selectDifferentTemplate": "Change Default Template",
+                "title": "Change Default Subspace Template",
+                "description": "Customize the default template for newly created Subspaces.<br/><br/>Below you can choose between the templates collected in the Space Templates library. If you’re looking to create new templates or explore additional templates, <library>click here</library> to access this library."
               }
             }
           }

diff --git a/src/domain/journey/space/pages/SpaceSubspaces/SubspaceListView.tsx b/src/domain/journey/space/pages/SpaceSubspaces/SubspaceListView.tsx
@@ -4,7 +4,6 @@ import useNavigate from '@/core/routing/useNavigate';
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
 import AddOutlinedIcon from '@mui/icons-material/AddOutlined';
-import Loading from '@/core/ui/loading/Loading';
 import {
   refetchAdminSpaceSubspacesPageQuery,
   refetchDashboardWithMembershipsQuery,
@@ -28,7 +27,7 @@ import InnovationFlowProfileView from '@/domain/collaboration/InnovationFlow/Inn
 import InnovationFlowStates from '@/domain/collaboration/InnovationFlow/InnovationFlowStates/InnovationFlowStates';
 import { Actions } from '@/core/ui/actions/Actions';
 import { Cached, DeleteOutline, DownloadForOfflineOutlined } from '@mui/icons-material';
-import SelectDefaultCollabTemplateDialog from '@/domain/templates-manager/SelectDefaultCollaborationTemplate/SelectDefaultCollabTemplateDialog';
+import SelectDefaultCollaborationTemplateDialog from '@/domain/templates-manager/SelectDefaultCollaborationTemplate/SelectDefaultCollaborationTemplateDialog';
 import MenuItemWithIcon from '@/core/ui/menu/MenuItemWithIcon';
 import Gutters from '@/core/ui/grid/Gutters';
 import SearchableList, { SearchableListItem } from '@/domain/platform/admin/components/SearchableList';
@@ -213,36 +212,38 @@ export const SubspaceListView = () => {
     </>
   );
 
-  if (loading) return <Loading text={'Loading Subspaces'} />;
-
   return (
     <>
       <PageContentBlock>
         <PageContentBlockHeader title={t('pages.admin.space.sections.subspaces.defaultSettings.title')} />
         <Caption>{t('pages.admin.space.sections.subspaces.defaultSettings.description')}</Caption>
-        <PageContentBlock>
-          <PageContentBlockHeader title={t('common.innovation-flow')} />
-          <BlockSectionTitle>{defaultSubspaceTemplate?.template?.profile.displayName}</BlockSectionTitle>
-          <InnovationFlowProfileView
-            innovationFlow={defaultSubspaceTemplate?.template?.collaboration?.innovationFlow}
-          />
-          <InnovationFlowStates
-            states={defaultSubspaceTemplate?.template?.collaboration?.innovationFlow.states}
-            selectedState={selectedState}
-            onSelectState={state => setSelectedState(state.displayName)}
-          />
-          <Actions justifyContent="end">
-            <Button
-              variant="outlined"
-              startIcon={<Cached />}
-              onClick={() => setSelectCollaborationTemplateDialogOpen(true)}
-            >
-              {t(
-                'pages.admin.space.sections.subspaces.defaultSettings.defaultCollaborationTemplate.selectDifferentTemplate'
-              )}
-            </Button>
-          </Actions>
-        </PageContentBlock>
+        {defaultSubspaceTemplate?.template ? (
+          <>
+            <BlockSectionTitle>{defaultSubspaceTemplate.template.profile.displayName}</BlockSectionTitle>
+            <InnovationFlowProfileView
+              innovationFlow={defaultSubspaceTemplate.template.collaboration?.innovationFlow}
+            />
+            <InnovationFlowStates
+              states={defaultSubspaceTemplate.template.collaboration?.innovationFlow.states}
+              selectedState={selectedState}
+              onSelectState={state => setSelectedState(state.displayName)}
+            />
+          </>
+        ) : (
+          <BlockSectionTitle>{t('context.subspace.template.defaultTemplate')}</BlockSectionTitle>
+        )}
+
+        <Actions justifyContent="end">
+          <Button
+            variant="outlined"
+            startIcon={<Cached />}
+            onClick={() => setSelectCollaborationTemplateDialogOpen(true)}
+          >
+            {t(
+              'pages.admin.space.sections.subspaces.defaultSettings.defaultCollaborationTemplate.selectDifferentTemplate'
+            )}
+          </Button>
+        </Actions>
       </PageContentBlock>
       <PageContentBlock>
         <PageContentBlockHeader title={t('common.subspaces')} />
@@ -256,11 +257,11 @@ export const SubspaceListView = () => {
             {t('buttons.create')}
           </Button>
           <Gutters disablePadding>
-            <SearchableList data={subspaces} getActions={getSubSpaceActions} />
+            <SearchableList data={subspaces} getActions={getSubSpaceActions} loading={loading} />
           </Gutters>
         </Box>
       </PageContentBlock>
-      <SelectDefaultCollabTemplateDialog
+      <SelectDefaultCollaborationTemplateDialog
         spaceId={spaceId}
         open={selectCollaborationTemplateDialogOpen}
         defaultCollaborationTemplateId={defaultSubspaceTemplate?.template?.id}

diff --git a/...emplates-manager/SelectDefaultCollaborationTemplate/SelectDefaultCollabTemplateDialog.tsx b/...emplates-manager/SelectDefaultCollaborationTemplate/SelectDefaultCollabTemplateDialog.tsx
diff --git a/...s-manager/SelectDefaultCollaborationTemplate/SelectDefaultCollaborationTemplateDialog.tsx b/...s-manager/SelectDefaultCollaborationTemplate/SelectDefaultCollaborationTemplateDialog.tsx
@@ -2,8 +2,7 @@ import * as yup from 'yup';
 import { Button, Skeleton } from '@mui/material';
 import DialogHeader from '@/core/ui/dialog/DialogHeader';
 import DialogWithGrid from '@/core/ui/dialog/DialogWithGrid';
-import WrapperMarkdown from '@/core/ui/markdown/WrapperMarkdown';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import FormikSelect from '@/core/ui/forms/FormikSelect';
 import { Form, Formik } from 'formik';
 import useLoadingState from '@/domain/shared/utils/useLoadingState';
@@ -12,6 +11,9 @@ import { useSpaceCollaborationTemplatesQuery } from '@/core/apollo/generated/apo
 import { useMemo } from 'react';
 import Gutters from '@/core/ui/grid/Gutters';
 import { Actions } from '@/core/ui/actions/Actions';
+import RouterLink from '@/core/ui/link/RouterLink';
+import { Caption } from '@/core/ui/typography';
+import { SettingsSection } from '@/domain/platform/admin/layout/EntitySettingsLayout/constants';
 
 interface FormValues {
   collaborationTemplateSelectedId: string;
@@ -73,13 +75,19 @@ const SelectDefaultCollaborationTemplateDialog = ({
         {({ isValid, values }) => (
           <Form noValidate>
             <Gutters>
-              <WrapperMarkdown caption>
-                {t('pages.admin.space.sections.subspaces.defaultSettings.defaultCollaborationTemplate.description')}
-              </WrapperMarkdown>
+              <Caption>
+                <Trans
+                  i18nKey="pages.admin.space.sections.subspaces.defaultSettings.defaultCollaborationTemplate.description"
+                  components={{
+                    library: <RouterLink to={`../../${SettingsSection.Templates}`} underline="always" />,
+                    br: <br />,
+                  }}
+                />
+              </Caption>
               {loadingInnovationFlows && <Skeleton variant="rectangular" />}
               {collaborationTemplates && (
                 <FormikSelect
-                  title={t('components.discussionForm.category.title')}
+                  title={t('common.category')}
                   name="collaborationTemplateSelectedId"
                   values={collaborationTemplates}
                 />