Add automatic alphabetic sort option to topic tree

[GarvitSinghal47]

Fixes #1830

Summary

Description of the change(s) you made

This pull request introduces a new feature - an automatic alphabetic sort option for the topic tree. When the designated button is clicked, the selected nodes will be reordered based on their alphabetic order. To achieve this, the Vuex action moveContentNodes is utilized for processing the reordering.

Manual verification steps performed

1. Step 1
2. Step 2
3. ...

Screenshots (if applicable)

Untitled.-.Imported.Channel.-.Kolibri.Studio.mp4

Does this introduce any tech-debt items?

---

Reviewer guidance

How can a reviewer test these changes?

Are there any risky areas that deserve extra testing?

References

Comments

---

Contributor's Checklist

PR process:

• If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
• If this includes an internal dependency change, a link to the diff is provided
• The docs label has been added if this introduces a change that needs to be updated in the user docs?
• If any Python requirements have changed, the updated requirements.txt files also included in this PR
• Opportunities for using Google Analytics here are noted
• Migrations are safe for a large db

Studio-specifc:

• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
• All UI components are LTR and RTL compliant
• Views are organized into pages, components, and layouts directories as described in the docs
• Users' storage used is recalculated properly on any changes to main tree files
• If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• Code is clean and well-commented
• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Any new interactions have been added to the QA Sheet
• Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[GarvitSinghal47]

@bjester Quick question . How should I handle translations in different languages for this new feature, with the inclusion of the associated icon?

[bjester]

Nice work so far. Mostly on the right track, but I left some details comments on things that need addressed.

[bjester]

@bjester Quick question . How should I handle translations in different languages for this new feature, with the inclusion of the associated icon?

The process of translating strings is taken care of in bulk when we proceed with a new release of Studio. I added a comment regarding where you can add a new string for the linting error observed

[GarvitSinghal47]

@bjester, I've implemented all the recommended changes. I just need clarification regarding the icon. In the case of Icon tag for using an SVG, there is a Vue component-based system and cutom icon addition, but for the IconButton, I haven't found a similar approach. Could you provide guidance on how to add an SVG to the IconButton, or should I consider an alternative method for this?

[bjester]

@bjester, I've implemented all the recommended changes. I just need clarification regarding the icon. In the case of Icon tag for using an SVG, there is a Vue component-based system and cutom icon addition, but for the IconButton, I haven't found a similar approach. Could you provide guidance on how to add an SVG to the IconButton, or should I consider an alternative method for this?

@GarvitSinghal47 To make it easy, lets just use this icon, alternativeRoute, which should exist (link). We'll use that as a temporary placeholder. I will create an issue for replacing it with the proper icon, after we add it to our KDS project. Sound okay? I just don't want you to go through extra effort when the icon actually becomes available to use with the existing IconButton component.

[bjester]

@GarvitSinghal47 Just wanted to say thank you for implementing this. I'll be reviewing it soon.

[bjester]

Awesome work @GarvitSinghal47! I merged our unstable branch in and updated the buttons to use KIconButton so now it has the proper icon. Thank you