Merge pull request #10323 from CitizenLabDotCo/TAN-3826/folder-link

Add link to folder
CitizenLabDotCo · Feb 19, 2025 · cd1e36a · cd1e36a
2 parents d3cb6c7 + e61e5af
commit cd1e36a
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 15 deletions.
diff --git a/front/app/containers/Admin/projects/project/general/components/ProjectFolderSelect/index.tsx b/front/app/containers/Admin/projects/project/general/components/ProjectFolderSelect/index.tsx
@@ -143,7 +143,10 @@ const ProjectFolderSelect = ({
     const defaultFolderSelectOptionValue = folderOptions[0].value;
 
     return (
-      <StyledSectionField data-testid="projectFolderSelect">
+      <StyledSectionField
+        data-testid="projectFolderSelect"
+        data-cy="e2e-project-folder-setting-field"
+      >
         <SubSectionTitle>
           <FormattedMessage {...messages.projectFolderSelectTitle} />
           <IconTooltip

diff --git a/front/app/containers/Admin/projects/project/general/index.tsx b/front/app/containers/Admin/projects/project/general/index.tsx
@@ -52,6 +52,7 @@ import { defaultAdminCardPadding } from 'utils/styleConstants';
 import { validateSlug } from 'utils/textUtils';
 
 import { fragmentId } from '../projectHeader';
+import { fragmentId as folderFragmentId } from '../projectHeader/LinkToFolderSettings';
 
 import AttachmentsDropzone from './components/AttachmentsDropzone';
 import GeographicAreaInputs from './components/GeographicAreaInputs';
@@ -574,11 +575,15 @@ const AdminProjectsProjectGeneral = () => {
           />
 
           {isProjectFoldersEnabled && (
-            <ProjectFolderSelect
-              projectAttrs={projectAttrs}
-              onProjectAttributesDiffChange={handleProjectAttributeDiffOnChange}
-              isNewProject={!projectId}
-            />
+            <Highlighter fragmentId={folderFragmentId}>
+              <ProjectFolderSelect
+                projectAttrs={projectAttrs}
+                onProjectAttributesDiffChange={
+                  handleProjectAttributeDiffOnChange
+                }
+                isNewProject={!projectId}
+              />
+            </Highlighter>
           )}
 
           <SectionField>

diff --git a/front/app/containers/Admin/projects/project/projectHeader/LinkToFolderSettings.tsx b/front/app/containers/Admin/projects/project/projectHeader/LinkToFolderSettings.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { Box, Icon, Text, colors } from '@citizenlab/cl2-component-library';
+
+import useProjectFolderById from 'api/project_folders/useProjectFolderById';
+
+import useLocalize from 'hooks/useLocalize';
+
+import { createHighlighterLink } from 'components/Highlighter';
+
+import Link from 'utils/cl-router/Link';
+import { truncate } from 'utils/textUtils';
+
+interface Props {
+  folderId: string;
+  projectId: string;
+}
+
+export const fragmentId = 'folder';
+const LinkToFolderSettings = ({ folderId, projectId }: Props) => {
+  const { data: projectFolder } = useProjectFolderById(folderId);
+  const localize = useLocalize();
+
+  if (!projectFolder) return null;
+
+  return (
+    <Link
+      to={createHighlighterLink(
+        `/admin/projects/${projectId}/settings#${fragmentId}`
+      )}
+      data-cy="e2e-folder-preview-link-to-settings"
+    >
+      <Box display="flex" alignItems="center" gap="4px">
+        <Icon name="folder-solid" fill={colors.coolGrey600} width="14px" />
+        <Text color="coolGrey600" m="0px" fontSize="s" p="0">
+          {truncate(localize(projectFolder.data.attributes.title_multiloc), 40)}
+        </Text>
+      </Box>
+    </Link>
+  );
+};
+
+export default LinkToFolderSettings;
diff --git a/front/app/containers/Admin/projects/project/projectHeader/index.tsx b/front/app/containers/Admin/projects/project/projectHeader/index.tsx
@@ -25,6 +25,7 @@ import { FormattedMessage, MessageDescriptor, useIntl } from 'utils/cl-intl';
 import Link from 'utils/cl-router/Link';
 import { getFullName } from 'utils/textUtils';
 
+import LinkToFolderSettings from './LinkToFolderSettings';
 import messages from './messages';
 import ProjectDescriptionPreview from './ProjectDescriptionPreview';
 import PublicationStatus from './PublicationStatus';
@@ -55,6 +56,7 @@ const ProjectHeader = ({ projectId }: Props) => {
 
   if (!project) return null;
 
+  const folderId = project.data.attributes.folder_id;
   let visibilityMessage: MessageDescriptor = messages.everyone;
   let visibilityIcon: IconNames = 'lock';
   switch (project.data.attributes.visible_to) {
@@ -92,6 +94,14 @@ const ProjectHeader = ({ projectId }: Props) => {
             mb="8px"
             maxWidth="600px"
           >
+            {typeof folderId === 'string' && (
+              <Box mb="4px">
+                <LinkToFolderSettings
+                  folderId={folderId}
+                  projectId={projectId}
+                />
+              </Box>
+            )}
             <Link
               to={createHighlighterLink(
                 `/admin/projects/${project.data.id}/settings#${fragmentId}`

diff --git a/front/cypress/e2e/admin/projects/project_settings.cy.ts b/front/cypress/e2e/admin/projects/project_settings.cy.ts
@@ -1,21 +1,46 @@
 import { randomString } from '../../../support/commands';
 
 describe('Project settings', () => {
-  let projectId: string | null = null;
+  let globalProjectId: string | null = null;
+  let globalFolderId: string | null = null;
 
   beforeEach(() => {
     cy.setAdminLoginCookie();
+
     cy.apiCreateProject({
       title: randomString(),
       description: randomString(),
     }).then((project) => {
-      projectId = project.body.data.id;
+      const projectId = project.body.data.id;
+      if (typeof projectId === 'string') {
+        globalProjectId = projectId;
+
+        cy.apiCreateFolder({
+          title: randomString(),
+          description: randomString(),
+          publicationStatus: 'published',
+        }).then((folder) => {
+          const folderId = folder.body.data.id;
+          if (typeof folderId === 'string') {
+            globalFolderId = folderId;
+            cy.apiAddProjectsToFolder([projectId], folderId);
+          }
+        });
+      }
+    });
+  });
+
+  describe('Folder', () => {
+    it('The folder preview links to the folder selector', () => {
+      cy.visit(`admin/projects/${globalProjectId}`);
+      cy.get('[data-cy="e2e-folder-preview-link-to-settings"').click();
+      cy.get('[data-cy="e2e-project-folder-setting-field"]').should('exist');
     });
   });
 
   describe('Project title', () => {
     it('The title preview links to project title settings', () => {
-      cy.visit(`admin/projects/${projectId}`);
+      cy.visit(`admin/projects/${globalProjectId}`);
       cy.get('[data-cy="e2e-project-title-preview-link-to-settings"]').click();
       cy.get('#e2e-project-title-setting-field').should('exist');
     });
@@ -24,7 +49,7 @@ describe('Project settings', () => {
   describe('Project description', () => {
     describe('when the content builder toggle is disabled', () => {
       it('links to project description settings', () => {
-        cy.visit(`admin/projects/${projectId}`);
+        cy.visit(`admin/projects/${globalProjectId}`);
         cy.acceptCookies();
         cy.get(
           '[data-cy="e2e-project-description-preview-link-to-multiloc-settings"]'
@@ -38,11 +63,11 @@ describe('Project settings', () => {
 
     describe('when the content builder toggle is enabled', () => {
       it('links to the content builder', () => {
-        cy.visit(`admin/projects/${projectId}/settings/description`);
+        cy.visit(`admin/projects/${globalProjectId}/settings/description`);
         cy.get('#e2e-toggle-enable-project-description-builder').click({
           force: true,
         });
-        cy.visit(`admin/projects/${projectId}`);
+        cy.visit(`admin/projects/${globalProjectId}`);
         cy.get(
           '[data-cy="e2e-project-description-preview-link-to-content-builder"]'
         ).click();
@@ -52,8 +77,11 @@ describe('Project settings', () => {
   });
 
   afterEach(() => {
-    if (projectId) {
-      cy.apiRemoveProject(projectId);
+    if (globalProjectId) {
+      cy.apiRemoveProject(globalProjectId);
+    }
+    if (globalFolderId) {
+      cy.apiRemoveFolder(globalFolderId);
     }
   });
 });
diff --git a/front/cypress/support/commands.ts b/front/cypress/support/commands.ts
@@ -889,7 +889,7 @@ function apiCreateFolder({
   publicationStatus = 'published',
 }: {
   title: string;
-  descriptionPreview: string;
+  descriptionPreview?: string;
   description: string;
   publicationStatus?: 'draft' | 'published' | 'archived';
   projectIds?: string[];