Merge pull request #1943 from zetkin/issue-1880/titles-truncate-on-mi…

…ddle Issue 1880/titles truncate on middle
zetkin · May 17, 2024 · 51f4fda · 51f4fda
2 parents 9caaff6 + 1dbb21a
commit 51f4fda
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 33 deletions.
diff --git a/src/features/smartSearch/components/filters/CallHistory/index.tsx b/src/features/smartSearch/components/filters/CallHistory/index.tsx
@@ -1,11 +1,12 @@
 import { FormEvent } from 'react';
-import { MenuItem } from '@mui/material';
+import { Box, MenuItem, Tooltip } from '@mui/material';
 
 import FilterForm from '../../FilterForm';
 import { Msg } from 'core/i18n';
 import StyledNumberInput from '../../inputs/StyledNumberInput';
 import StyledSelect from '../../inputs/StyledSelect';
 import TimeFrame from '../TimeFrame';
+import { truncateOnMiddle } from 'utils/stringUtils';
 import useCallAssignments from 'features/callAssignments/hooks/useCallAssignments';
 import useSmartSearchFilter from 'features/smartSearch/hooks/useSmartSearchFilter';
 import {
@@ -116,9 +117,11 @@ const CallHistory = ({
                       <Msg
                         id={localMessageIds.assignmentSelect.assignment}
                         values={{
-                          assignmentTitle:
+                          assignmentTitle: truncateOnMiddle(
                             assignmentsFuture.data?.find((a) => a.id === value)
                               ?.title ?? '',
+                            40
+                          ),
                         }}
                       />
                     );
@@ -138,7 +141,12 @@ const CallHistory = ({
                 )}
                 {assignmentsFuture.data?.map((a) => (
                   <MenuItem key={a.id} value={a.id}>
-                    {a.title}
+                    <Tooltip
+                      placement="right-start"
+                      title={a.title.length >= 40 ? a.title : ''}
+                    >
+                      <Box>{truncateOnMiddle(a.title, 40)}</Box>
+                    </Tooltip>
                   </MenuItem>
                 ))}
               </StyledSelect>

diff --git a/src/features/smartSearch/components/filters/CampaignParticipation/index.tsx b/src/features/smartSearch/components/filters/CampaignParticipation/index.tsx
@@ -1,10 +1,11 @@
 import { FormEvent } from 'react';
-import { MenuItem } from '@mui/material';
+import { Box, MenuItem, Tooltip } from '@mui/material';
 
 import FilterForm from '../../FilterForm';
 import { Msg } from 'core/i18n';
 import StyledSelect from '../../inputs/StyledSelect';
 import TimeFrame from '../TimeFrame';
+import { truncateOnMiddle } from 'utils/stringUtils';
 import useCampaigns from 'features/campaigns/hooks/useCampaigns';
 import useEventLocations from 'features/events/hooks/useEventLocations';
 import useEventTypes from 'features/events/hooks/useEventTypes';
@@ -144,8 +145,10 @@ const CampaignParticipation = ({
                       <Msg
                         id={localMessageIds.activitySelect.activity}
                         values={{
-                          activity:
+                          activity: truncateOnMiddle(
                             activities.find((l) => l.id === value)?.title ?? '',
+                            40
+                          ),
                         }}
                       />
                     );
@@ -158,7 +161,12 @@ const CampaignParticipation = ({
                 </MenuItem>
                 {activities.map((a) => (
                   <MenuItem key={a.id} value={a.id}>
-                    {a.title}
+                    <Tooltip
+                      placement="right-start"
+                      title={a.title.length >= 40 ? a.title : ''}
+                    >
+                      <Box>{a.title}</Box>
+                    </Tooltip>
                   </MenuItem>
                 ))}
               </StyledSelect>
@@ -258,8 +266,10 @@ const CampaignParticipation = ({
                       <Msg
                         id={localMessageIds.locationSelect.location}
                         values={{
-                          location:
+                          location: truncateOnMiddle(
                             locations.find((l) => l.id === value)?.title ?? '',
+                            40
+                          ),
                         }}
                       />
                     );

diff --git a/src/features/smartSearch/components/filters/EmailClick/index.tsx b/src/features/smartSearch/components/filters/EmailClick/index.tsx
@@ -7,6 +7,7 @@ import { Msg } from 'core/i18n';
 import StyledItemSelect from '../../inputs/StyledItemSelect';
 import StyledSelect from '../../inputs/StyledSelect';
 import TimeFrame from '../TimeFrame';
+import { truncateOnMiddle } from 'utils/stringUtils';
 import useCampaigns from 'features/campaigns/hooks/useCampaigns';
 import useEmailLinks from 'features/emails/hooks/useLinks';
 import useEmails from 'features/emails/hooks/useEmails';
@@ -51,7 +52,7 @@ const EmailClick = ({
   onSubmit,
 }: EmailClickProps): JSX.Element => {
   const { orgId } = useNumericRouteParams();
-  const emailsFuture = useEmails(orgId).data || [];
+  const emails = useEmails(orgId).data || [];
   const projectsFuture = useCampaigns(orgId).data || [];
 
   const { filter, setConfig, setOp } =
@@ -143,9 +144,21 @@ const EmailClick = ({
                   }
                   value={filter.config.email || ''}
                 >
-                  {emailsFuture?.map((email) => (
-                    <MenuItem key={`email-${email.id}`} value={email.id}>
-                      {`"${email.title}"`}
+                  {emails.map((email) => (
+                    <MenuItem key={email.id} value={email.id}>
+                      <Tooltip
+                        placement="right-start"
+                        title={
+                          !email.title || email.title.length < 40
+                            ? ''
+                            : email.title
+                        }
+                      >
+                        <Box>{`"${truncateOnMiddle(
+                          email.title ?? '',
+                          40
+                        )}"`}</Box>
+                      </Tooltip>
                     </MenuItem>
                   ))}
                 </StyledSelect>

diff --git a/src/features/smartSearch/components/filters/EmailHistory/index.tsx b/src/features/smartSearch/components/filters/EmailHistory/index.tsx
@@ -1,11 +1,12 @@
-import { MenuItem } from '@mui/material';
 import { useState } from 'react';
+import { Box, MenuItem, Tooltip } from '@mui/material';
 
 import FilterForm from '../../FilterForm';
 import messageIds from 'features/smartSearch/l10n/messageIds';
 import { Msg } from 'core/i18n';
 import StyledSelect from '../../inputs/StyledSelect';
 import TimeFrame from '../TimeFrame';
+import { truncateOnMiddle } from 'utils/stringUtils';
 import useCampaigns from 'features/campaigns/hooks/useCampaigns';
 import useEmails from 'features/emails/hooks/useEmails';
 import { useNumericRouteParams } from 'core/hooks';
@@ -150,7 +151,19 @@ const EmailHistory = ({
                 >
                   {emailsFuture?.map((email) => (
                     <MenuItem key={`email-${email.id}`} value={email.id}>
-                      {`"${email.title}"`}
+                      <Tooltip
+                        placement="right-start"
+                        title={
+                          !email.title || email.title.length < 40
+                            ? ''
+                            : email.title
+                        }
+                      >
+                        <Box>{`"${truncateOnMiddle(
+                          email.title ?? '',
+                          40
+                        )}"`}</Box>
+                      </Tooltip>
                     </MenuItem>
                   ))}
                 </StyledSelect>

diff --git a/src/features/smartSearch/components/filters/PersonView/index.tsx b/src/features/smartSearch/components/filters/PersonView/index.tsx
@@ -1,9 +1,10 @@
 import { FormEvent } from 'react';
-import { MenuItem } from '@mui/material';
+import { Box, MenuItem, Tooltip } from '@mui/material';
 
 import FilterForm from '../../FilterForm';
 import { Msg } from 'core/i18n';
 import StyledSelect from '../../inputs/StyledSelect';
+import { truncateOnMiddle } from 'utils/stringUtils';
 import { useNumericRouteParams } from 'core/hooks';
 import useSmartSearchFilter from 'features/smartSearch/hooks/useSmartSearchFilter';
 import useViewTree from 'features/views/hooks/useViewTree';
@@ -124,7 +125,12 @@ const PersonView = ({
                 >
                   {personViews.map((v) => (
                     <MenuItem key={v.id} value={v.id}>
-                      {v.title}
+                      <Tooltip
+                        placement="right-start"
+                        title={v.title.length >= 40 ? v.title : ''}
+                      >
+                        <Box>{truncateOnMiddle(v.title, 40)}</Box>
+                      </Tooltip>
                     </MenuItem>
                   ))}
                 </StyledSelect>

diff --git a/src/features/smartSearch/components/filters/SubQuery/index.tsx b/src/features/smartSearch/components/filters/SubQuery/index.tsx
@@ -1,9 +1,10 @@
-import { MenuItem } from '@mui/material';
+import { Box, MenuItem, Tooltip } from '@mui/material';
 import { FormEvent, useEffect, useState } from 'react';
 
 import FilterForm from '../../FilterForm';
 import { Msg } from 'core/i18n';
 import StyledSelect from '../../inputs/StyledSelect';
+import { truncateOnMiddle } from 'utils/stringUtils';
 import useCallAssignments from 'features/callAssignments/hooks/useCallAssignments';
 import { useNumericRouteParams } from 'core/hooks';
 import useSmartSearchFilter from 'features/smartSearch/hooks/useSmartSearchFilter';
@@ -262,7 +263,14 @@ const SubQuery = ({
                       >
                         {renderedOptions.map((o) => (
                           <MenuItem key={o.id} value={o.id}>
-                            {o.title}
+                            <Tooltip
+                              placement="right-start"
+                              title={
+                                !o.title || o.title.length < 40 ? '' : o.title
+                              }
+                            >
+                              <Box>{truncateOnMiddle(o.title ?? '', 40)}</Box>
+                            </Tooltip>
                           </MenuItem>
                         ))}
                       </StyledSelect>

diff --git a/src/features/smartSearch/components/filters/SurveyOption/index.tsx b/src/features/smartSearch/components/filters/SurveyOption/index.tsx
@@ -6,6 +6,7 @@ import FilterForm from '../../FilterForm';
 import { Msg } from 'core/i18n';
 import StyledItemSelect from '../../inputs/StyledItemSelect';
 import StyledSelect from '../../inputs/StyledSelect';
+import { truncateOnMiddle } from 'utils/stringUtils';
 import useSmartSearchFilter from 'features/smartSearch/hooks/useSmartSearchFilter';
 import {
   CONDITION_OPERATOR,
@@ -262,9 +263,11 @@ const SurveyOption = ({
                       <Msg
                         id={localMessageIds.questionSelect.question}
                         values={{
-                          question:
+                          question: truncateOnMiddle(
                             validQuestions.find((q) => q.id === value)?.question
                               .question ?? '',
+                            40
+                          ),
                         }}
                       />
                     );
@@ -279,7 +282,16 @@ const SurveyOption = ({
                 )}
                 {validQuestions.map((q) => (
                   <MenuItem key={q.id} value={q.id}>
-                    {q.question.question}
+                    <Tooltip
+                      placement="right-start"
+                      title={
+                        q.question.question.length >= 40
+                          ? q.question.question
+                          : ''
+                      }
+                    >
+                      <Box>{truncateOnMiddle(q.question.question, 40)}</Box>
+                    </Tooltip>
                   </MenuItem>
                 ))}
               </StyledSelect>
@@ -295,8 +307,10 @@ const SurveyOption = ({
                       <Msg
                         id={localMessageIds.surveySelect.survey}
                         values={{
-                          surveyTitle:
+                          surveyTitle: truncateOnMiddle(
                             surveys.find((s) => s.id === value)?.title ?? '',
+                            40
+                          ),
                         }}
                       />
                     );
@@ -311,7 +325,12 @@ const SurveyOption = ({
                 )}
                 {surveys.map((s) => (
                   <MenuItem key={s.id} value={s.id}>
-                    {s.title}
+                    <Tooltip
+                      placement="right-start"
+                      title={s.title.length >= 40 ? s.title : ''}
+                    >
+                      <Box>{truncateOnMiddle(s.title, 40)}</Box>
+                    </Tooltip>
                   </MenuItem>
                 ))}
               </StyledSelect>

diff --git a/src/features/smartSearch/components/filters/SurveyResponse/index.tsx b/src/features/smartSearch/components/filters/SurveyResponse/index.tsx
@@ -1,9 +1,10 @@
-import { MenuItem } from '@mui/material';
+import { Box, MenuItem, Tooltip } from '@mui/material';
 import { FormEvent, useEffect, useState } from 'react';
 
 import FilterForm from '../../FilterForm';
 import StyledSelect from '../../inputs/StyledSelect';
 import StyledTextInput from '../../inputs/StyledTextInput';
+import { truncateOnMiddle } from 'utils/stringUtils';
 import useSmartSearchFilter from 'features/smartSearch/hooks/useSmartSearchFilter';
 import {
   ELEMENT_TYPE,
@@ -22,7 +23,6 @@ import {
 
 import messageIds from 'features/smartSearch/l10n/messageIds';
 import { Msg } from 'core/i18n';
-import { truncateOnMiddle } from 'utils/stringUtils';
 import { useNumericRouteParams } from 'core/hooks';
 import useSurveysWithElements from 'features/surveys/hooks/useSurveysWithElements';
 const localMessageIds = messageIds.filters.surveyResponse;
@@ -245,7 +245,16 @@ const SurveyResponse = ({
                 )}
                 {validQuestions.map((q) => (
                   <MenuItem key={q.id} value={q.id}>
-                    {truncateOnMiddle(q.question.question, 50)}
+                    <Tooltip
+                      placement="right-start"
+                      title={
+                        q.question.question.length >= 40
+                          ? q.question.question
+                          : ''
+                      }
+                    >
+                      <Box>{truncateOnMiddle(q.question.question, 40)}</Box>
+                    </Tooltip>
                   </MenuItem>
                 ))}
               </StyledSelect>
@@ -279,7 +288,12 @@ const SurveyResponse = ({
                 )}
                 {surveys.map((s) => (
                   <MenuItem key={s.id} value={s.id}>
-                    {s.title}
+                    <Tooltip
+                      placement="right-start"
+                      title={s.title.length >= 40 ? s.title : ''}
+                    >
+                      <Box>{truncateOnMiddle(s.title, 40)}</Box>
+                    </Tooltip>
                   </MenuItem>
                 ))}
               </StyledSelect>

diff --git a/src/features/smartSearch/components/filters/SurveySubmission/index.tsx b/src/features/smartSearch/components/filters/SurveySubmission/index.tsx
@@ -1,9 +1,10 @@
-import { MenuItem } from '@mui/material';
+import { Box, MenuItem, Tooltip } from '@mui/material';
 import { FormEvent, useEffect, useState } from 'react';
 
 import FilterForm from '../../FilterForm';
 import StyledSelect from '../../inputs/StyledSelect';
 import TimeFrame from '../TimeFrame';
+import { truncateOnMiddle } from 'utils/stringUtils';
 import useSmartSearchFilter from 'features/smartSearch/hooks/useSmartSearchFilter';
 import {
   NewSmartSearchFilter,
@@ -126,8 +127,10 @@ const SurveySubmission = ({
                       <Msg
                         id={localMessageIds.surveySelect.survey}
                         values={{
-                          surveyTitle:
+                          surveyTitle: truncateOnMiddle(
                             surveys.find((s) => s.id === value)?.title ?? '',
+                            40
+                          ),
                         }}
                       />
                     );
@@ -142,7 +145,12 @@ const SurveySubmission = ({
                 )}
                 {surveys.map((s) => (
                   <MenuItem key={s.id} value={s.id}>
-                    {s.title}
+                    <Tooltip
+                      placement="right-start"
+                      title={s.title.length >= 40 ? s.title : ''}
+                    >
+                      <Box>{truncateOnMiddle(s.title, 40)}</Box>
+                    </Tooltip>
                   </MenuItem>
                 ))}
               </StyledSelect>