Fix admin forms

- Product and vendor service create pages weren't working right
  due to changes around categories (and some other stuff)
- Vendor service create couldn't work right because the mobility
  adapter options were coming back on the entity,
  not as a meta endpoint. Add a meta endpoint instead.
- Categories related list can use an admin link for the row id.

Author: rgalanakis

adminapp/src/api.js

@@ -96,6 +96,8 @@ export default {
     get(`/adminapi/v1/meta/resource_access`, data, ...args),
   getStateMachine: ({ name, ...data }, ...args) =>
     get(`/adminapi/v1/meta/state_machines/${name}`, data, ...args),
+  getVendorServiceMobilityAdapterOptions: (data, ...args) =>
+    get(`/adminapi/v1/meta/vendor_service_mobility_adapter_options`, data, ...args),
 
   getBankAccount: ({ id, ...data }, ...args) =>
     get(`/adminapi/v1/bank_accounts/${id}`, data, ...args),

adminapp/src/components/CategoriesRelatedList.jsx

@@ -10,7 +10,7 @@ export default function CategoriesRelatedList({ categories }) {
       headers={["Id", "Name", "Slug", "Parent"]}
       keyRowAttr="id"
       toCells={(row) => [
-        row.id,
+        <AdminLink model={row} />,
         row.name,
         row.slug,
         row.parent ? <AdminLink model={row.parent}>{row.parent.name}</AdminLink> : null,

adminapp/src/pages/ProductCreatePage.jsx

@@ -12,7 +12,7 @@ export default function ProductCreatePage() {
     name: formHelpers.initialTranslation,
     vendor: null,
     ordinal: 0,
-    category: null,
+    vendorServiceCategories: [],
     inventory: {
       maxQuantityPerMemberPerOrder: null,
       limitedQuantity: false,

adminapp/src/pages/ProductDetailPage.jsx

@@ -29,10 +29,6 @@ export default function ProductDetailPage() {
           label: "Vendor",
           value: <AdminLink model={model.vendor}>{model.vendor.name}</AdminLink>,
         },
-        {
-          label: "Category",
-          value: model.vendorServiceCategories[0]?.name,
-        },
         {
           label: "Max Per Member/Offering",
           value: model.inventory.maxQuantityPerMemberPerOffering,

adminapp/src/pages/VendorServiceCreatePage.jsx

@@ -1,5 +1,6 @@
 import api from "../api";
 import ResourceCreate from "../components/ResourceCreate";
+import { dayjs } from "../modules/dayConfig";
 import VendorServiceForm from "./VendorServiceForm.jsx";
 import React from "react";
 
@@ -8,6 +9,10 @@ export default function VendorServiceCreatePage() {
     internalName: "",
     externalName: "",
     vendor: { name: "" },
+    categories: [],
+    mobilityAdapterSetting: "no_adapter",
+    periodBegin: dayjs().format(),
+    periodEnd: dayjs().add(1, "day").format(),
   };
   return (
     <ResourceCreate

adminapp/src/pages/VendorServiceDetailPage.jsx

@@ -1,6 +1,7 @@
 import api from "../api";
 import AdminLink from "../components/AdminLink";
 import AuditActivityList from "../components/AuditActivityList";
+import CategoriesRelatedList from "../components/CategoriesRelatedList";
 import RelatedList from "../components/RelatedList";
 import ResourceDetail from "../components/ResourceDetail";
 import detailPageImageProperties from "../components/detailPageImageProperties";
@@ -46,13 +47,7 @@ export default function VendorServiceDetailPage() {
             </AdminLink>,
           ]}
         />,
-        <RelatedList
-          title="Categories"
-          rows={model.categories}
-          headers={["Id", "Name", "Slug"]}
-          keyRowAttr="id"
-          toCells={(row) => [row.id, row.name, row.slug]}
-        />,
+        <CategoriesRelatedList categories={model.categories} />,
         <AuditActivityList activities={model.auditActivities} />,
       ]}
     </ResourceDetail>

adminapp/src/pages/VendorServiceForm.jsx

@@ -5,6 +5,7 @@ import ImageFileInput from "../components/ImageFileInput";
 import ResponsiveStack from "../components/ResponsiveStack";
 import SafeDateTimePicker from "../components/SafeDateTimePicker";
 import VendorServiceCategoryMultiSelect from "../components/VendorServiceCategoryMultiSelect";
+import { useGlobalApiState } from "../hooks/globalApiState";
 import { formatOrNull } from "../modules/dayConfig";
 import RemoveIcon from "@mui/icons-material/Remove";
 import {
@@ -91,29 +92,22 @@ export default function VendorServiceForm({
           />
         </ResponsiveStack>
         <VendorServiceCategoryMultiSelect
-          {...register("category")}
+          {...register("categories")}
           label="Categories"
           helperText="What ledger funds can be used to pay for this service?"
           value={resource.categories}
           style={{ flex: 1 }}
           onChange={(_, c) => setField("categories", c)}
-          required
         />
         <FormControl>
           <InputLabel>Mobility Adapter</InputLabel>
-          <Select
+          <MobilityAdapterSelect
             {...register("mobilityAdapterSetting")}
             label="Mobility Adapter Key"
             name="mobilityAdapterSetting"
             value={resource.mobilityAdapterSetting}
             onChange={setFieldFromInput}
-          >
-            {resource.mobilityAdapterSettingOptions.map(({ name, value }) => (
-              <MenuItem key={value} value={value}>
-                {name}
-              </MenuItem>
-            ))}
-          </Select>
+          />
           <FormHelperText>
             How this service maps to backend functionality. Generally a programmer will
             set this.
@@ -141,3 +135,20 @@ export default function VendorServiceForm({
     </FormLayout>
   );
 }
+
+function MobilityAdapterSelect({ ...rest }) {
+  const data = useGlobalApiState(
+    (data, ...args) => api.getVendorServiceMobilityAdapterOptions({ ...data }, ...args),
+    { items: [] }
+  );
+
+  return (
+    <Select {...rest}>
+      {data.items.map(({ name, value }) => (
+        <MenuItem key={value} value={value}>
+          {name}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+}

lib/suma/admin_api/meta.rb

@@ -62,6 +62,12 @@ class Suma::AdminAPI::Meta < Suma::AdminAPI::V1
         end
       end
     end
+
+    get :vendor_service_mobility_adapter_options do
+      use_http_expires_caching 48.hours
+      check_admin_role_access!(:read, :admin_access)
+      present_collection Suma::Vendor::Service.mobility_adapter_setting_options
+    end
   end
 
   class CurrencyEntity < BaseEntity

lib/suma/admin_api/vendor_services.rb

@@ -21,7 +21,6 @@ class DetailedVendorServiceEntity < VendorServiceEntity
 
     expose :mobility_adapter_setting
     expose :mobility_adapter_setting_name
-    expose :mobility_adapter_setting_options
   end
 
   resource :vendor_services do
@@ -43,7 +42,7 @@ class DetailedVendorServiceEntity < VendorServiceEntity
       params do
         requires(:vendor, type: JSON) { use :model_with_id }
         requires :image, type: File
-        requires(:image_caption, type: JSON) { use :translated_text, allow_blank: true }
+        optional(:image_caption, type: JSON) { use :translated_text, allow_blank: true }
         requires :internal_name, type: String
         requires :external_name, type: String
         requires :period_begin, type: Time

lib/suma/vendor/service.rb

@@ -67,7 +67,7 @@ def usage_prohibited_reason(member, rate:, now:)
     return nil
   end
 
-  def mobility_adapter_setting_options
+  def self.mobility_adapter_setting_options
     return [
       {name: "No Adapter/Non-Mobility", value: "no_adapter"},
       {name: "Deep Linking (suma sends receipts)", value: "deep_linking_suma_receipts"},
@@ -89,7 +89,7 @@ def mobility_adapter_setting
   end
 
   def mobility_adapter_setting_name
-    self.mobility_adapter_setting_options.find { |h| h[:value] == self.mobility_adapter_setting }.fetch(:name)
+    self.class.mobility_adapter_setting_options.find { |h| h[:value] == self.mobility_adapter_setting }.fetch(:name)
   end
 
   def mobility_adapter_setting=(value)