Render organization names instead of counts in assignment cell

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 (
-    <div onClick={stopPropagationAndPreventDefault}>
-      <span style={{ paddingRight: '2rem' }} className="assignment-count-text">
-        {`${assignments.length} ${TEAMS_ASSIGNED}`}
+    <div onClick={stopPropagationAndPreventDefault} className="assignment-cell">
+      <span className="assignment-label" title={`${assignments.length} ${TEAMS_ASSIGNED}`}>
+        {assignedOrganizations}
       </span>
       {assignButton || <AssignTeamButton {...assignTeamButtonProps} />}
       {assignPopover || <AssignTeamPopover {...assignTeamPopoverProps} />}

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;
+}

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`] = `
 <span
-  className="assignment-count-text"
-  style={
-    Object {
-      "paddingRight": "2rem",
-    }
-  }
->
-  0 Teams Assigned
-</span>
+  className="assignment-label"
+  title="0 Teams Assigned"
+/>
 `;

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');
   });
 });