@shopify/cli-kit 3.47.4 → 3.48.0

package/dist/private/node/ui/components/AutocompletePrompt.test.js

@@ -87,14 +87,14 @@ describe('AutocompletePrompt', async () => {
             { label: 'third', value: 'third' },
         ];
         const infoTable = { Add: ['new-ext'], Remove: ['integrated-demand-ext', 'order-discount'] };
-        const renderInstance = render(React.createElement(AutocompletePrompt, { message: "Associate your project with the org Castile Ventures?", choices: items, infoTable: infoTable, onSubmit: onEnter, search: () => Promise.resolve({
+        const renderInstance = render(React.createElement(AutocompletePrompt, { message: ['Associate your project with the org', { userInput: 'Castile Ventures' }, { char: '?' }], choices: items, infoTable: infoTable, onSubmit: onEnter, search: () => Promise.resolve({
                 data: [],
             }) }));
         await waitForInputsToBeReady();
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         await sendInputAndWaitForChange(renderInstance, ENTER);
         expect(getLastFrameAfterUnmount(renderInstance)).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?
+      "?  Associate your project with the org Castile Ventures?
       ✔  second
       "
     `);
@@ -102,11 +102,11 @@ describe('AutocompletePrompt', async () => {
     });
     test('renders groups', async () => {
         const items = [
-            { label: 'first', value: 'first', group: 'Automations', key: 'f' },
-            { label: 'second', value: 'second', group: 'Automations', key: 's' },
+            { label: 'first', value: 'first', group: 'Automations' },
+            { label: 'second', value: 'second', group: 'Automations' },
             { label: 'third', value: 'third', group: 'Merchant Admin' },
             { label: 'fourth', value: 'fourth', group: 'Merchant Admin' },
-            { label: 'fifth', value: 'fifth', key: 'a' },
+            { label: 'fifth', value: 'fifth' },
             { label: 'sixth', value: 'sixth' },
             { label: 'seventh', value: 'seventh' },
             { label: 'eighth', value: 'eighth' },
@@ -117,25 +117,25 @@ describe('AutocompletePrompt', async () => {
                 data: [],
             }) }));
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?
+      "?  Associate your project with the org Castile Ventures?   Type to search...
 
          Automations
-      >  first
-         second
+         >  first
+            second
 
          Merchant Admin
-         third
-         fourth
+            third
+            fourth
 
          Other
-         fifth
-         sixth
-         seventh
-         eighth
-         ninth
-         tenth
-
-         Press ↑↓ arrows to select, enter to confirm
+            fifth
+            sixth
+            seventh
+            eighth
+            ninth
+            tenth
+
+         Press ↑↓ arrows to select, enter to confirm.
       "
     `);
     });
@@ -154,17 +154,77 @@ describe('AutocompletePrompt', async () => {
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       "?  Associate your project with the org Castile Ventures?
 
-             Add:     • new-ext
+         ┃  \u001b[1mAdd\u001b[22m
+         ┃  • new-ext
+         ┃
+         ┃  \u001b[1mRemove\u001b[22m
+         ┃  • integrated-demand-ext
+         ┃  • order-discount
+
+      >  first
+         second
+         third
+         fourth
+
+         Press ↑↓ arrows to select, enter to confirm.
+      "
+    `);
+    });
+    test('supports a git diff', async () => {
+        const items = [
+            { label: 'first', value: 'first' },
+            { label: 'second', value: 'second' },
+            { label: 'third', value: 'third' },
+            { label: 'fourth', value: 'fourth' },
+        ];
+        const gitDiff = {
+            baselineContent: 'hello\n',
+            updatedContent: 'world\n',
+        };
+        const renderInstance = render(React.createElement(AutocompletePrompt, { message: "Associate your project with the org Castile Ventures?", choices: items, gitDiff: gitDiff, onSubmit: () => { }, search: () => Promise.resolve({ data: [] }) }));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Associate your project with the org Castile Ventures?
+
+         ┃  - hello
+         ┃  + world
+
+      >  first
+         second
+         third
+         fourth
+
+         Press ↑↓ arrows to select, enter to confirm.
+      "
+    `);
+    });
+    test('supports an info message', async () => {
+        const items = [
+            { label: 'first', value: 'first' },
+            { label: 'second', value: 'second' },
+            { label: 'third', value: 'third' },
+            { label: 'fourth', value: 'fourth' },
+        ];
+        const infoMessage = {
+            title: {
+                color: 'red',
+                text: 'Info message title',
+            },
+            body: 'Info message body',
+        };
+        const renderInstance = render(React.createElement(AutocompletePrompt, { message: "Associate your project with the org Castile Ventures?", choices: items, infoMessage: infoMessage, onSubmit: () => { }, search: () => Promise.resolve({ data: [] }) }));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Associate your project with the org Castile Ventures?
 
-             Remove:  • integrated-demand-ext
-                      • order-discount
+         ┃  Info message title
+         ┃
+         ┃  Info message body
 
       >  first
          second
          third
          fourth
 
-         Press ↑↓ arrows to select, enter to confirm
+         Press ↑↓ arrows to select, enter to confirm.
       "
     `);
     });
@@ -182,9 +242,35 @@ describe('AutocompletePrompt', async () => {
         // prompt doesn't change when enter is pressed
         await sendInputAndWait(renderInstance, 100, ENTER);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?   a 
+      "?  Associate your project with the org Castile Ventures?   a█
 
          No results found.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+         Try again with a different keyword.
       "
     `);
         expect(onEnter).not.toHaveBeenCalled();
@@ -205,7 +291,7 @@ describe('AutocompletePrompt', async () => {
         await new Promise((resolve) => setTimeout(resolve, 100));
         await sendInputAndWait(renderInstance, 100, ENTER);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?   a 
+      "?  Associate your project with the org Castile Ventures?   a█
 
          Loading...
       "
@@ -223,171 +309,144 @@ describe('AutocompletePrompt', async () => {
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       "?  Associate your project with the org Castile Ventures?   Type to search...
 
-      >  first
-         second
-         third
-         fourth
-         fifth
-         sixth
-         seventh
-         eighth
-         ninth
-         tenth
-         eleventh
-         twelfth
-         thirteenth
-         fourteenth
-         fifteenth
-         sixteenth
-         seventeenth
-         eighteenth
-         nineteenth
-         twentieth
-         twenty-first
-         twenty-second
-         twenty-third
-         twenty-fourth
-         twenty-fifth
-
-         Press ↑↓ arrows to select, enter to confirm
+      >  first                                                                        
+         second                                                                       
+         third                                                                        
+         fourth                                                                       
+         fifth                                                                        
+         sixth                                                                        
+         seventh                                                                      
+         eighth                                                                       
+         ninth                                                                        
+         tenth                                                                        
+         eleventh                                                                     
+         twelfth                                                                      
+         thirteenth                                                                   
+         fourteenth                                                                   
+         fifteenth                                                                    
+         sixteenth                                                                    
+         seventeenth                                                                  
+         eighteenth                                                                   
+         nineteenth                                                                   
+         twentieth                                                                    
+         twenty-first                                                                 
+         twenty-second                                                                
+         twenty-third                                                                 
+         twenty-fourth                                                                
+         twenty-fifth                                                                 
+
+         Press ↑↓ arrows to select, enter to confirm.
       "
     `);
         await waitForInputsToBeReady();
         await sendInputAndWaitForContent(renderInstance, 'thirty-sixth', 'i');
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?   i 
-
-      >  first
-         third
-         fifth
-         sixth
-         eighth
-         ninth
-         thirteenth
-         fifteenth
-         sixteenth
-         eighteenth
-         nineteenth
-         twentieth
-         twenty-first
-         twenty-third
-         twenty-fifth
-         twenty-sixth
-         twenty-eighth
-         twenty-ninth
-         thirtieth
-         thirty-first
-         thirty-second
-         thirty-third
-         thirty-fourth
-         thirty-fifth
-         thirty-sixth
-
-         Press ↑↓ arrows to select, enter to confirm
+      "?  Associate your project with the org Castile Ventures?   i█
+
+      >  first                                                                        
+         third                                                                        
+         fifth                                                                        
+         sixth                                                                        
+         eighth                                                                       
+         ninth                                                                        
+         thirteenth                                                                   
+         fifteenth                                                                    
+         sixteenth                                                                    
+         eighteenth                                                                   
+         nineteenth                                                                   
+         twentieth                                                                    
+         twenty-first                                                                 
+         twenty-third                                                                 
+         twenty-fifth                                                                 
+         twenty-sixth                                                                 
+         twenty-eighth                                                                
+         twenty-ninth                                                                 
+         thirtieth                                                                    
+         thirty-first                                                                 
+         thirty-second                                                                
+         thirty-third                                                                 
+         thirty-fourth                                                                
+         thirty-fifth                                                                 
+         thirty-sixth                                                                 
+
+         Press ↑↓ arrows to select, enter to confirm.
       "
     `);
         await sendInputAndWaitForChange(renderInstance, DELETE);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       "?  Associate your project with the org Castile Ventures?   Type to search...
 
-      >  first
-         second
-         third
-         fourth
-         fifth
-         sixth
-         seventh
-         eighth
-         ninth
-         tenth
-         eleventh
-         twelfth
-         thirteenth
-         fourteenth
-         fifteenth
-         sixteenth
-         seventeenth
-         eighteenth
-         nineteenth
-         twentieth
-         twenty-first
-         twenty-second
-         twenty-third
-         twenty-fourth
-         twenty-fifth
-
-         Press ↑↓ arrows to select, enter to confirm
+      >  first                                                                        
+         second                                                                       
+         third                                                                        
+         fourth                                                                       
+         fifth                                                                        
+         sixth                                                                        
+         seventh                                                                      
+         eighth                                                                       
+         ninth                                                                        
+         tenth                                                                        
+         eleventh                                                                     
+         twelfth                                                                      
+         thirteenth                                                                   
+         fourteenth                                                                   
+         fifteenth                                                                    
+         sixteenth                                                                    
+         seventeenth                                                                  
+         eighteenth                                                                   
+         nineteenth                                                                   
+         twentieth                                                                    
+         twenty-first                                                                 
+         twenty-second                                                                
+         twenty-third                                                                 
+         twenty-fourth                                                                
+         twenty-fifth                                                                 
+
+         Press ↑↓ arrows to select, enter to confirm.
       "
     `);
         await sendInputAndWaitForContent(renderInstance, 'thirty-sixth', 'i');
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?   i 
-
-         first
-         third
-      >  fifth
-         sixth
-         eighth
-         ninth
-         thirteenth
-         fifteenth
-         sixteenth
-         eighteenth
-         nineteenth
-         twentieth
-         twenty-first
-         twenty-third
-         twenty-fifth
-         twenty-sixth
-         twenty-eighth
-         twenty-ninth
-         thirtieth
-         thirty-first
-         thirty-second
-         thirty-third
-         thirty-fourth
-         thirty-fifth
-         thirty-sixth
-
-         Press ↑↓ arrows to select, enter to confirm
-      "
-    `);
-        await sendInputAndWaitForChange(renderInstance, ENTER);
-        expect(getLastFrameAfterUnmount(renderInstance)).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?
-      ✔  fifth
-      "
-    `);
-        expect(onEnter).toHaveBeenCalledWith('fifth');
-    });
-    test('allows selecting the first item after searching', async () => {
-        const onEnter = vi.fn();
-        const search = async (term) => {
-            await new Promise((resolve) => setTimeout(resolve, 300));
-            return {
-                data: DATABASE.filter((item) => item.label.includes(term)),
-            };
-        };
-        const renderInstance = render(React.createElement(AutocompletePrompt, { message: "Associate your project with the org Castile Ventures?", choices: DATABASE, onSubmit: onEnter, search: search }));
-        await waitForInputsToBeReady();
-        await sendInputAndWaitForContent(renderInstance, 'fiftieth', 'fiftieth');
-        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?   fiftieth 
+      "?  Associate your project with the org Castile Ventures?   i█
 
-      >  fiftieth
+         first                                                                        
+         third                                                                        
+      >  fifth                                                                        
+         sixth                                                                        
+         eighth                                                                       
+         ninth                                                                        
+         thirteenth                                                                   
+         fifteenth                                                                    
+         sixteenth                                                                    
+         eighteenth                                                                   
+         nineteenth                                                                   
+         twentieth                                                                    
+         twenty-first                                                                 
+         twenty-third                                                                 
+         twenty-fifth                                                                 
+         twenty-sixth                                                                 
+         twenty-eighth                                                                
+         twenty-ninth                                                                 
+         thirtieth                                                                    
+         thirty-first                                                                 
+         thirty-second                                                                
+         thirty-third                                                                 
+         thirty-fourth                                                                
+         thirty-fifth                                                                 
+         thirty-sixth                                                                 
 
-         Press ↑↓ arrows to select, enter to confirm
+         Press ↑↓ arrows to select, enter to confirm.
       "
     `);
         await sendInputAndWaitForChange(renderInstance, ENTER);
         expect(getLastFrameAfterUnmount(renderInstance)).toMatchInlineSnapshot(`
       "?  Associate your project with the org Castile Ventures?
-      ✔  fiftieth
+      ✔  fifth
       "
     `);
-        expect(onEnter).toHaveBeenCalledWith('fiftieth');
+        expect(onEnter).toHaveBeenCalledWith('fifth');
     });
     test('displays an error message if the search fails', async () => {
         const search = (_term) => {
@@ -397,7 +456,7 @@ describe('AutocompletePrompt', async () => {
         await waitForInputsToBeReady();
         await sendInputAndWaitForContent(renderInstance, 'There has been an error', 'i');
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?   i 
+      "?  Associate your project with the org Castile Ventures?   i█
 
          There has been an error while searching. Please try again later.
       "
@@ -413,68 +472,68 @@ describe('AutocompletePrompt', async () => {
         await waitForInputsToBeReady();
         await sendInputAndWaitForContent(renderInstance, 'thirty-sixth', 'i');
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?   i 
-
-      >  first
-         third
-         fifth
-         sixth
-         eighth
-         ninth
-         thirteenth
-         fifteenth
-         sixteenth
-         eighteenth
-         nineteenth
-         twentieth
-         twenty-first
-         twenty-third
-         twenty-fifth
-         twenty-sixth
-         twenty-eighth
-         twenty-ninth
-         thirtieth
-         thirty-first
-         thirty-second
-         thirty-third
-         thirty-fourth
-         thirty-fifth
-         thirty-sixth
-
-         Press ↑↓ arrows to select, enter to confirm
+      "?  Associate your project with the org Castile Ventures?   i█
+
+      >  first                                                                        
+         third                                                                        
+         fifth                                                                        
+         sixth                                                                        
+         eighth                                                                       
+         ninth                                                                        
+         thirteenth                                                                   
+         fifteenth                                                                    
+         sixteenth                                                                    
+         eighteenth                                                                   
+         nineteenth                                                                   
+         twentieth                                                                    
+         twenty-first                                                                 
+         twenty-third                                                                 
+         twenty-fifth                                                                 
+         twenty-sixth                                                                 
+         twenty-eighth                                                                
+         twenty-ninth                                                                 
+         thirtieth                                                                    
+         thirty-first                                                                 
+         thirty-second                                                                
+         thirty-third                                                                 
+         thirty-fourth                                                                
+         thirty-fifth                                                                 
+         thirty-sixth                                                                 
+
+         Press ↑↓ arrows to select, enter to confirm.
       "
     `);
         await sendInputAndWaitForChange(renderInstance, DELETE);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       "?  Associate your project with the org Castile Ventures?   Type to search...
 
-      >  first
-         second
-         third
-         fourth
-         fifth
-         sixth
-         seventh
-         eighth
-         ninth
-         tenth
-         eleventh
-         twelfth
-         thirteenth
-         fourteenth
-         fifteenth
-         sixteenth
-         seventeenth
-         eighteenth
-         nineteenth
-         twentieth
-         twenty-first
-         twenty-second
-         twenty-third
-         twenty-fourth
-         twenty-fifth
-
-         Press ↑↓ arrows to select, enter to confirm
+      >  first                                                                        
+         second                                                                       
+         third                                                                        
+         fourth                                                                       
+         fifth                                                                        
+         sixth                                                                        
+         seventh                                                                      
+         eighth                                                                       
+         ninth                                                                        
+         tenth                                                                        
+         eleventh                                                                     
+         twelfth                                                                      
+         thirteenth                                                                   
+         fourteenth                                                                   
+         fifteenth                                                                    
+         sixteenth                                                                    
+         seventeenth                                                                  
+         eighteenth                                                                   
+         nineteenth                                                                   
+         twentieth                                                                    
+         twenty-first                                                                 
+         twenty-second                                                                
+         twenty-third                                                                 
+         twenty-fourth                                                                
+         twenty-fifth                                                                 
+
+         Press ↑↓ arrows to select, enter to confirm.
       "
     `);
     });
@@ -489,34 +548,34 @@ describe('AutocompletePrompt', async () => {
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       "?  Associate your project with the org Castile Ventures?   Type to search...
 
-      >  first
-         second
-         third
-         fourth
-         fifth
-         sixth
-         seventh
-         eighth
-         ninth
-         tenth
-         eleventh
-         twelfth
-         thirteenth
-         fourteenth
-         fifteenth
-         sixteenth
-         seventeenth
-         eighteenth
-         nineteenth
-         twentieth
-         twenty-first
-         twenty-second
-         twenty-third
-         twenty-fourth
-         twenty-fifth
-
-         1-25 of many  Find what you're looking for by typing its name.
-         Press ↑↓ arrows to select, enter to confirm
+      >  first                                                                        
+         second                                                                       
+         third                                                                        
+         fourth                                                                       
+         fifth                                                                        
+         sixth                                                                        
+         seventh                                                                      
+         eighth                                                                       
+         ninth                                                                        
+         tenth                                                                        
+         eleventh                                                                     
+         twelfth                                                                      
+         thirteenth                                                                   
+         fourteenth                                                                   
+         fifteenth                                                                    
+         sixteenth                                                                    
+         seventeenth                                                                  
+         eighteenth                                                                   
+         nineteenth                                                                   
+         twentieth                                                                    
+         twenty-first                                                                 
+         twenty-second                                                                
+         twenty-third                                                                 
+         twenty-fourth                                                                
+         twenty-fifth                                                                 
+
+         Press ↑↓ arrows to select, enter to confirm.
+         1-50 of many  Find what you're looking for by typing its name.
       "
     `);
     });
@@ -527,11 +586,11 @@ describe('AutocompletePrompt', async () => {
             write: () => { },
         });
         const items = [
-            { label: 'first', value: 'first', group: 'Automations', key: 'f' },
-            { label: 'second', value: 'second', group: 'Automations', key: 's' },
+            { label: 'first', value: 'first', group: 'Automations' },
+            { label: 'second', value: 'second', group: 'Automations' },
             { label: 'third', value: 'third', group: 'Merchant Admin' },
             { label: 'fourth', value: 'fourth', group: 'Merchant Admin' },
-            { label: 'fifth', value: 'fifth', key: 'a' },
+            { label: 'fifth', value: 'fifth' },
             { label: 'sixth', value: 'sixth' },
             { label: 'seventh', value: 'seventh' },
             { label: 'eighth', value: 'eighth' },
@@ -542,15 +601,16 @@ describe('AutocompletePrompt', async () => {
                 data: items,
             }) }));
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?
+      "?  Associate your project with the org Castile Ventures?   Type to search...
 
-         Automations
-      >  first
-         second
+         Automations                                                                 \u001b[46m \u001b[49m
+         >  first                                                                    \u001b[100m \u001b[49m
+            second                                                                   \u001b[100m \u001b[49m
+                                                                                     \u001b[100m \u001b[49m
+         Merchant Admin                                                              \u001b[100m \u001b[49m
 
+         Press ↑↓ arrows to select, enter to confirm.
          1-10 of many  Find what you're looking for by typing its name.
-         Showing 2 of 10 items.
-         Press ↑↓ arrows to select, enter to confirm
       "
     `);
     });