Replace hardcoded strings with customizable attributes in multiple components (#893)

* Update shell.handlebars

adding two options:
search_button
search_placeholder

* Update table.handlebars

adding search_placeholder option

* Update 01_documentation.sql

documentation update for the shell component options:
search_placeholder
search_button
and for the table component option: search_placeholder

* avoid failing tests on long loading map tiles

* add an example for search_placeholder

---------

Co-authored-by: lovasoa <[email protected]>

Author: amrutadotorg

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -770,6 +770,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('sort', 'Make the columns clickable to let the user sort by the value contained in the column.', 'BOOLEAN', TRUE, TRUE),
     ('search', 'Add a search bar at the top of the table, letting users easily filter table rows by value.', 'BOOLEAN', TRUE, TRUE),
     ('initial_search_value', 'Pre-fills the search bar used to filter the table. The user will still be able to edit the value to display table rows that will initially be filtered out.', 'TEXT', TRUE, TRUE),
+    ('search_placeholder', 'Customizes the placeholder text shown in the search input field. Replaces the default "Search..." with text that better describes what users should search for.', 'TEXT', TRUE, TRUE),
     ('markdown', 'Set this to the name of a column whose content should be interpreted as markdown . Used to display rich text with links in the table. This argument can be repeated multiple times to intepret multiple columns as markdown.', 'TEXT', TRUE, TRUE),
     ('icon', 'Set this to the name of a column whose content should be interpreted as a tabler icon name. Used to display icons in the table. This argument can be repeated multiple times to intepret multiple columns as icons. Introduced in v0.8.0.', 'TEXT', TRUE, TRUE),
     ('align_right', 'Name of a column the contents of which should be right-aligned. This argument can be repeated multiple times to align multiple columns to the right. Introduced in v0.15.0.', 'TEXT', TRUE, TRUE),
@@ -801,9 +802,11 @@ INSERT INTO example(component, description, properties) VALUES
     ('table', 'The most basic table.',
         json('[{"component":"table"}, {"a": 1, "b": 2}, {"a": 3, "b": 4}]')),
     ('table', 'A table of users with filtering and sorting.',
-        json('[{"component":"table", "sort":true, "search":true}, '||
-        '{"First Name": "Ophir", "Last Name": "Lojkine", "Pseudonym": "lovasoa"},' ||
-        '{"First Name": "Linus", "Last Name": "Torvalds", "Pseudonym": "torvalds"}]')),
+        json('[
+        {"component":"table", "sort":true, "search":true, "search_placeholder": "Filter by name"},
+        {"First Name": "Ophir", "Last Name": "Lojkine", "Pseudonym": "lovasoa"},
+        {"First Name": "Linus", "Last Name": "Torvalds", "Pseudonym": "torvalds"}
+    ]')),
     ('table', 'A table that uses markdown to display links',
         json('[{"component":"table", "markdown": "Name", "icon": "icon", "search": true}, '||
         '{"icon": "table", "name": "[Table](?component=table)", "description": "Displays SQL results as a searchable table.", "_sqlpage_color": "red"},
@@ -835,8 +838,12 @@ Numbers can be displayed
     'table',
     'A table with some presentation options',
     json(
-        '[{"component":"table", "hover": true, "striped_rows": true, "description": "Some Star Trek Starfleet starships", "small": true, "initial_search_value": "NCC-" },'||
-        '{"name": "USS Enterprise", "registry": "NCC-1701-C", "class":"Ambassador"},
+        '[{"component":"table",
+                "hover": true, "striped_rows": true,
+                "description": "Some Star Trek Starfleet starships",
+                "small": true, "initial_search_value": "NCC-"
+        },
+         {"name": "USS Enterprise", "registry": "NCC-1701-C", "class":"Ambassador"},
          {"name": "USS Archer", "registry": "NCC-44278", "class":"Archer"},
          {"name": "USS Endeavour", "registry": "NCC-06", "class":"Columbia"},
          {"name": "USS Constellation", "registry": "NCC-1974", "class":"Constellation"},
@@ -1174,6 +1181,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('fixed_top_menu', 'Fixes the top bar with menu at the top (the top bar remains visible when scrolling long pages).', 'BOOLEAN', TRUE, TRUE),
     ('search_target', 'When this is set, a search field will appear in the top navigation bar, and load the specified sql file with an URL parameter named "search" when the user searches something.', 'TEXT', TRUE, TRUE),
     ('search_value', 'This value will be placed in the search field when "search_target" is set. Using the "$search" query parameter value will mirror the value that the user has searched for.', 'TEXT', TRUE, TRUE),
+    ('search_placeholder', 'Customizes the placeholder text shown in the search input field. Replaces the default "Search" with text that better describes what users should search for.', 'TEXT', TRUE, TRUE),
+    ('search_button', 'Customizes the text displayed on the search button. Replaces the default "Search" label with custom text that may better match your applications terminology or language.', 'TEXT', TRUE, TRUE),
     ('norobot', 'Forbids robots to save this page in their database and follow the links on this page. This will prevent this page to appear in Google search results for any query, for instance.', 'BOOLEAN', TRUE, TRUE),
     ('font', 'Specifies the font to be used for displaying text, which can be a valid font name from fonts.google.com or the path to a local WOFF2 font file starting with a slash (e.g., "/fonts/MyLocalFont.woff2").', 'TEXT', TRUE, TRUE),
     ('font_size', 'Font size on the page, in pixels. Set to 18 by default.', 'INTEGER', TRUE, TRUE),

sqlpage/templates/shell.handlebars

@@ -155,8 +155,8 @@
     </ul>
     {{#if search_target}}
         <form class="d-flex" role="search" action="{{search_target}}">
-            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" name="search" value="{{search_value}}">
-            <button class="btn btn-outline-success" type="submit">Search</button>
+            <input class="form-control me-2" type="search" placeholder="{{default search_placeholder 'Search'}}" aria-label="Search" name="search" value="{{search_value}}">
+            <button class="btn btn-outline-success" type="submit">{{default search_button 'Search'}}</button>
         </form>
     {{/if}}
 {{/inline}}

sqlpage/templates/table.handlebars

@@ -5,7 +5,7 @@
             <input
                 type="search"
                 class="form-control form-control-rounded fs-6 search"
-                placeholder="Search…"
+                placeholder="{{default search_placeholder 'Search…'}}"
                 value="{{initial_search_value}}"
                 {{#if initial_search_value}}autocomplete="off"{{/if}}
             >

tests/end-to-end/official-site.spec.ts

@@ -137,7 +137,7 @@ async function checkNoConsoleErrors(page: Page, component: string) {
   });
 
   await page.goto(`${BASE}/documentation.sql?component=${component}`);
-  await page.waitForLoadState("networkidle");
+  await page.waitForLoadState();
 
   expect(errors).toHaveLength(0);
 }