Is it possible to 'extend' Coffeescript and Jade components of taiga-front

I’m self-hosting Taiga, but am a backend (Python) dev more than a frontend one, and this is my first experience with an Angular app and coffeescript.

I am increasingly being asked by my customer to modify the ‘look’ of Taiga beyond merely CSS colors/font sizes etc.

In other apps I am used to writing modular javascript extensions that would modify elements once the DOM is loaded, but I am having trouble doing that in Taiga, I think because of the way Angular controls the DOM.

I want to avoid having to fork Taiga as I am all too familiar with the burden of having to then maintain that fork by applying custom patches etc as new Taiga releases come out.

What I want to know is, does the taiga-front repo allow for easy ‘extending’ or ‘overriding’ of its core elements, if I was to add custom coffeescript/js ‘plugin’ components to my front app. (as I already have done with things like the oidc plugin which I understand modifies/extends the ‘Login’ UI).

Examples of what I would like to achieve:

  1. Moving the ‘search’ input field in the left sidebar of a project, to be at the top of the sidebar rather than near the bottom

  2. Modifying the ‘Create Project’ buttons so that ‘Private’ is default instead of ‘Public’.

I already can see in the code where this occurs - what I don’t know how to do is override that (if even possible, without directly modifying the source).

Is it possible? Can you give me a boiler-plate example of how to do it in coffeescript/jade? I am fine with then ‘packaging it up’ as a plugin for dropping in to my taiga-front container. I just don’t know if it’s even possible to code an ‘extension’ in this way.

Thanks!

Hi Mig!

Currently taiga-front has an internal plugin system that we use to include optional functionalities that are out of the scope of what the core Taiga offers (maybe for business criteria, opinionated changes, etc…).

An example of this is the gitlab authentication “contrib” (GitHub - taigaio/taiga-contrib-gitlab-auth), which may serve as inspiration, although the development department tells me that the taiga-front instance has to be aware of the existence of these plugins for them to work, so you may have to add some lines of code for it to work properly (depends on the nature of the plugin itself).

Best!

Hi Charlie,

Thanks for the reply. Yes, I knew about the Gitlab plugin (and in fact am using the similar OIDC generic plugin). And yep, I know how to ‘register’ the plugin with the frontend’s conf.json

The OIDC plugins are a good example of modifying the login page by adding a button to the form. And I even made the Google Chat plugin (based on Slack) which also modifies the frontend to be able to list the options in the project plugin settings. It works great.

I guess what I am asking is, how would I go about modifying other aspects of the app (not just the login form), such as the ‘search bar’ position on the project pages. I am too new to Angular and I don’t understand what my coffee script would need to look like, what ‘modules’ it would need to invoke etc.

How do I work out what ‘core’ code I need to ‘extend’?

I realise my query is a bit vague. I wonder if someone on the dev team could give me a loose example, obviously I don’t expect anyone to hold my hand to learn Angular entirely :slight_smile: I’m just lost as to where to work out what modules to invoke. For example, in the OIDC code:

taiga-contrib-oidc-auth/front/coffee/oidc_auth.coffee at master · taigaio/taiga-contrib-oidc-auth · GitHub - someone knew they needed to have ‘$tgAuth’ near the end. And how does the app know to add the login button from taiga-contrib-oidc-auth/front/partials/contrib/oidc_auth.jade at master · taigaio/taiga-contrib-oidc-auth · GitHub only on the login page? How does it ensure it only appears there, and not elsewhere on the site? It feels like there’s a hidden ‘magic’ to Angular that I can’t get my head around.