From e940ae2a27a3faca9be4f14cceead2b48efeebb0 Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Mon, 21 Apr 2025 22:35:55 +0200 Subject: [PATCH 1/6] empty_state component added --- .../sqlpage/migrations/60_empty_state.sql | 28 +++++++++++++++++++ .../sqlpage/templates/empty_state.handlebars | 25 +++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 examples/official-site/sqlpage/migrations/60_empty_state.sql create mode 100644 examples/official-site/sqlpage/templates/empty_state.handlebars diff --git a/examples/official-site/sqlpage/migrations/60_empty_state.sql b/examples/official-site/sqlpage/migrations/60_empty_state.sql new file mode 100644 index 00000000..18c5c540 --- /dev/null +++ b/examples/official-site/sqlpage/migrations/60_empty_state.sql @@ -0,0 +1,28 @@ +INSERT INTO component(name, icon, description, introduced_in_version) VALUES + ('empty_state', 'info-circle', 'Empty states are placeholders for first-use, empty data, or error screens', '0.35.0'); + +INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'empty_state', * FROM (VALUES + ('title','Description of the empty state.','TEXT',TRUE,FALSE), + ('status_code','HTTP status code displayed on the top of the empty state.','INTEGER',TRUE,TRUE), + ('icon','Name of an icon to be displayed on the top of the empty state.','ICON',TRUE,TRUE), + ('image','The URL (absolute or relative) of an image to display at the top of the empty state.','URL',TRUE,TRUE), + ('information','A short text displayed below the title.','TEXT',TRUE,FALSE), + ('btn_title','The text displayed on the button.','TEXT',TRUE,FALSE), + ('btn_icon','Name of an icon to be displayed on the left side of the button.','ICON',TRUE,FALSE), + ('link','The URL to which the button should navigate when clicked.','URL',TRUE,FALSE) +) x; + +INSERT INTO example(component, description, properties) VALUES + ('empty_state', ' +The empty_state component provides users with informative and visually appealing placeholders when there is no content to display in a particular section of an application or website. Its role is to enhance user experience by guiding users on what to do next, offering suggestions, or providing context about the absence of data. This component includes a title, a description, an action button and often an illustration or icon. The empty_state component helps to reduce confusion and encourages users to take action. +', + json('[{ + "component": "empty_state", + "title": "No results found", + "status_code": 404, + "information": "Try adjusting your search or filter to find what you''re looking for.", + "btn_title": "Search again", + "btn_icon": "search", + "link": "#" + }]')); + diff --git a/examples/official-site/sqlpage/templates/empty_state.handlebars b/examples/official-site/sqlpage/templates/empty_state.handlebars new file mode 100644 index 00000000..a36a5e76 --- /dev/null +++ b/examples/official-site/sqlpage/templates/empty_state.handlebars @@ -0,0 +1,25 @@ +
+ {{#if status_code}} +
{{status_code}}
+ {{else}} + {{#if icon}} +
+ {{icon_img icon }} +
+ {{else}} + {{#if image}} +
{{image}}
+ {{/if}} + {{/if}} + {{/if}} +

No results found

+

+ {{information}} +

+
+ + {{icon_img btn_icon}} + {{btn_title}} + +
+
From 0a6a3d7a888e286580e1e02ff25712bd63e1ccb8 Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Tue, 22 Apr 2025 22:25:22 +0200 Subject: [PATCH 2/6] empty_state component added --- sqlpage/templates/empty_state.handlebars | 25 ++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 sqlpage/templates/empty_state.handlebars diff --git a/sqlpage/templates/empty_state.handlebars b/sqlpage/templates/empty_state.handlebars new file mode 100644 index 00000000..a36a5e76 --- /dev/null +++ b/sqlpage/templates/empty_state.handlebars @@ -0,0 +1,25 @@ +
+ {{#if status_code}} +
{{status_code}}
+ {{else}} + {{#if icon}} +
+ {{icon_img icon }} +
+ {{else}} + {{#if image}} +
{{image}}
+ {{/if}} + {{/if}} + {{/if}} +

No results found

+

+ {{information}} +

+
+ + {{icon_img btn_icon}} + {{btn_title}} + +
+
From 689c614c0728520d717b5e31dd3925750867facb Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Wed, 23 Apr 2025 18:44:46 +0200 Subject: [PATCH 3/6] Correction and new example --- .../sqlpage/migrations/60_empty_state.sql | 24 +++++++++++++----- .../sqlpage/templates/empty_state.handlebars | 25 ------------------- sqlpage/templates/empty_state.handlebars | 8 +++--- 3 files changed, 22 insertions(+), 35 deletions(-) delete mode 100644 examples/official-site/sqlpage/templates/empty_state.handlebars diff --git a/examples/official-site/sqlpage/migrations/60_empty_state.sql b/examples/official-site/sqlpage/migrations/60_empty_state.sql index 18c5c540..c782bb15 100644 --- a/examples/official-site/sqlpage/migrations/60_empty_state.sql +++ b/examples/official-site/sqlpage/migrations/60_empty_state.sql @@ -6,9 +6,9 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S ('status_code','HTTP status code displayed on the top of the empty state.','INTEGER',TRUE,TRUE), ('icon','Name of an icon to be displayed on the top of the empty state.','ICON',TRUE,TRUE), ('image','The URL (absolute or relative) of an image to display at the top of the empty state.','URL',TRUE,TRUE), - ('information','A short text displayed below the title.','TEXT',TRUE,FALSE), - ('btn_title','The text displayed on the button.','TEXT',TRUE,FALSE), - ('btn_icon','Name of an icon to be displayed on the left side of the button.','ICON',TRUE,FALSE), + ('description','A short text displayed below the title.','TEXT',TRUE,TRUE), + ('link_text','The text displayed on the button.','TEXT',TRUE,FALSE), + ('link_icon','Name of an icon to be displayed on the left side of the button.','ICON',TRUE,FALSE), ('link','The URL to which the button should navigate when clicked.','URL',TRUE,FALSE) ) x; @@ -20,9 +20,21 @@ The empty_state component provides users with informative and visually appealing "component": "empty_state", "title": "No results found", "status_code": 404, - "information": "Try adjusting your search or filter to find what you''re looking for.", - "btn_title": "Search again", - "btn_icon": "search", + "description": "Try adjusting your search or filter to find what you''re looking for.", + "link_text": "Search again", + "link_icon": "search", + "link": "#" + }]')), + ('empty_state', ' +It''s possible to use an icon or an image to illustrate the problem. +', + json('[{ + "component": "empty_state", + "title": "A critical problem has occurred", + "icon": "mood-wrrr", + "description": "Thank you for restarting your browser and crossing your fingers.", + "link_text": "Close and restart", + "link_icon": "rotate-clockwise", "link": "#" }]')); diff --git a/examples/official-site/sqlpage/templates/empty_state.handlebars b/examples/official-site/sqlpage/templates/empty_state.handlebars deleted file mode 100644 index a36a5e76..00000000 --- a/examples/official-site/sqlpage/templates/empty_state.handlebars +++ /dev/null @@ -1,25 +0,0 @@ -
- {{#if status_code}} -
{{status_code}}
- {{else}} - {{#if icon}} -
- {{icon_img icon }} -
- {{else}} - {{#if image}} -
{{image}}
- {{/if}} - {{/if}} - {{/if}} -

No results found

-

- {{information}} -

-
- - {{icon_img btn_icon}} - {{btn_title}} - -
-
diff --git a/sqlpage/templates/empty_state.handlebars b/sqlpage/templates/empty_state.handlebars index a36a5e76..7e39c9ff 100644 --- a/sqlpage/templates/empty_state.handlebars +++ b/sqlpage/templates/empty_state.handlebars @@ -12,14 +12,14 @@ {{/if}} {{/if}} {{/if}} -

No results found

+

{{title}}

- {{information}} + {{description}}

- {{icon_img btn_icon}} - {{btn_title}} + {{icon_img link_icon}} + {{link_text}}
From 8c8865dd3b259c74bed27ae4fd478395c1c5b9c3 Mon Sep 17 00:00:00 2001 From: lovasoa Date: Thu, 24 Apr 2025 12:01:14 +0200 Subject: [PATCH 4/6] rename status_code to header --- examples/official-site/sqlpage/migrations/60_empty_state.sql | 4 ++-- sqlpage/templates/empty_state.handlebars | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/official-site/sqlpage/migrations/60_empty_state.sql b/examples/official-site/sqlpage/migrations/60_empty_state.sql index c782bb15..c772b094 100644 --- a/examples/official-site/sqlpage/migrations/60_empty_state.sql +++ b/examples/official-site/sqlpage/migrations/60_empty_state.sql @@ -3,7 +3,7 @@ INSERT INTO component(name, icon, description, introduced_in_version) VALUES INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'empty_state', * FROM (VALUES ('title','Description of the empty state.','TEXT',TRUE,FALSE), - ('status_code','HTTP status code displayed on the top of the empty state.','INTEGER',TRUE,TRUE), + ('header','Text displayed on the top of the empty state.','TEXT',TRUE,TRUE), ('icon','Name of an icon to be displayed on the top of the empty state.','ICON',TRUE,TRUE), ('image','The URL (absolute or relative) of an image to display at the top of the empty state.','URL',TRUE,TRUE), ('description','A short text displayed below the title.','TEXT',TRUE,TRUE), @@ -19,7 +19,7 @@ The empty_state component provides users with informative and visually appealing json('[{ "component": "empty_state", "title": "No results found", - "status_code": 404, + "header": "404", "description": "Try adjusting your search or filter to find what you''re looking for.", "link_text": "Search again", "link_icon": "search", diff --git a/sqlpage/templates/empty_state.handlebars b/sqlpage/templates/empty_state.handlebars index 7e39c9ff..31feab0e 100644 --- a/sqlpage/templates/empty_state.handlebars +++ b/sqlpage/templates/empty_state.handlebars @@ -1,6 +1,6 @@
- {{#if status_code}} -
{{status_code}}
+ {{#if header}} +
{{header}}
{{else}} {{#if icon}}
From 50d714fce1798f7c47045be27408b57b965690b1 Mon Sep 17 00:00:00 2001 From: lovasoa Date: Thu, 24 Apr 2025 12:19:15 +0200 Subject: [PATCH 5/6] Enhance empty_state component documentation and template to support rich text formatting. Update docs with detailed descriptions and examples, and modify Handlebars template to conditionally render Markdown content. --- .../sqlpage/migrations/60_empty_state.sql | 15 ++++++++++++--- sqlpage/templates/empty_state.handlebars | 10 +++++++--- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/examples/official-site/sqlpage/migrations/60_empty_state.sql b/examples/official-site/sqlpage/migrations/60_empty_state.sql index c772b094..a345a04b 100644 --- a/examples/official-site/sqlpage/migrations/60_empty_state.sql +++ b/examples/official-site/sqlpage/migrations/60_empty_state.sql @@ -1,5 +1,9 @@ INSERT INTO component(name, icon, description, introduced_in_version) VALUES - ('empty_state', 'info-circle', 'Empty states are placeholders for first-use, empty data, or error screens', '0.35.0'); + ('empty_state', 'info-circle', 'Displays a large placeholder message to communicate a single information to the user and invite them to take action. + +Typically includes a title, an optional icon/image, descriptive text (rich text formatting and images supported via Markdown), and a call-to-action button. + +Ideal for first-use screens, empty data sets, "no results" pages, or error messages.', '0.35.0'); INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'empty_state', * FROM (VALUES ('title','Description of the empty state.','TEXT',TRUE,FALSE), @@ -14,7 +18,10 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S INSERT INTO example(component, description, properties) VALUES ('empty_state', ' -The empty_state component provides users with informative and visually appealing placeholders when there is no content to display in a particular section of an application or website. Its role is to enhance user experience by guiding users on what to do next, offering suggestions, or providing context about the absence of data. This component includes a title, a description, an action button and often an illustration or icon. The empty_state component helps to reduce confusion and encourages users to take action. +This example shows how to create a 404-style "Not Found" empty state with + - a prominent header displaying "404", + - a helpful description suggesting to adjust search parameters, and + - a "Search again" button with a search icon that links back to the search page. ', json('[{ "component": "empty_state", @@ -32,7 +39,9 @@ It''s possible to use an icon or an image to illustrate the problem. "component": "empty_state", "title": "A critical problem has occurred", "icon": "mood-wrrr", - "description": "Thank you for restarting your browser and crossing your fingers.", + "description_md": "SQLPage can do a lot of things, but this is not one of them. + +Please restart your browser and **cross your fingers**.", "link_text": "Close and restart", "link_icon": "rotate-clockwise", "link": "#" diff --git a/sqlpage/templates/empty_state.handlebars b/sqlpage/templates/empty_state.handlebars index 31feab0e..e96d8fe2 100644 --- a/sqlpage/templates/empty_state.handlebars +++ b/sqlpage/templates/empty_state.handlebars @@ -13,9 +13,13 @@ {{/if}} {{/if}}

{{title}}

-

- {{description}} -

+
+ {{~#if description}}

{{description}}

{{/if~}} + {{~#if description_md~}} + {{{markdown description_md}}} + {{~/if~}} +
+
{{icon_img link_icon}} From 2e1c4dc5ce9610bb5c7c8ff895b619bebad2e59e Mon Sep 17 00:00:00 2001 From: lovasoa Date: Thu, 24 Apr 2025 12:23:49 +0200 Subject: [PATCH 6/6] add and document class and id attributes --- .../official-site/sqlpage/migrations/60_empty_state.sql | 7 +++++-- sqlpage/templates/empty_state.handlebars | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/examples/official-site/sqlpage/migrations/60_empty_state.sql b/examples/official-site/sqlpage/migrations/60_empty_state.sql index a345a04b..4d897d4d 100644 --- a/examples/official-site/sqlpage/migrations/60_empty_state.sql +++ b/examples/official-site/sqlpage/migrations/60_empty_state.sql @@ -13,7 +13,9 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S ('description','A short text displayed below the title.','TEXT',TRUE,TRUE), ('link_text','The text displayed on the button.','TEXT',TRUE,FALSE), ('link_icon','Name of an icon to be displayed on the left side of the button.','ICON',TRUE,FALSE), - ('link','The URL to which the button should navigate when clicked.','URL',TRUE,FALSE) + ('link','The URL to which the button should navigate when clicked.','URL',TRUE,FALSE), + ('class','Class attribute added to the container in HTML. It can be used to apply custom styling to this item through css.','TEXT',TRUE,TRUE), + ('id','ID attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).','TEXT',TRUE,TRUE) ) x; INSERT INTO example(component, description, properties) VALUES @@ -30,7 +32,8 @@ This example shows how to create a 404-style "Not Found" empty state with "description": "Try adjusting your search or filter to find what you''re looking for.", "link_text": "Search again", "link_icon": "search", - "link": "#" + "link": "#not-found", + "id": "not-found" }]')), ('empty_state', ' It''s possible to use an icon or an image to illustrate the problem. diff --git a/sqlpage/templates/empty_state.handlebars b/sqlpage/templates/empty_state.handlebars index e96d8fe2..13b1a16a 100644 --- a/sqlpage/templates/empty_state.handlebars +++ b/sqlpage/templates/empty_state.handlebars @@ -1,4 +1,4 @@ -
+
{{#if header}}
{{header}}
{{else}}