Button missing in Zendesk

[nicktoggl]

OS version: macOS latest Browser version: Chrome latest Extension version: 2.0.20

Relevant integration (if any):

🐛 Describe the bug

The Zendesk integration has stopped working with the Toggl browser extension

Expected behaviour

When enabled, button should appear in Zendesk webapp

Steps to reproduce

Steps to reproduce the behaviour:

1. Enable Zendesk in the Integrations list
2. Open Zendesk webapp
3. Toggl Button should appear

Other details or context

Case reference

[nicktoggl]

Case reference with 3.0.1

[nicktoggl]

Case reference with 3.0.1

[lerlacher-haylix]

This updated render code seems to mostly work:

togglbutton.render(
  '.ticket.section.polaris>div>div>div:nth-child(2):not(.toggl)',
  { observe: true },
  (elem) => {
    const getProject = () => {
      const title = document.querySelector('title');
      return title ? title.textContent.trim() : '';
    };

    const getDescription = () => {
      const ticketId = document.querySelector('div.ticket.section>div').attributes['data-ticket-id'].value || ''

      const input = document.querySelector('input[aria-label=Subject]');
      const title = (input ? input.value : '').trim();

      return [`#${ticketId}`, title].filter(Boolean).join(' ');
    };

    const link = togglbutton.createTimerLink({
      buttonType: 'minimal',
      className: 'zendesk--2021',
      description: getDescription,
      projectName: getProject
    });

    elem.appendChild(link);
  }
);

Not sure if it attaches to quite the right elements but it works well enough for my usecase (which is just having a button and extracting title and ticket number into description)

[lerlacher-haylix]

I missed the tabbing, which requires a little bit of extra effort to find the correct title when having multiple tickets open in a tabbed view:

togglbutton.render(
  '.ticket.section.polaris>div>div>div:nth-child(2):not(.toggl)',
  { observe: true },
  (elem) => {
    const getProject = () => {
      const title = document.querySelector('title');
      return title ? title.textContent.trim() : '';
    };

    const getDescription = () => {
      const ticketId = document.querySelector('header div[data-selected=true]').attributes['data-entity-id'].value || ''

      const input = document.querySelector('div.conversation-polaris[data-ticket-id="'+ticketId+'"] input[aria-label=Subject]');
      const title = (input ? input.value : '').trim();

      return [`#${ticketId}`, title].filter(Boolean).join(' ');
    };

    const link = togglbutton.createTimerLink({
      buttonType: 'minimal',
      className: 'zendesk--2021',
      description: getDescription,
      projectName: getProject
    });

    elem.appendChild(link);
  }
);

There's probably a more elegant way to do this but I have very little experience with manipulating DOM.

[dianetoggl]

Case ref with 3.0.3