diff --git a/src/containers/forms/AssignTeamTableCell/index.tsx b/src/containers/forms/AssignTeamTableCell/index.tsx index 14cb92fd7f..f13a3f0649 100644 --- a/src/containers/forms/AssignTeamTableCell/index.tsx +++ b/src/containers/forms/AssignTeamTableCell/index.tsx @@ -19,6 +19,7 @@ import organizationsReducer, { reducerName as organizationsReducerName, } from '../../../store/ducks/opensrp/organizations'; import { getButtonId, getFormName } from './helpers'; +import './style.css'; reducerRegistry.register(assignmentReducerName, assignmentReducer); reducerRegistry.register(organizationsReducerName, organizationsReducer); @@ -95,10 +96,20 @@ const AssignTeamTableCell = (props: AssignTeamCellProps) => { target: getButtonId(jurisdictionId), }; + const assignedOrganizations = assignments + .map( + (a: Assignment) => + organizationsById && + organizationsById[a.organization] && + organizationsById[a.organization].name + ) + .filter(org => !!org) + .join(', '); + return ( -
- - {`${assignments.length} ${TEAMS_ASSIGNED}`} +
+ + {assignedOrganizations} {assignButton || } {assignPopover || } diff --git a/src/containers/forms/AssignTeamTableCell/style.css b/src/containers/forms/AssignTeamTableCell/style.css new file mode 100644 index 0000000000..1e5185609d --- /dev/null +++ b/src/containers/forms/AssignTeamTableCell/style.css @@ -0,0 +1,7 @@ +.assignment-cell .assignment-label { + text-overflow: ellipsis; + white-space: nowrap; + max-width: calc(100% - 120px); + display: inline-block; + overflow: hidden; +} diff --git a/src/containers/forms/AssignTeamTableCell/tests/__snapshots__/index.test.tsx.snap b/src/containers/forms/AssignTeamTableCell/tests/__snapshots__/index.test.tsx.snap index 3191745634..2dffa80de3 100644 --- a/src/containers/forms/AssignTeamTableCell/tests/__snapshots__/index.test.tsx.snap +++ b/src/containers/forms/AssignTeamTableCell/tests/__snapshots__/index.test.tsx.snap @@ -19,13 +19,7 @@ exports[`/containers/forms/AssignTeamTableCell renders correctly: AssignTeamButt exports[`/containers/forms/AssignTeamTableCell renders correctly: Team Count Text 1`] = ` - 0 Teams Assigned - + className="assignment-label" + title="0 Teams Assigned" +/> `; diff --git a/src/containers/forms/AssignTeamTableCell/tests/index.test.tsx b/src/containers/forms/AssignTeamTableCell/tests/index.test.tsx index 02c5b10766..7c7d99d4c5 100644 --- a/src/containers/forms/AssignTeamTableCell/tests/index.test.tsx +++ b/src/containers/forms/AssignTeamTableCell/tests/index.test.tsx @@ -41,6 +41,6 @@ describe('/containers/forms/AssignTeamTableCell', () => { expect(toJson(wrapper.find('button#plan-assignment-outpost-number-one'))).toMatchSnapshot( 'AssignTeamButton' ); - expect(toJson(wrapper.find('span.assignment-count-text'))).toMatchSnapshot('Team Count Text'); + expect(toJson(wrapper.find('span.assignment-label'))).toMatchSnapshot('Team Count Text'); }); });