? ? ? ? Pending

User tests: Successful: Unsuccessful:

avatar PhilETaylor
PhilETaylor
23 Apr 2021

Summary of Changes

So I mentioned about the possibility of blank states in Joomla 4 as a comment on someone's PR a long time ago. It received quite a bit of positive feedback but no one has actually attempted it

So here is "an attempt"

The concept is that rather than a new user getting a first time out of the box experience with "no matching results" or a state that is unhelpful, that the user receives a welcome and an introduction to each area.

This PR is a PROOF OF CONCEPT for Articles ONLY - if it received praise then I might do the others, and others can join in too..

The blank state template is ONLY USED when you have no articles in your database. It is NOT used if a search/filter produces no results (in that case, you would correctly get "No Matching Results" message like you currently do.

To be clear

This is not a new concept. Everyone else is already doing it.

More examples of Empty State Design:
https://www.toptal.com/designers/ux/empty-state-ux-design

Testing Instructions

Apply PR on a site with no articles.
Add article - blank state design disappears and you see a list of articles
filter the articles by something (search for kashfdksjhgfkjsdhf) and see that you DONT see the blank slate but you DO get "No Matching Results"
Trash your article - and see that you DONT see the blank slate
Empty your trash (leaving ZERO articles in the db) and see that you DO now see the blank slate

Actual result BEFORE applying this Pull Request

At the moment the out of the box experience (without demo data) is a bunch of left menu items that all lead to blank pages saying "no matching results"

User is "welcomed" to Joomla with a negative messages

Screenshot 2021-04-23 at 14 27 04

Expected result AFTER applying this Pull Request

Empty State Design / Blank state Design pattern is used.

Documentation Changes Required

Screenshots.

Screenshot 2021-04-23 at 15 15 55

avatar PhilETaylor PhilETaylor - open - 23 Apr 2021
avatar PhilETaylor PhilETaylor - change - 23 Apr 2021
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 23 Apr 2021
Category Administration com_content Language & Strings Libraries
avatar PhilETaylor PhilETaylor - change - 23 Apr 2021
The description was changed
avatar PhilETaylor PhilETaylor - edited - 23 Apr 2021
avatar PhilETaylor PhilETaylor - change - 23 Apr 2021
The description was changed
avatar PhilETaylor PhilETaylor - edited - 23 Apr 2021
avatar PhilETaylor PhilETaylor - change - 23 Apr 2021
The description was changed
avatar PhilETaylor PhilETaylor - edited - 23 Apr 2021
avatar PhilETaylor PhilETaylor - change - 23 Apr 2021
The description was changed
avatar PhilETaylor PhilETaylor - edited - 23 Apr 2021
avatar PhilETaylor PhilETaylor - change - 23 Apr 2021
The description was changed
avatar PhilETaylor PhilETaylor - edited - 23 Apr 2021
avatar richard67
richard67 - comment - 23 Apr 2021

@PhilETaylor Please remove any emojis from title and description of PRs. They can confuse our CI tools.

avatar richard67
richard67 - comment - 23 Apr 2021

... and the issue tracker can be confused, too.

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

@PhilETaylor Please remove any emojis from title and description of PRs. They can confuse our CI tools.

/facepalm /voidOfExpression :-)

avatar PhilETaylor PhilETaylor - change - 23 Apr 2021
Title
[4] Introducing Joomla’s first blank state 🎉
[4] Introducing Joomla’s first blank state
avatar PhilETaylor PhilETaylor - edited - 23 Apr 2021
avatar PhilETaylor PhilETaylor - change - 23 Apr 2021
The description was changed
avatar PhilETaylor PhilETaylor - edited - 23 Apr 2021
avatar richard67
richard67 - comment - 23 Apr 2021

Beside the above comment (which is fixed now), I like this PR. Much more user friendly way to show there are no items.

avatar brianteeman
brianteeman - comment - 23 Apr 2021
  1. As a non-coder I didn't understand what you meant by blankstate. Now I understand it to mean "no records yet" ?
  2. Can you add aria-hidden="true" to the icon please
  3. The voice you have used for the message is very informal, which is fine, but everywhere else we use a more formal voice such as "No articles have been created yet,"
avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021
  1. Blank State = Out of the box experience = The Empty State
  2. yup
  3. I fully expected the text to be completely changed by you and others before it was merged. It was copied from Digital Ocean.

Screenshot 2021-04-23 at 14 39 55

Also the "Learn More" button goes to docs.joomla.org - but to an old page... might there be somewhere better...

Also how much help is enough, for example, the above screenshot shows more help than just one button etc...

avatar brianteeman
brianteeman - comment - 23 Apr 2021

Actually I can see now that I test it that the text you propose is not correct as it is displayed when you have created articles they just are trashed.

And if you have trashed all the articles then there is no way to select them to permanently delete or to restore them (unless you create a new article). So I guess the check for "blankstate" is not correct.

avatar PhilETaylor PhilETaylor - change - 23 Apr 2021
Labels Added: ? ?
avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

Actually I can see now that I test it that the text you propose is not correct as it is displayed when you have created articles they just are trashed.

No that should never happen. It was specifically tested for during design.

If you had 1million articles in the trash and zero in the filtered results, then you should never see the blank state.

avatar brianteeman
brianteeman - comment - 23 Apr 2021

Same thing happens if I only have unpublished items. So there is a bug there.

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

No that should never happen. It was specifically tested for during design.

Screen.Recording.2021-04-23.at.02.45.07.pm.mp4
avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

Same thing happens if I only have unpublished items. So there is a bug there.

ok, well one I cannot replicate at the moment - see the video.

avatar brianteeman
brianteeman - comment - 23 Apr 2021

Something weird is going on - trying to replicate it reliably

avatar Bond97
Bond97 - comment - 23 Apr 2021

I think, that it will be better to add this page "looks like..." to other menu items under the same visibility conditions: categories, featured articles, fields, field groups and menus.

@PhilETaylor what do you think about it?

avatar brianteeman
brianteeman - comment - 23 Apr 2021

OK so if you set a filter and the filter returns no results you get the blank state which is clearly not what you intended.

issue

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

I cannot replicate that - I can select any state and never see the blank state - I just see no matching results.

avatar brianteeman
brianteeman - comment - 23 Apr 2021

issue

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

yeah I can replicate that now - when you have a category selected - ok, coffee and then I'll take a look. I was trying to implement the check in the db layer so that it can be generic and reusable.

avatar brianteeman
brianteeman - comment - 23 Apr 2021

Phil I can replicate it in any scenario where there are no matching results and I assume that you only meant this to be displayed when there are no records at all

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

I think, that it will be better to add this page "looks like..." to other menu items under the same visibility conditions: categories, featured articles, fields, field groups and menus.

Read my opening comments.

"This PR is a PROOF OF CONCEPT for Articles ONLY - if it received praise then I might do the others, and others can join in too.."

The "Others" meaning the other left menu items.

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

Phil I can replicate it in any scenario where there are no matching results and I assume that you only meant this to be displayed when there are no records at all

Im looking, but that is certainly not what I get. The ONLY time you should ever see blank state is if the database table is is totally empty (has zero rows in the database as looked up by SELECT count(*) from #__TABLENAME )

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

Coffee fixes everything...

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

pull again now - should be fixed

avatar brianteeman
brianteeman - comment - 23 Apr 2021

Yes that did it. This is a great improvement.

avatar brianteeman
brianteeman - comment - 23 Apr 2021

Happy to work through other components and create PR for those. ITs easy enough now you did the hard work.

avatar Bakual
Bakual - comment - 23 Apr 2021

I would actually use $this->setLayout('blankstate') in the view instead of requiring the blankstate layout in the default layout. This would make the code simpler and you could even get rid of $this->isBlankState.

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

The hard part is the reusable part in libraries/src/MVC/Model/ListModel.php - the hard thing was to try and make it generic and reusable without having to code it for each component

I would actually use $this->setLayout('blankstate')

DAMN... I tried everything to try to work that out.... let me try that... I was setting $tpl...

avatar Bakual
Bakual - comment - 23 Apr 2021

Hehe, I use it in my component, that's why I knew it existed. I remember that I first tried with $tpl as well back then :-)

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

Done. Love it. Thanks.

avatar PhilETaylor PhilETaylor - change - 23 Apr 2021
The description was changed
avatar PhilETaylor PhilETaylor - edited - 23 Apr 2021
avatar brianteeman
brianteeman - comment - 23 Apr 2021

So just the language string and I can mark it as a successful test

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

So just the language string and I can mark it as a successful test

I dont see any outstanding changes Brian, maybe GitHub caching ?

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

Screenshot now updated in initial comment.

avatar brianteeman brianteeman - test_item - 23 Apr 2021 - Tested successfully
avatar brianteeman
brianteeman - comment - 23 Apr 2021

I have tested this item successfully on f28b2f7


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33264.

avatar Kostelano Kostelano - test_item - 23 Apr 2021 - Tested successfully
avatar Kostelano
Kostelano - comment - 23 Apr 2021

I have tested this item successfully on 55d5cde

Fire!


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33264.

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

Ive added the blank state for Featured Articles page too - just as it is still com_content and very quick to add to this PR. Sorry, should not really invalidate your tests, but a quick check might be appreciated.

avatar richard67
richard67 - comment - 23 Apr 2021

@PhilETaylor The system tests are failing constantly at the same place, I have restarted them 2 times already. They fail at "ContentListCest: Test that it loads without php notices and warnings.". Not sure if it's related to your PR, but it could be.

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

I'll take a look, thanks.

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021
$I->wantToTest('that it loads without php notices and warnings.');
		$I->amOnPage(ContentListPage::$url);
		$I->waitForElement(ContentListPage::$filterSearch);
		$I->checkForPhpNoticesOrWarnings();

Ok Im guessing this test is looking for the filterSearch options stuff and obviously those no longer show on a blank state. I'll try to fix the tests, as the tests are now wrong, not the new code.

avatar richard67
richard67 - comment - 23 Apr 2021

... as the tests are now wrong, not the new code.

Exactly that was my assumption.

avatar joomla-cms-bot joomla-cms-bot - change - 23 Apr 2021
Category Administration com_content Language & Strings Libraries Administration com_content Language & Strings Libraries Unit Tests
avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021
OK, but incomplete, skipped, or risky tests!
--
1471 | Tests: 41, Assertions: 214, Skipped: 4.

Tests look fixed.

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

I lied :(

avatar richard67
richard67 - comment - 23 Apr 2021

@PhilETaylor MySQL (<8) and MySQL 8 system test passed. Only the PostgreSQL test was failing at that place with a timeout. Will restart drone to see if it was maybe just the unluck we have sometimes.

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

failed again. No idea. Is there a way to get the screenshot/html that it says it saved when the test failed?

avatar richard67
richard67 - comment - 23 Apr 2021

@PhilETaylor Do you have access to this? https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/33264/system-tests/42315/ ... the link can be found when choosing the "arifacts-system-tests" in the drone results.

avatar richard67
richard67 - comment - 23 Apr 2021

ContentListCest loadsWithoutPhpNoticesAndWarnings postgres fail

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

42803 42803, 7, ERROR: column "a.id" must appear in the GROUP BY clause or be used in an aggregate function LINE 13: ORDER BY a.id desc LIMIT 20 ^

strange... as my query has no limit of 20 :)

I guess Im spending the night learning postgres

avatar richard67
richard67 - comment - 23 Apr 2021

SQL syntax. PostgreSQL is more strict with that, it seems. Do you understand it or shall I help later after my JBS meeting has finished?

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

I have replicated it locally now, now to debug, like I said, my only SQL change has no limit so must be something else...

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

fixed locally :)

avatar PhilETaylor PhilETaylor - change - 23 Apr 2021
Labels Added: ?
avatar richard67
richard67 - comment - 23 Apr 2021

@PhilETaylor I guess that was it. But it's not only PostgreSQL which requires it, MySQL would require it too if sunning in strict mode, Oracle would require it (if we would support that).

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

Screenshot 2021-04-23 at 17 40 20

Be right back, off to put "Postgres expert" on my CV...

avatar Quy Quy - change - 23 Apr 2021
Labels Added: ?
Removed: ?
avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

Thanks @Quy

avatar wilsonge
wilsonge - comment - 23 Apr 2021

I love this :) Lets get some tests and get it in. Thankyou so much!!

avatar TLWebdesign TLWebdesign - test_item - 23 Apr 2021 - Tested successfully
avatar TLWebdesign
TLWebdesign - comment - 23 Apr 2021

I have tested this item successfully on 8d3accc


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33264.

avatar RickR2H RickR2H - test_item - 23 Apr 2021 - Tested successfully
avatar RickR2H
RickR2H - comment - 23 Apr 2021

I have tested this item successfully on 8d3accc

Very nice feature! Thanks!


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33264.
avatar richard67
richard67 - comment - 23 Apr 2021

I've advertised a bit a JoomlaDay USA, so we did not have to wait very long for testers ?

avatar richard67 richard67 - change - 23 Apr 2021
Status Pending Ready to Commit
avatar richard67
richard67 - comment - 23 Apr 2021

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33264.

avatar PhilETaylor
PhilETaylor - comment - 23 Apr 2021

I've advertised a bit a JoomlaDay USA

And to think, I turned down a personal invitation to be their major sponsor this year... haha.

avatar rdeutz rdeutz - change - 24 Apr 2021
Status Ready to Commit Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2021-04-24 08:18:47
Closed_By rdeutz
Labels Added: ? ?
Removed: ?
avatar rdeutz rdeutz - close - 24 Apr 2021
avatar rdeutz rdeutz - merge - 24 Apr 2021

Add a Comment

Login with GitHub to post a comment