feat(admin-ui): Add location names to fulfilment rows and timeline events (#3481)

Adds location information to fulfilment rows and timeline events

![image](https://user-images.githubusercontent.com/948623/225306827-ebd08517-41c5-426e-88f2-43192b337995.png)
![image](https://user-images.githubusercontent.com/948623/225306876-7f77cbb8-6583-4082-b141-21b84fc2c79e.png)

Resolves CORE-1234

packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment.tsx

@@ -4,11 +4,14 @@ import {
   useAdminCancelFulfillment,
   useAdminCancelSwapFulfillment,
 } from "medusa-react"
+import IconBadge from "../../../../components/fundamentals/icon-badge"
+import BuildingsIcon from "../../../../components/fundamentals/icons/buildings-icon"
 import CancelIcon from "../../../../components/fundamentals/icons/cancel-icon"
 import PackageIcon from "../../../../components/fundamentals/icons/package-icon"
 import Actionables from "../../../../components/molecules/actionables"
 import useImperativeDialog from "../../../../hooks/use-imperative-dialog"
 import useNotification from "../../../../hooks/use-notification"
+import useStockLocations from "../../../../hooks/use-stock-locations"
 import { getErrorMessage } from "../../../../utils/error-messages"
 import { TrackingLink } from "./tracking-link"
 
@@ -23,6 +26,7 @@ export const FormattedFulfillment = ({
   const cancelFulfillment = useAdminCancelFulfillment(order.id)
   const cancelSwapFulfillment = useAdminCancelSwapFulfillment(order.id)
   const cancelClaimFulfillment = useAdminCancelClaimFulfillment(order.id)
+  const { getLocationNameById } = useStockLocations()
 
   const { fulfillment } = fulfillmentObj
   const hasLinks = !!fulfillment.tracking_links?.length
@@ -89,7 +93,7 @@ export const FormattedFulfillment = ({
 
   return (
     <div className="flex w-full justify-between">
-      <div className="flex flex-col space-y-1 py-2">
+      <div className="flex flex-col space-y-1 py-4">
         <div className="text-grey-90">
           {fulfillment.canceled_at
             ? "Fulfillment has been canceled"
@@ -104,6 +108,19 @@ export const FormattedFulfillment = ({
               <TrackingLink key={j} trackingLink={tl} />
             ))}
         </div>
+        {!fulfillment.canceled_at && fulfillment.location_id && (
+          <div className="flex flex-col">
+            <div className="text-grey-50 font-semibold">
+              {fulfillment.shipped_at ? "Shipped" : "Shipping"} from{" "}
+            </div>
+            <div className="flex items-center pt-2">
+              <IconBadge className="mr-2">
+                <BuildingsIcon />
+              </IconBadge>
+              {getLocationNameById(fulfillment.location_id)}
+            </div>
+          </div>
+        )}
       </div>
       {!fulfillment.canceled_at && !fulfillment.shipped_at && (
         <div className="flex items-center space-x-2">