Add table actions to location view details child locations tab table

packages/fhir-location-management/src/components/AllLocationListFlat/core.tsx

@@ -4,11 +4,10 @@ import {
   URL_LOCATION_UNIT_ADD,
   URL_LOCATION_VIEW_DETAILS,
   BACK_SEARCH_PARAM,
-  URL_ALL_LOCATIONS,
 } from '../../constants';
 import { useMls } from '../../mls';
 import { Button, Divider, Dropdown } from 'antd';
-import { useHistory, Link } from 'react-router-dom';
+import { useHistory, Link, useLocation } from 'react-router-dom';
 import { RbacCheck } from '@opensrp/rbac';
 import { MenuProps } from 'antd';
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
@@ -28,7 +27,9 @@ export type AllLocationListFlatProps = Omit<
 export const AllLocationListFlat: React.FC<AllLocationListFlatProps> = (props) => {
   const { t } = useMls();
   const history = useHistory();
+  const location = useLocation();
 
+  const backToParam = new URLSearchParams({ [BACK_SEARCH_PARAM]: location.pathname });
   const getItems = (_: Dictionary): MenuProps['items'] => {
     return [
       {
@@ -72,7 +73,10 @@ export const AllLocationListFlat: React.FC<AllLocationListFlatProps> = (props) =
         <span className="d-flex align-items-center">
           <RbacCheck permissions={['Location.update']}>
             <>
-              <Link to={`${URL_LOCATION_UNIT_EDIT}/${record.id.toString()}`} className="m-0 p-1">
+              <Link
+                to={`${URL_LOCATION_UNIT_EDIT}/${record.id.toString()}?${backToParam}`}
+                className="m-0 p-1"
+              >
                 {t('Edit')}
               </Link>
               <Divider type="vertical" />
@@ -91,10 +95,12 @@ export const AllLocationListFlat: React.FC<AllLocationListFlatProps> = (props) =
     },
   ];
 
-  const backToParam = `?${BACK_SEARCH_PARAM}=${URL_ALL_LOCATIONS}`;
   const addLocationBtnRender = () => (
     <RbacCheck permissions={['Location.create']}>
-      <Button type="primary" onClick={() => history.push(`${URL_LOCATION_UNIT_ADD}${backToParam}`)}>
+      <Button
+        type="primary"
+        onClick={() => history.push(`${URL_LOCATION_UNIT_ADD}?${backToParam}`)}
+      >
         <PlusOutlined />
         {t('Add Location')}
       </Button>

packages/fhir-location-management/src/components/ViewDetails/DetailsTabs/ChildLocations.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import { useMls } from '../../../mls';
 import { TableLayout, useSimpleTabularView, Column, SearchForm } from '@opensrp/react-utils';
-import { Alert, Button, Col, Row } from 'antd';
+import { Alert, Button, Col, Divider, Dropdown, MenuProps, Row } from 'antd';
 import {
+  BACK_SEARCH_PARAM,
   URL_LOCATION_UNIT_ADD,
+  URL_LOCATION_VIEW_DETAILS,
   locationResourceType,
   parentIdQueryParam,
 } from '../../../constants';
 import { ILocation } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ILocation';
-import { get } from 'lodash';
 import { RbacCheck } from '@opensrp/rbac';
-import { PlusOutlined } from '@ant-design/icons';
-import { useHistory } from 'react-router';
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
+import { useHistory, useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
+import { get } from 'lodash';
 
 export interface InventoryViewProps {
   fhirBaseUrl: string;
@@ -38,6 +41,7 @@ const searchParamsFactory = (locationId: string) => {
 export const ChildLocations = ({ fhirBaseUrl, locationId }: InventoryViewProps) => {
   const { t } = useMls();
   const history = useHistory();
+  const location = useLocation();
 
   const searchParams = searchParamsFactory(locationId);
   const {
@@ -53,18 +57,68 @@ export const ChildLocations = ({ fhirBaseUrl, locationId }: InventoryViewProps)
   const tableData = parseTableData(data?.records ?? []);
   type TableData = typeof tableData[0];
 
+  const backParamObj = { [BACK_SEARCH_PARAM]: location.pathname };
+  const backToParam = new URLSearchParams(backParamObj).toString();
+  const getItems = (_: TableData): MenuProps['items'] => {
+    // Todo: replace _ above when handling onClick
+    return [
+      {
+        key: '1',
+        label: (
+          <Link to={`${URL_LOCATION_VIEW_DETAILS}/${_.id}`} className="m-0 p-1">
+            {t('View details')}
+          </Link>
+        ),
+      },
+    ];
+  };
+
   const columns: Column<TableData>[] = [
     {
       title: t('Name'),
-      dataIndex: 'name',
+      dataIndex: 'name' as const,
+      editable: true,
     },
     {
       title: t('Physical Type'),
-      dataIndex: 'physicalType' as const,
+      dataIndex: 'type' as const,
+      editable: true,
     },
     {
       title: t('Status'),
       dataIndex: 'status' as const,
+      editable: true,
+    },
+    {
+      title: t('Actions'),
+      width: '10%',
+
+      // eslint-disable-next-line react/display-name
+      render: (_: unknown, record: TableData) => {
+        return (
+          <span className="d-flex align-items-center">
+            <RbacCheck permissions={['Location.update']}>
+              <>
+                <Link
+                  to={`${URL_LOCATION_UNIT_ADD}/${record.id.toString()}?${backToParam}`}
+                  className="m-0 p-1"
+                >
+                  {t('Edit')}
+                </Link>
+                <Divider type="vertical" />
+              </>
+            </RbacCheck>
+            <Dropdown
+              menu={{ items: getItems(record) }}
+              placement="bottomRight"
+              arrow
+              trigger={['click']}
+            >
+              <MoreOutlined className="more-options" data-testid="action-dropdown" />
+            </Dropdown>
+          </span>
+        );
+      },
     },
   ];
 
@@ -88,6 +142,7 @@ export const ChildLocations = ({ fhirBaseUrl, locationId }: InventoryViewProps)
                 onClick={() => {
                   const queryParams = {
                     [parentIdQueryParam]: `${locationResourceType}/${locationId}`,
+                    ...backParamObj,
                   };
                   const searchString = new URLSearchParams(queryParams).toString();
                   history.push(`${URL_LOCATION_UNIT_ADD}?${searchString}`);
@@ -112,10 +167,11 @@ export const ChildLocations = ({ fhirBaseUrl, locationId }: InventoryViewProps)
  */
 export function parseTableData(locations: ILocation[]) {
   return locations.map((loc) => ({
+    id: loc.id as string,
     name: loc.name,
     partOf: loc.partOf?.display ?? '-',
     description: loc.description,
     status: loc.status,
-    physicalType: get(loc, 'physicalType.coding.0.display'),
+    type: get(loc, 'physicalType.coding.0.display'),
   }));
 }

packages/fhir-location-management/src/components/ViewDetails/DetailsTabs/tests/detailsTabs.test.tsx

@@ -142,7 +142,7 @@ test('works correctly - jurisdiction location', async () => {
   let tableData = [...childLocationTab.querySelectorAll('table tbody tr')].map(
     (tr) => tr.textContent
   );
-  expect(tableData).toEqual(['Kiambu CountyBuildingactive']);
+  expect(tableData).toEqual(['Kiambu CountyBuildingactiveEdit']);
 
   // validate search works.
   const childLocationSearch = childLocationTab.querySelector('[data-testid="search-form"]')!;
@@ -169,7 +169,7 @@ test('works correctly - jurisdiction location', async () => {
 
   expect(history.location.pathname).toEqual('/admin/location/unit/add');
   expect(history.location.search).toEqual(
-    '?parentId=Location%2Fd9d7aa7b-7488-48e7-bae8-d8ac5bd09334'
+    '?parentId=Location%2Fd9d7aa7b-7488-48e7-bae8-d8ac5bd09334&back_to=%2Fprofile%2Fd9d7aa7b-7488-48e7-bae8-d8ac5bd09334'
   );
 
   expect(nock.isDone()).toBeTruthy();