show the actual manual special color in support UI

src/app/WardrobePage/support/ItemSupportDrawer.js

@@ -71,15 +71,24 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
 }
 
 function SpecialColorFields({ item }) {
-  const { loading, error, data } = useQuery(gql`
+  const { loading, error, data } = useQuery(
-    query ItemSupportDrawer {
+    gql`
+      query ItemSupportDrawerSpecialColorFields($itemId: ID!) {
         allColors {
           id
           name
           isStandard
         }
+
+        item(id: $itemId) {
+          manualSpecialColor {
+            id
           }
-  `);
+        }
+      }
+    `,
+    { variables: { itemId: item.id } }
+  );
 
   const nonStandardColors = data?.allColors?.filter((c) => !c.isStandard) || [];
   nonStandardColors.sort((a, b) => a.name.localeCompare(b.name));
@@ -88,8 +97,11 @@ function SpecialColorFields({ item }) {
     <FormControl isInvalid={error ? true : false}>
       <FormLabel>Special color</FormLabel>
       <Select
-        placeholder="Default: Auto-detect from item description"
+        placeholder={
+          loading ? "Loading…" : "Default: Auto-detect from item description"
+        }
         icon={loading ? <Spinner /> : undefined}
+        value={data?.item?.manualSpecialColor?.id}
       >
         {nonStandardColors.map((color) => (
           <option key={color.id} value={color.id}>

src/server/index.js

@@ -66,6 +66,12 @@ const typeDefs = gql`
     rarityIndex: Int!
     isNc: Boolean!
     appearanceOn(speciesId: ID!, colorId: ID!): ItemAppearance
+
+    # This is set manually by Support users, when the pet is only for e.g.
+    # Maraquan pets, and our usual auto-detection isn't working. We provide
+    # this for the Support UI; it's not very helpful for most users, because it
+    # can be empty even if the item _has_ an auto-detected special color.
+    manualSpecialColor: Color
   }
 
   # Cache for 1 week (unlikely to change)
@@ -147,6 +153,7 @@ const typeDefs = gql`
     allColors: [Color!]! @cacheControl(maxAge: 10800) # Cache for 3 hours (we might add more!)
     allSpecies: [Species!]! @cacheControl(maxAge: 10800) # Cache for 3 hours (we might add more!)
     allValidSpeciesColorPairs: [SpeciesColorPair!]! # deprecated
+    item(id: ID!): Item
     items(ids: [ID!]!): [Item!]!
     itemSearch(query: String!): ItemSearchResult!
     itemSearchToFit(
@@ -228,6 +235,12 @@ const resolvers = {
 
       return { layers: swfAssets, restrictedZones };
     },
+    manualSpecialColor: async ({ id }, _, { itemLoader }) => {
+      const item = await itemLoader.load(id);
+      return item.manualSpecialColorId != null
+        ? { id: item.manualSpecialColorId }
+        : null;
+    },
   },
   PetAppearance: {
     id: async ({ petStateId }, _, { petStateLoader, petTypeLoader }) => {
@@ -381,6 +394,7 @@ const resolvers = {
       }));
       return allPairs;
     },
+    item: (_, { id }) => ({ id }),
     items: (_, { ids }) => {
       return ids.map((id) => ({ id }));
     },

src/server/query-tests/Item.test.js

@@ -6,13 +6,17 @@ describe("Item", () => {
     const res = await query({
       query: gql`
         query {
-          items(ids: ["38913", "38911", "38912", "78104"]) {
+          items(ids: ["38913", "38911", "38912", "77530", "78104"]) {
             id
             name
             description
             thumbnailUrl
             rarityIndex
             isNc
+            manualSpecialColor {
+              id
+              name
+            }
           }
         }
       `,
@@ -23,23 +27,32 @@ describe("Item", () => {
     expect(getDbCalls()).toMatchInlineSnapshot(`
       Array [
         Array [
-          "SELECT * FROM item_translations WHERE item_id IN (?,?,?,?) AND locale = \\"en\\"",
+          "SELECT * FROM item_translations WHERE item_id IN (?,?,?,?,?) AND locale = \\"en\\"",
           Array [
             "38913",
             "38911",
             "38912",
+            "77530",
             "78104",
           ],
         ],
         Array [
-          "SELECT * FROM items WHERE id IN (?,?,?,?)",
+          "SELECT * FROM items WHERE id IN (?,?,?,?,?)",
           Array [
             "38913",
             "38911",
             "38912",
+            "77530",
             "78104",
           ],
         ],
+        Array [
+          "SELECT * FROM color_translations
+             WHERE color_id IN (?) AND locale = \\"en\\"",
+          Array [
+            "44",
+          ],
+        ],
       ]
     `);
   });

src/server/query-tests/__snapshots__/Item.test.js.snap

@@ -85,6 +85,7 @@ Object {
       "description": "Dont leave any trace that you were there with these gloves.",
       "id": "38913",
       "isNc": false,
+      "manualSpecialColor": null,
       "name": "Zafara Agent Gloves",
       "rarityIndex": 88,
       "thumbnailUrl": "http://images.neopets.com/items/clo_zafara_agent_gloves.gif",
@@ -93,6 +94,7 @@ Object {
       "description": "Hide your face and hair so no one can recognise you.",
       "id": "38911",
       "isNc": false,
+      "manualSpecialColor": null,
       "name": "Zafara Agent Hood",
       "rarityIndex": 92,
       "thumbnailUrl": "http://images.neopets.com/items/clo_zafara_agent_hood.gif",
@@ -101,14 +103,28 @@ Object {
       "description": "This robe is great for being stealthy.",
       "id": "38912",
       "isNc": false,
+      "manualSpecialColor": null,
       "name": "Zafara Agent Robe",
       "rarityIndex": 90,
       "thumbnailUrl": "http://images.neopets.com/items/clo_zafara_agent_robe.gif",
     },
+    Object {
+      "description": "Made with the finest jewels of the sea!",
+      "id": "77530",
+      "isNc": true,
+      "manualSpecialColor": Object {
+        "id": "44",
+        "name": "Maraquan",
+      },
+      "name": "Maraquan Sea Blue Gown",
+      "rarityIndex": 500,
+      "thumbnailUrl": "http://images.neopets.com/items/mall_clo_marabluegown.gif",
+    },
     Object {
       "description": "You truly are the number one fan of Altador Cup, and your room reflects this!",
       "id": "78104",
       "isNc": true,
+      "manualSpecialColor": null,
       "name": "#1 Fan Room Background",
       "rarityIndex": 500,
       "thumbnailUrl": "http://images.neopets.com/items/mall_bg_numberonefanbg.gif",
@@ -131,3 +147,18 @@ Object {
   ],
 }
 `;
+
+exports[`Item skips appearance data for audio assets 3`] = `
+Object {
+  "items": Array [
+    Object {
+      "appearanceOn": Object {
+        "layers": Array [],
+        "restrictedZones": Array [],
+      },
+      "id": "42829",
+      "name": "Time Tunnel Music Track",
+    },
+  ],
+}
+`;