Operator's extra link button is disabled

[mfatemipour]

Apache Airflow version

2.10.2

What happened?

When in get_link method I provide None, the button is enabled and when I provide link (internal link) it is disabled

What you think should happen instead?

In the following code, if url is empty or None, the result of isSanitised is True !
also if the url is internal then isSanitised is False (so internal url is not supported)

As a workaround for now I am providing a random non-rul string instead of None, and I replaced my internal url with absolute one (but I missed rendering my page in same window now)

https://github.com/apache/airflow/blob/2.10.2/airflow/www/static/js/dag/details/taskInstance/ExtraLinks.tsx

const isExternal = (url: string | null) =>
    url && /^(?:[a-z]+:)?\/\//.test(url);

  const isSanitised = (url: string | null) => {
    if (!url) {
      return true;
    }
    const urlRegex = /^(https?:)/i;
    return urlRegex.test(url);
  };

  return (
    <Box my={3}>
      <Text as="strong">Extra Links</Text>
      <Flex flexWrap="wrap" mt={3}>
        {links.map(({ name, url }) => (
          <Button
            key={name}
            as={Link}
            colorScheme="blue"
            href={url}
            isDisabled={!isSanitised(url)}
            target={isExternal(url) ? "_blank" : undefined}
            mr={2}
          >
            {name}
          </Button>
        ))}
      </Flex>
      <Divider my={2} />
    </Box>
  );
};

How to reproduce

• Create a simple plugin with an OperatorLink
• Return None in get_link() method of your OperatorLink
• You can see the button in Details page of corresponding task is enalbed.

Operating System

Debian GNU/Linux 12 (bookworm)

Versions of Apache Airflow Providers

non related

Deployment

Docker-Compose

Deployment details

We are deploying on docker swarm

Anything else?

It works in 2.8.1
And It seems that internal url issue is fixed in main branch but None handling is not fixed.

Are you willing to submit PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct

[enisnazif]

I'm happy to investigate this - will take a look now

[enisnazif]

If I understand you correctly, seems like this can be solved with:

const isSanitised = (url: string | null) => {
    if (!url) {
      return false;
    }
    const urlRegex = /^(https?:)/i;
    return urlRegex.test(url);
  };

i.e, if the URL is '' or null, set isSanitised to false so that the button ends up having the isDisabled prop set to true

[enisnazif]

candidate PR here: #43844

[mfatemipour]

isSanitised should return true for internal urls too (urls that doesn't start with http).

[eladkal]

Fixed in #43844