Introduce KTextTruncator component for text truncation

[MisRob]

🌱 Are you new to the codebase? Welcome and please see the contributing guidelines.

Expected behavior

Whenever relevant, Studio should use KTextTruncator component from the Kolibri Design System (KDS) to achieve text truncation.

One example is text truncation in the ClipboardChip.vue but there will likely be more places.

Current Behavior

Studio currently uses its own implementation for text truncation.

Impact

This is part of migrating Studio to KDS. KTextTruncator provides a robust and well-tested solution for text truncation and will eliminate the need to re-implement truncation.

Trade-Offs

Not aware of any.

Guidance

• To locate the truncation that needs to be replaced, search for any CSS properties and values related to truncating, such as ellipsis.
• For more information on using KTextTruncator, refer to its documentation. If working with the design system for the first time, study how other K components are used in Studio.
• Note that depending on the context (e.g. current usage of the Vuetify library), in some places it may make more sense to not use KTextTruncator. If that's the case, please mention reasons for not using it in your pull request.

Acceptance Criteria

• [ ] The codebase has been thoroughly searched for all occurrences of truncation.
• [ ] The custom implementation of truncation has been replaced with KTextTruncator wherever relevant.
• [ ] The places where KTextTruncator has been introduced have been visually reviewed and do not have any regressions.
• [ ] A list of places where KTextTruncator is better not to be used has been provided in the pull request.

[lokesh-sagi125]

hey @MisRob can you assign this to me?

[AlexVelezLl]

Hey @lokesh-sagi125! Thanks for your interest in contributing to this issue 👐. I just assigned it to you. Please let us know if you have any questions (:.

[MisRob]

Hi @lokesh-sagi125, are you working on this or planning to? Just to know if we should keep the assignment or not.

[sr376]

Hi @MisRob can you assign this issue to me.

[lokesh-sagi125]

hey @MisRob sorry for the inactivity , i just raised the PR's for the issues in KDS and Kolibri, i am willing to work on this issue now

[MisRob]

Hi @sr376 and @lokesh-sagi125. I will assign this back to @lokesh-sagi125.

@sr376 Welcome and thank you for volunteering! There are other contributing opportunities in three repositories. See the contributing guidelines including links to issues suitable for contribution for each repository here:

• Kolibri Contributing Guidelines
• Kolibri Design System Contributing Guidelines
• Studio Contributing Guidelines

You can also see the list of unassigned "help wanted" or "good first issue" issues across all repositories.

[lokesh-sagi125]

hey @MisRob how can i test the changes i made to the frontend in studio , can you link the documentation page if there is one, cant seem to find it  😅 .

[AlexVelezLl]

Hi @lokesh-sagi125! Here you can find more information about how to test these KDS updates in Studio: https://github.com/learningequality/kolibri-design-system/blob/develop/dev_docs/03_how_to_update_library.md#2-preview-updates-in-a-product. Let me know any question :)

[lokesh-sagi125]

hey @AlexVelezLl i have been getting this error since i ran git reset--hard i was able to run the yarn run services and yarn run devsetup commands before but now i am able to run only yarn devserver how can i fix this issue?

[AlexVelezLl]

Hey @lokesh-sagi125! Can you confirm that you are indeed in the Studio folder? I see a kolibri there.

[lokesh-sagi125]

sorry that was the wrong ss

[AlexVelezLl]

Could you try running yarn install again @lokesh-sagi125?

[lokesh-sagi125]

hey @AlexVelezLl i was able to fix the issue i was facing , i was using yarn@4 which was having problems downloading the aphrodite repo , i switched to yarn@1 and the issue was fixed. thank you:)

[lokesh-sagi125]

Hi @MisRob, I am currently giving my end-semester tests, so is it fine if I raise a PR by the end of this month? Please reassign if this issue needs to be resolved before then. Thank you:)

[MisRob]

Hi @lokesh-sagi125, first wishing you all the best for the tests :)!

Thanks a lot for letting us know. It's absolutely fine you returned to this issue later. It's not time sensitive, so happy to have it wait for you as it sounds you're interested.

[lokesh-sagi125]

Thank you @MisRob. I will get back to the issue as soon as my tests end, same with the issue in Kolibri :)