Issue 1:
Apache Airflow version

2.3.0 (latest released)

What happened

In the new grid view, tasks are not visible if they contain dots in their name (but are shown in the details panel and graph view).

What you think should happen instead

All tasks should be displayed, matching the ones in the detailed panel and the graph view.

How to reproduce

Here is a dag that reproduces the problem:

from airflow import DAG
from airflow.operators.dummy_operator import DummyOperator
from datetime import datetime

dag = DAG("some-test-dag",
start_date=datetime(2021, 0o2, 17),
schedule_interval="0 10 * * *",
max_active_runs=1,
catchup=False)

DummyOperator(task_id=f"task_without_dots", dag=dag)
DummyOperator(task_id=f"task.with.dots", dag=dag)

The task without the dot is displayed, however, the other doesn't.

Operating System

Ubuntu / MacOS

Versions of Apache Airflow Providers

No response

Deployment

Official Apache Airflow Helm Chart

Deployment details

EKS / official helm chart

Anything else

no errors are shown in the console (chrome)

the response from api/v1/dags/some-test-dag/tasks had two elements

the div for the missing task is present in the body (just empty)

i spotted the block of code (in packed tree.js in chrome) which prevents the task from showing:

const {task: t, level: n, prevTaskId: a, isParentOpen: i=!0, dagRunIds: u} = e
// ...
, w = Object(r.useCallback)((()=>d && b()), [b, d])
, x = t.id.split("."); <----
x.splice(-1);
const E = i && x.every((e=>v.some((t=>t === e)))); // <--- returns false for tasks containing dots in their name
// ....
}, o.a.createElement(Qb, {
in: E,
unmountOnExit: !0
}

i couldn't find the split code in Grid or Collapse

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

Issue 2:
Apache Airflow version

2.3.0 (latest released)

What happened

task_id with . e.g. hello.world is not rendered in grid view.

What you think should happen instead

The task should be rendered just fine in Grid view.

How to reproduce

#
# Licensed to the Apache Software Foundation (ASF) under one
# or more contributor license agreements. See the NOTICE file
# distributed with this work for additional information
# regarding copyright ownership. The ASF licenses this file
# to you under the Apache License, Version 2.0 (the
# "License"); you may not use this file except in compliance
# with the License. You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing,
# software distributed under the License is distributed on an
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
# KIND, either express or implied. See the License for the
# specific language governing permissions and limitations
# under the License.

"""Example DAG demonstrating the usage of the BashOperator."""

from datetime import datetime, timedelta

from airflow import DAG
from airflow.operators.bash import BashOperator
from airflow.operators.dummy import DummyOperator

with DAG(
dag_id="example_bash_operator",
schedule_interval="0 0 * * *",
start_date=datetime(2021, 1, 1),
catchup=False,
dagrun_timeout=timedelta(minutes=60),
tags=["example", "example2"],
params={"example_key": "example_value"},
) as dag:
run_this_last = DummyOperator(
task_id="run.this.last",
)

# [START howto_operator_bash]
run_this = BashOperator(
task_id="run.after.loop",
bash_command="echo 1",
)
# [END howto_operator_bash]

run_this >> run_this_last

for i in range(3):
task = BashOperator(
task_id="runme." + str(i),
bash_command='echo "{{ task_instance_key_str }}" && sleep 1',
)
task >> run_this

# [START howto_operator_bash_template]
also_run_this = BashOperator(
task_id="also.run.this",
bash_command='echo "run_id={{ run_id }} | dag_run={{ dag_run }}"',
)
# [END howto_operator_bash_template]
also_run_this >> run_this_last

# [START howto_operator_bash_skip]
this_will_skip = BashOperator(
task_id="this.will.skip",
bash_command='echo "hello world"; exit 99;',
dag=dag,
)
# [END howto_operator_bash_skip]
this_will_skip >> run_this_last

if __name__ == "__main__":
dag.cli()

Operating System

Debian GNU/Linux 11 (bullseye)

Versions of Apache Airflow Providers

No response

Deployment

Official Apache Airflow Helm Chart

Deployment details

No response

Anything else

No response

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