[WIP] DO NOT MERGE - Draft of Updated App Template Example

App.jsx

@@ -1,6 +1,7 @@
 import { BrowserRouter } from "react-router-dom";
 import { NavigationMenu } from "@shopify/app-bridge-react";
 import Routes from "./Routes";
+import React from "react";
 
 import {
   AppBridgeProvider,
@@ -21,8 +22,12 @@ export default function App() {
             <NavigationMenu
               navigationLinks={[
                 {
-                  label: "Page name",
-                  destination: "/pagename",
+                  label: "Home",
+                  destination: "/",
+                },
+                {
+                  label: "Product Tagger",
+                  destination: "/product-tagger",
                 },
               ]}
             />

components/ProductTagsInput.jsx

@@ -0,0 +1,144 @@
+import {
+  LegacyStack,
+  Tag,
+  Listbox,
+  Combobox,
+  Icon,
+  TextContainer,
+} from "@shopify/polaris";
+
+import { SearchMinor } from "@shopify/polaris-icons";
+import React from "react";
+
+import { useState, useCallback } from "react";
+
+export default function ProductTagsInput({
+  getTags,
+  tagsToUpdate,
+  setTagsToUpdate,
+}) {
+  const [deselectedOptions, setDeselectedOptions] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+  const [options, setOptions] = useState(deselectedOptions);
+  const [loading, setLoading] = useState(false);
+
+  async function getProductTags() {
+    // only fetch the tags once
+    if (deselectedOptions.length > 0) {
+      return;
+    }
+
+    setLoading(true);
+    const tags = await getTags();
+
+    const options = tags.map((tag) => {
+      return { value: tag, label: tag };
+    });
+
+    setDeselectedOptions(options);
+    setOptions(options);
+    setLoading(false);
+  }
+
+  const updateText = useCallback(
+    (value) => {
+      setInputValue(value);
+
+      if (value === "") {
+        setOptions(deselectedOptions);
+        return;
+      }
+
+      const filterRegex = new RegExp(value, "i");
+      const resultOptions = deselectedOptions.filter((option) =>
+        option.label.match(filterRegex)
+      );
+      setOptions(resultOptions);
+    },
+    [deselectedOptions]
+  );
+
+  const updateSelection = useCallback(
+    (selected) => {
+      if (tagsToUpdate.includes(selected)) {
+        setTagsToUpdate(tagsToUpdate.filter((option) => option !== selected));
+      } else {
+        setTagsToUpdate([...tagsToUpdate, selected]);
+      }
+
+      const matchedOption = options.find((option) => {
+        return option.value.match(selected);
+      });
+
+      updateText("");
+    },
+    [options, tagsToUpdate, updateText]
+  );
+
+  const removeTag = useCallback(
+    (tag) => () => {
+      const options = [...tagsToUpdate];
+      options.splice(options.indexOf(tag), 1);
+      setTagsToUpdate(options);
+    },
+    [tagsToUpdate]
+  );
+
+  const tagsMarkup = tagsToUpdate.map((option) => (
+    <Tag key={`option-${option}`} onRemove={removeTag(option)}>
+      {option}
+    </Tag>
+  ));
+
+  const optionsMarkup =
+    options.length > 0
+      ? options.map((option) => {
+          const { label, value } = option;
+
+          return (
+            <Listbox.Option
+              key={`${value}`}
+              value={value}
+              selected={tagsToUpdate.includes(value)}
+              accessibilityLabel={label}
+            >
+              {label}
+            </Listbox.Option>
+          );
+        })
+      : null;
+
+  const loadingMarkup = loading ? <Listbox.Loading /> : null;
+
+  const listboxMarkup =
+    optionsMarkup || loadingMarkup ? (
+      <Listbox onSelect={updateSelection}>
+        {optionsMarkup && !loading ? optionsMarkup : null}
+        {loadingMarkup}
+      </Listbox>
+    ) : null;
+
+  return (
+    <div>
+      <div style={{ marginBottom: "1rem", minHeight: "40px" }}>
+        <LegacyStack>{tagsMarkup}</LegacyStack>
+      </div>
+      <Combobox
+        allowMultiple
+        activator={
+          <Combobox.TextField
+            prefix={<Icon source={SearchMinor} />}
+            onChange={updateText}
+            label="Search tags to add or remove from products"
+            labelHidden
+            value={inputValue}
+            placeholder="Search tags to add or remove from products"
+            onFocus={getProductTags}
+          />
+        }
+      >
+        {listboxMarkup}
+      </Combobox>
+    </div>
+  );
+}

components/ProductsTable.jsx

@@ -0,0 +1,86 @@
+import {
+  IndexTable,
+  LegacyCard,
+  LegacyStack,
+  useIndexResourceState,
+  Text,
+  Badge,
+  EmptySearchResult,
+} from "@shopify/polaris";
+import React from "react";
+
+export default function ProductsTable({
+  productsArray,
+  addTags,
+  removeTags,
+  isLoading = false,
+  tagsToUpdate,
+}) {
+  const { selectedResources, allResourcesSelected, handleSelectionChange } =
+    useIndexResourceState(productsArray);
+
+  const promotedBulkActions = [
+    {
+      content: "Add selected tags",
+      onAction: () => addTags(selectedResources),
+    },
+    {
+      content: "Remove selected tags",
+      onAction: () => removeTags(selectedResources),
+    },
+  ];
+
+  const rowMarkup = productsArray.map(({ id, title, tags }, index) => (
+    <IndexTable.Row
+      id={id}
+      key={id}
+      selected={selectedResources.includes(id)}
+      position={index}
+    >
+      <IndexTable.Cell>
+        <Text fontWeight="bold" as="span">
+          {title}
+        </Text>
+      </IndexTable.Cell>
+      <IndexTable.Cell>
+        <LegacyStack spacing="tight">
+          {tags.map((tag) => (
+            <Badge>{tag}</Badge>
+          ))}
+        </LegacyStack>
+      </IndexTable.Cell>
+    </IndexTable.Row>
+  ));
+
+  return (
+    <LegacyCard>
+      <IndexTable
+        resourceName={{
+          singular: "Product tags",
+          plural: "Products and tags",
+        }}
+        itemCount={productsArray.length}
+        loading={isLoading}
+        selectedItemsCount={
+          allResourcesSelected ? "All" : selectedResources.length
+        }
+        onSelectionChange={handleSelectionChange}
+        promotedBulkActions={promotedBulkActions}
+        headings={[{ title: "Name" }, { title: "Tags" }]}
+        emptyState={<EmptyState />}
+      >
+        {rowMarkup}
+      </IndexTable>
+    </LegacyCard>
+  );
+}
+
+function EmptyState() {
+  return (
+    <EmptySearchResult
+      title={"No products selected"}
+      description={"Select products to explore their tags"}
+      withIllustration
+    />
+  );
+}

components/index.js

@@ -1,2 +1 @@
-export { ProductsCard } from "./ProductsCard";
 export * from "./providers";

package.json

@@ -15,7 +15,7 @@
     "@shopify/app-bridge": "^3.1.0",
     "@shopify/app-bridge-react": "^3.1.0",
     "@shopify/app-bridge-utils": "^3.1.0",
-    "@shopify/polaris": "^9.11.0",
+    "@shopify/polaris": "^10.35.0",
     "@vitejs/plugin-react": "1.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",