Implement theming for flag link

There's a template on 7.x that we should use as a starting point, though we should also trawl through the issue queue as there have been various issues over the years to do with limitations of the theming approach.

I've been doing a fair bit with twig over on Garland. It's actually pretty easy!

The D7 version of the theming for this was removed with commit eaa98bf807b1ed60557ee6be0582cb0a36b4604d -- that should be studied when tackling this issue.

just mapping eaa98bf807b1ed60557ee6be0582cb0a36b4604d back to an issue

#2651502: Remove flag.js

and patch

https://www.drupal.org/files/issues/2651502.7.removeThemeFolder.patch

I have taken a little look at this tried assembling pieces of the solution together

and I find myself coming up short perhaps someone can nudge me in the right direction.

here is the html of typical link

<a href="/flag/flag/flag_one/1?destination=node/1&amp;token=VuC2C-Q1BoU21Rg54EPwcYvrCkN5w6lFOobPxN_FbQ8" id="flag-flag_one-id-1">Flag this item</a>

here is the point in ActionLinkTypeBase in which the render array is generated and then modified.

  public function buildLink($action, FlagInterface $flag, EntityInterface $entity) {
    $url = $this->getLinkURL($action, $flag, $entity);

    $url->setRouteParameter('destination', $this->getDestination());

    $render = $url->toRenderArray();
    $render['#type'] = 'link';
    $render['#attributes']['id'] = 'flag-' . $flag->id() . '-id-' . $entity->id();

    if ($action === 'unflag') {
      $render['#title'] = $flag->getUnflagShortText();
      $render['#alt'] = $flag->getUnflagLongText();
    }
    else {
      $render['#title'] = $flag->getFlagShortText();
      $render['#alt'] = $flag->getFlagLongText();
    }

    return $render;
  }

so we could swap out this line

 $render['#type'] = 'link'; 

and replace it with a new #theme' called say 'flag-action-link' and then we could do what we want in corresponding twig file.

BUT below I am including the render array as it stands today....

The question I cannot answer is how can we deal with token part html the

token=VuC2C-Q1BoU21Rg54EPwcYvrCkN5w6lFOobPxN_FbQ8"

from the another perspective deal with #access_callback

Any prods in the right direction would be appreciated.

array(7) {
  ["#url"]=>
  object(Drupal\Core\Url)#994 (11) {
    ["urlGenerator":protected]=>
    NULL
    ["urlAssembler":protected]=>
    NULL
    ["accessManager":protected]=>
    NULL
    ["routeName":protected]=>
    string(19) "flag_link_flag.html"
    ["routeParameters":protected]=>
    array(3) {
      ["flag"]=>
      string(8) "flag_one"
      ["entity_id"]=>
      string(1) "1"
      ["destination"]=>
      string(6) "node/1"
    }
    ["options":protected]=>
    array(0) {
    }
    ["external":protected]=>
    bool(false)
    ["unrouted":protected]=>
    bool(false)
    ["uri":protected]=>
    NULL
    ["internalPath":protected]=>
    NULL
    ["_serviceIds":protected]=>
    array(0) {
    }
  }
  ["#options"]=>
  array(0) {
  }
  ["#access_callback"]=>
  array(2) {
    [0]=>
    string(15) "Drupal\Core\Url"
    [1]=>
    string(12) "renderAccess"
  }
  ["#type"]=>
  string(4) "link"
  ["#attributes"]=>
  array(1) {
    ["id"]=>
    string(18) "flag-flag_one-id-1"
  }
  ["#title"]=>
  string(14) "Flag this item"
  ["#alt"]=>
  string(0) ""
}

Related: http://drupal.stackexchange.com/questions/188237/how-do-i-customize-the-... for possible use cases.

I think we should keep the #type, there would be quite a bit of code to copy otherwise.

Maybe we could specify a wrapper template that by definition just prints the link? If we can find a nice way to add some classes and other attributes to the link itself then that should be enough?

One thing we need to check is the confirmation messages that JS flags show on D7.

I think the patch from #10 is a good solution.

In #6 I included the generated html for the link ... below I am including what it looks like with the patch applied - and theme debug turned on.
The token comes through correctly and the only difference I can see is the inclusion of a empty alt attribute.

My patch is trivial - it deletes spaces from an empty line and adds a newline to the end of a file.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'flag' -->
<!-- BEGIN OUTPUT from 'modules/flag/templates/flag.html.twig' -->
<a href="/flag/flag/first_flag/1?destination=node/1&amp;token=C6otb7-pu_-r6_2bzZUsSHCI_Ywh0v5ZNYrbqfxDPX0" id="flag-first_flag-id-1" alt="" class="flag">Flag this item</a>

<!-- END OUTPUT from 'modules/flag/templates/flag.html.twig' -->

Ah thanks for teaching me the token trick.