[Content | Schema] Block Selector VQA (#3142)

Updates to vqa comments for the Block Selector ### Preview [Content---nar-test-2---Zesty-io---zesty-pw---Manager.webm](https://github.com/user-attachments/assets/576ddad1-540c-4709-b9ce-3b21808e64fe)
zesty-io · Jan 16, 2025 · 6774810 · 6774810
1 parent eba051f
commit 6774810
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 22 deletions.
diff --git a/cypress/e2e/content/content.spec.js b/cypress/e2e/content/content.spec.js
@@ -70,20 +70,17 @@ describe("Content Specs", () => {
     });
 
     it("Dropdown Field", () => {
-      cy.get("#12-f3152c-kjz88l").find(".MuiSelect-select").click();
+      cy.get("#12-f3152c-kjz88l").find(".MuiAutocomplete-root input").click();
 
-      cy.get("[role=presentation]")
-        .find('[data-value="custom_option_one"]')
-        .click();
-
-      cy.contains("#12-f3152c-kjz88l .MuiSelect-select", "Custom Option One");
-
-      cy.get("#12-f3152c-kjz88l").find(".MuiSelect-select").click();
-      cy.get("[role=presentation]")
-        .find('[data-value="custom_option_two"]')
-        .click();
+      cy.get(".MuiAutocomplete-option").first().click();
+      cy.get("#12-f3152c-kjz88l")
+        .find(".MuiAutocomplete-root input")
+        .should("have.value", "Custom Option One");
 
-      cy.contains("#12-f3152c-kjz88l .MuiSelect-select", "Custom Option Two");
+      cy.get(".MuiAutocomplete-option").last().click();
+      cy.get("#12-f3152c-kjz88l")
+        .find(".MuiAutocomplete-root input")
+        .should("have.value", "Custom Option Two");
     });
 
     it("Url Field", () => {
@@ -412,7 +409,7 @@ describe("Content Specs", () => {
     });
   });
 
-  describe("Block Selector Field", () => {
+  describe.only("Block Selector Field", () => {
     before(() => {
       cy.waitOn("/v1/content/models*", () => {
         cy.visit("/content/6-556370-8sh47g/7-b939a4-457q19");

diff --git a/cypress/e2e/content/navigation.spec.js b/cypress/e2e/content/navigation.spec.js
@@ -24,7 +24,7 @@ describe("Navigation through content editor", () => {
     cy.getBySelector("create_new_content_item_dialog").should("exist");
     cy.getBySelector("create_new_content_item_input")
       .find("input")
-      .type("cypress");
+      .type("group with visible");
     cy.get(".MuiAutocomplete-listbox .MuiAutocomplete-option")
       .first()
       .should("exist")

diff --git a/src/apps/blocks/views/BlockModel.tsx b/src/apps/blocks/views/BlockModel.tsx
@@ -11,13 +11,15 @@ import { CreateVariantDialog } from "../components/CreateVariantDialog";
 import { fetchModels } from "../../../shell/store/models";
 import { useDispatch } from "react-redux";
 import { fetchFields } from "../../../shell/store/fields";
+import { useParams as useSearchParams } from "../../../shell/hooks/useParams";
 
 export const BlockModel = () => {
   const dispatch = useDispatch();
   const { modelZUID } = useParams<{
     modelZUID: string;
   }>();
   const history = useHistory();
+  const [params] = useSearchParams();
   const [renderFlag, setRenderFlag] = useState(false);
   const [showCreateVariantDialog, setShowCreateVariantDialog] = useState(false);
   const { data, isFetching, error, isUninitialized } =
@@ -46,6 +48,10 @@ export const BlockModel = () => {
     }
   }, [data, isFetching, error, history]);
 
+  useEffect(() => {
+    setShowCreateVariantDialog(!!params?.get("createVariant"));
+  }, [params]);
+
   const model = models?.find((model) => model.ZUID === modelZUID);
 
   if (renderFlag) {

diff --git a/src/apps/schema/src/app/utils/index.ts b/src/apps/schema/src/app/utils/index.ts
@@ -27,11 +27,8 @@ export const stringStartsWithVowel = (string: string): boolean => {
   return ["a", "e", "i", "o", "u"].includes(firstLetter.toLowerCase());
 };
 
-export const convertLabelValue = (string: string): string => {
-  if (!string) return;
-
-  return replace(string, /\W/g, "_").toLowerCase();
-};
+export const convertLabelValue = (string: string): string =>
+  replace(string, /\W/g, "_").toLowerCase();
 
 export const convertDropdownValue = (string: string): string => {
   if (!string) return;

diff --git a/src/shell/components/FieldTypeBlockSelector/NoVariant.tsx b/src/shell/components/FieldTypeBlockSelector/NoVariant.tsx
@@ -45,7 +45,9 @@ export const NoVariant = ({
         <Button
           variant="outlined"
           startIcon={<AddRounded />}
-          onClick={() => history.push(`/blocks/${blockModelZUID}/new`)}
+          onClick={() =>
+            history.push(`/blocks/${blockModelZUID}?createVariant=true`)
+          }
         >
           Create Variant
         </Button>

diff --git a/src/shell/components/FieldTypeBlockSelector/VariantSelector.tsx b/src/shell/components/FieldTypeBlockSelector/VariantSelector.tsx
@@ -38,6 +38,7 @@ export const VariantSelector = ({
   const { data: users } = useGetUsersQuery();
   const [filterKeyword, setFilterKeyword] = useState("");
   const filterTextField = useRef(null);
+  const variantsRef = useRef<HTMLLIElement[]>([]);
 
   const filteredVariants = useMemo(() => {
     if (!filterKeyword) return variants;
@@ -97,15 +98,27 @@ export const VariantSelector = ({
             placeholder="Search variants"
             ref={filterTextField}
             value={filterKeyword}
-            onChange={(evt) => setFilterKeyword(evt.currentTarget.value)}
+            onChange={(evt) => {
+              setFilterKeyword(evt.currentTarget.value);
+
+              if (!!evt.currentTarget.value) {
+                variantsRef.current?.[0]?.classList.add("hover");
+              } else {
+                variantsRef.current?.forEach((element) =>
+                  element.classList.remove("hover")
+                );
+              }
+            }}
             InputProps={{
               startAdornment: <Search color="action" />,
             }}
             onKeyDown={(e: React.KeyboardEvent) => {
-              const allowedKeys = ["ArrowUp", "ArrowDown", "Escape"];
+              const allowedKeys = ["ArrowUp", "ArrowDown", "Escape", "Enter"];
 
               if (!allowedKeys.includes(e.key)) {
                 e.stopPropagation();
+              } else if (e.key === "Enter" && !!filterKeyword) {
+                variantsRef.current?.[0]?.click();
               }
             }}
           />
@@ -118,6 +131,7 @@ export const VariantSelector = ({
         ) : filteredVariants?.length ? (
           filteredVariants?.map((variant, index) => (
             <MenuItem
+              ref={(node) => (variantsRef.current[index] = node)}
               data-cy={`Variant_${index}`}
               key={variant?.meta?.ZUID}
               divider={index + 1 < variants?.length}
@@ -128,6 +142,12 @@ export const VariantSelector = ({
                 py: 1.75,
                 gap: 1.5,
                 borderColor: "border",
+
+                "&.hover": {
+                  "-webkit-text-decoration": "none",
+                  textDecoration: "none",
+                  bgcolor: "rgba(16, 24, 40, 0.04)",
+                },
               }}
             >
               <Tooltip

diff --git a/src/shell/components/FieldTypeBlockSelector/index.tsx b/src/shell/components/FieldTypeBlockSelector/index.tsx
@@ -57,6 +57,7 @@ export const FieldTypeBlockSelector = ({
     useLazyGetContentModelItemsQuery();
   const [isVariantSelectorOpen, setIsVariantSelectorOpen] = useState(false);
   const [isLinkCopied, setIsLinkCopied] = useState(false);
+  const [enableAutohighlight, setEnableAutohighlight] = useState(false);
   const variantSelectorRef = useRef<HTMLDivElement>(null);
 
   const [blockValue, updateBlockValue] = useReducer(
@@ -146,6 +147,10 @@ export const FieldTypeBlockSelector = ({
     <>
       <Stack direction="row" gap={0.5}>
         <Autocomplete
+          autoHighlight={enableAutohighlight}
+          onInputChange={(_, value, reason) =>
+            setEnableAutohighlight(!!value && reason === "input")
+          }
           data-cy="BlockSelectorModelField"
           loading={isLoadingModels}
           renderInput={(params) => (