Set current master template in template tree

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

Description

Recently the template picker has changed to use a tree picker by @patrickdemooij9 in #11363

I think it would be great to show the selected template, when opening the template picker.

p1deW89CMJ.mp4

Furthermore it seems we currently can't use javascript optional chaining operator without the gulp task is failing.

We could install @babel/plugin-proposal-optional-chaining plugin https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining but this is included in a newer version of @babel/preset-env, which also includes @babel/plugin-proposal-object-rest-spread https://babeljs.io/docs/en/babel-plugin-proposal-object-rest-spread

Optional chaining has been included in @babel/preset-env since v7.8.0: babel/babel#10809

[umbrabot]

Hi there @bjarnef, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[patrickdemooij9]

Great improvement! Totally forgot to set the selected item

[bjarnef]

It would be great if we could expand the tree in case the selected template is not at root. However there could be multiple root levels in tree, so it would probably expand based on path.

I had a look at the source of the tree, but didn't find something specific to expand tree from code. @patrickdemooij9 maybe you know anything we could use here?

[bjarnef]

Okay, I found a way to do this using treeService.syncTree() ... we can't use navigationService.syncTree() as it would sync the main tree and cause weird behavior in background template tree 😅

vPxsQXtZBe.mp4

[bjarnef]

With the latest changed it looks like this:

ZiFBRVTvSf.mp4

However it seems treeService.syncTree() reset the tree node to the initial states for selected and cssClasses which contain to not-allowed class, so a template can't select itself as master.

[patrickdemooij9]

@bjarnef, do you think we should make this a generic functionality of the treepicker? Then we could also get this working on other places. I'll see if I can also take a look at it later.

[bjarnef]

@patrickdemooij9 yes, it might make sense to have. I tried with treeService.syncTree(), but it doesn't quite works or I need update the node properties after sync.

It seems we need to pass in a node argument, which I think needs to be parent node (at least I got some errors if using item variable).

Feel free to commit to this PR or open a separate PR..

I think the Babel stuff is also great as we can use javascript optional chaining operator. In @babel/preset-env v7.8.0+ we don't need to install @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-object-rest-spread separately as these are included in @babel/preset-env.

[patrickdemooij9]

@bjarnef,
I was finally able to take a quick look at this. There is a way to do this within the tree picker:

If you pass a currentNode param with a path, it'll use that to load the tree. The only thing is that the styling is a bit different than expected.

const currentTemplate = vm.templates.find(template => template.alias == vm.template.masterTemplateAlias);

            localizationService.localize("template_mastertemplate").then(title => {
                const editor = {
                    title,
                    filterCssClass: 'not-allowed',
                    filter: item => !availableMasterTemplates.some(template => template.id == item.id),                    
                    submit: model => {
                        var template = model.selection[0];
                        if (template && template.alias) {
                            vm.template.masterTemplateAlias = template.alias;
                            setLayout(template.alias + ".cshtml");
                        } else {
                            vm.template.masterTemplateAlias = null;
                            setLayout(null);
                        }
                        editorService.close();
                    },
                    close: () => editorService.close()
                }
                if (currentTemplate) {
                    editor.currentNode = {
                        path: currentTemplate.path
                    };
                }

                editorService.templatePicker(editor);
            });

[bjarnef]

@patrickdemooij9 thanks for looking into this. Much better 😁
I have also update the styling of the tree icons, which only was handling the legacy font icons, but not the newer SVG icons.

KqI6rlCRMQ.mp4

[umbrabot]

Hi there @bjarnef!

Thanks for the contribution here and apologies if it has been a while since you heard from us. We have been in the very fortunate position of having lots of work to do. With this in mind, we are writing to let you know that with the release of the Long Term Support (LTS) version, 8.18, we have now moved into the support phase of Umbraco 8. You can read all about that here but to surmise, we will be keeping Umbraco 8 safe and well by releasing patching for security or regression issues if they arise but no longer will we do that for bug fixes. The same is still true for features, although we stopped merging those some time ago.

We'd love for you to keep contributing and while we are not able to merge this to Umbraco 8, if this is still something you'd like to see in Umbraco 9, please take a look and either create an issue to say so or find an issue that already exists. We'll be happy to give you some input around how you can adjust your pull request to target Umbraco 9. Even better, it might be something that Umbraco 9 already does or has. In which case, enjoy!

Once again, a huge thank you for the time you have spent working with us.

#H5YR
Your friendly Umbraco GitHub bot 🤖 🙂

[bjarnef]

@nul800sebastiaan I guess these changes are too late for v8 unless we want the changed in a patch update?

The Babel changes isn't strictly necessary, but the newer version includes the @babel/plugin-proposal-object-rest-spread plugin and @babel/plugin-proposal-optional-chaining allow us to use javascript optional chaining operator without the gulp task is failing.

[nul800sebastiaan]

@bjarnef We'd be happy to look at a PR for v9, v8 will now only get "critical" updates as described in the linked articles.