Update billable services workspace (#267)

* removed the console statements

* redisigned the edit billable services form to launch from a workspace

* fix the display of the worspace for editing a billable service

* fix styling on the editing of billable services form

* rename initialData to service

packages/esm-billing-app/src/billable-services/billable-services.component.tsx

@@ -24,12 +24,13 @@ import {
   ErrorState,
   navigate,
   WorkspaceContainer,
+  launchWorkspace,
 } from '@openmrs/esm-framework';
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
 import styles from './billable-services.scss';
 import { useTranslation } from 'react-i18next';
 import { useBillableServices } from './billable-service.resource';
-import { ArrowRight } from '@carbon/react/icons';
+import { ArrowRight, Edit } from '@carbon/react/icons';
 
 const BillableServices = () => {
   const { t } = useTranslation();
@@ -45,6 +46,12 @@ const BillableServices = () => {
   const [showOverlay, setShowOverlay] = useState(false);
   const [overlayHeader, setOverlayTitle] = useState('');
 
+  const handleEditClick = (service) => {
+    launchWorkspace('update-billable-services-workspace', {
+      service,
+    });
+  };
+
   const headerData = [
     {
       header: t('serviceName', 'Service Name'),
@@ -103,7 +110,7 @@ const BillableServices = () => {
         serviceType: service?.serviceType?.display,
         status: service.serviceStatus,
         prices: '--',
-        actions: '--',
+        actions: <Edit onClick={() => handleEditClick(service)} style={{ cursor: 'pointer' }} />,
       };
       let cost = '';
       service.servicePrices.forEach((price) => {
@@ -138,6 +145,7 @@ const BillableServices = () => {
 
   return (
     <>
+      <WorkspaceContainer overlay contextKey="billable-services" />
       {billableServices?.length > 0 ? (
         <div className={styles.serviceContainer}>
           <FilterableTableHeader