From 7219d3049ae8f793e7bf7c80505e27afcd00e7e1 Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Tue, 1 Oct 2024 17:25:18 +0200 Subject: [PATCH] Add Docs button to Nav (#42586) * Add Docs button to new UI nav * Add Docs menu button to Nav * Use src alias * Address PR feedback, update documentation * Delete airflow/ui/.env.local --- .gitignore | 1 + airflow/ui/.env.example | 23 +++++++ airflow/ui/src/layouts/Nav/DocsButton.tsx | 67 +++++++++++++++++++ airflow/ui/src/layouts/{ => Nav}/Nav.tsx | 9 ++- .../ui/src/layouts/{ => Nav}/NavButton.tsx | 17 ++--- airflow/ui/src/layouts/Nav/index.tsx | 20 ++++++ airflow/ui/src/layouts/Nav/navButtonProps.ts | 30 +++++++++ airflow/ui/src/main.tsx | 2 +- airflow/ui/src/vite-env.d.ts | 9 +++ .../14_node_environment_setup.rst | 17 +++++ 10 files changed, 178 insertions(+), 17 deletions(-) create mode 100644 airflow/ui/.env.example create mode 100644 airflow/ui/src/layouts/Nav/DocsButton.tsx rename airflow/ui/src/layouts/{ => Nav}/Nav.tsx (94%) rename airflow/ui/src/layouts/{ => Nav}/NavButton.tsx (83%) create mode 100644 airflow/ui/src/layouts/Nav/index.tsx create mode 100644 airflow/ui/src/layouts/Nav/navButtonProps.ts diff --git a/.gitignore b/.gitignore index 257331cb4e90b..a9c055041d980 100644 --- a/.gitignore +++ b/.gitignore @@ -111,6 +111,7 @@ celerybeat-schedule # dotenv .env +.env.local .autoenv*.zsh # virtualenv diff --git a/airflow/ui/.env.example b/airflow/ui/.env.example new file mode 100644 index 0000000000000..9374d93de6bca --- /dev/null +++ b/airflow/ui/.env.example @@ -0,0 +1,23 @@ +# +# 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. +#/ + + +# This is an example. You should make your own `.env.local` file for development + +VITE_FASTAPI_URL="http://localhost:29091" diff --git a/airflow/ui/src/layouts/Nav/DocsButton.tsx b/airflow/ui/src/layouts/Nav/DocsButton.tsx new file mode 100644 index 0000000000000..07a4b93dfaede --- /dev/null +++ b/airflow/ui/src/layouts/Nav/DocsButton.tsx @@ -0,0 +1,67 @@ +/*! + * 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. + */ +import { + IconButton, + Link, + Menu, + MenuButton, + MenuItem, + MenuList, +} from "@chakra-ui/react"; +import { FiBookOpen } from "react-icons/fi"; + +import { navButtonProps } from "./navButtonProps"; + +const links = [ + { + href: "https://airflow.apache.org/docs/", + title: "Documentation", + }, + { + href: "https://github.com/apache/airflow", + title: "GitHub Repo", + }, + { + href: `${import.meta.env.VITE_FASTAPI_URL}/docs`, + title: "REST API Reference", + }, +]; + +export const DocsButton = () => ( + + } + {...navButtonProps} + /> + + {links.map((link) => ( + + {link.title} + + ))} + + +); diff --git a/airflow/ui/src/layouts/Nav.tsx b/airflow/ui/src/layouts/Nav/Nav.tsx similarity index 94% rename from airflow/ui/src/layouts/Nav.tsx rename to airflow/ui/src/layouts/Nav/Nav.tsx index 4900540cd96d1..55bfd4480e0f4 100644 --- a/airflow/ui/src/layouts/Nav.tsx +++ b/airflow/ui/src/layouts/Nav/Nav.tsx @@ -37,8 +37,10 @@ import { FiSun, } from "react-icons/fi"; -import { AirflowPin } from "../assets/AirflowPin"; -import { DagIcon } from "../assets/DagIcon"; +import { AirflowPin } from "src/assets/AirflowPin"; +import { DagIcon } from "src/assets/DagIcon"; + +import { DocsButton } from "./DocsButton"; import { NavButton } from "./NavButton"; export const Nav = () => { @@ -78,7 +80,7 @@ export const Nav = () => { } isDisabled - title="Datasets" + title="Assets" /> } @@ -103,6 +105,7 @@ export const Nav = () => { icon={} title="Return to legacy UI" /> + ( - diff --git a/airflow/ui/src/layouts/Nav/index.tsx b/airflow/ui/src/layouts/Nav/index.tsx new file mode 100644 index 0000000000000..403e140919b04 --- /dev/null +++ b/airflow/ui/src/layouts/Nav/index.tsx @@ -0,0 +1,20 @@ +/*! + * 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. + */ + +export { Nav } from "./Nav"; diff --git a/airflow/ui/src/layouts/Nav/navButtonProps.ts b/airflow/ui/src/layouts/Nav/navButtonProps.ts new file mode 100644 index 0000000000000..740348bc9676b --- /dev/null +++ b/airflow/ui/src/layouts/Nav/navButtonProps.ts @@ -0,0 +1,30 @@ +/*! + * 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. + */ +import type { ButtonProps } from "@chakra-ui/react"; + +export const navButtonProps: ButtonProps = { + alignItems: "center", + borderRadius: "none", + flexDir: "column", + height: 16, + transition: "0.2s background-color ease-in-out", + variant: "ghost", + whiteSpace: "wrap", + width: 24, +}; diff --git a/airflow/ui/src/main.tsx b/airflow/ui/src/main.tsx index ca5fbed04b6ce..7b762508ea7b3 100644 --- a/airflow/ui/src/main.tsx +++ b/airflow/ui/src/main.tsx @@ -43,7 +43,7 @@ const queryClient = new QueryClient({ }, }); -axios.defaults.baseURL = "http://localhost:29091"; +axios.defaults.baseURL = import.meta.env.VITE_FASTAPI_URL; // redirect to login page if the API responds with unauthorized or forbidden errors axios.interceptors.response.use( diff --git a/airflow/ui/src/vite-env.d.ts b/airflow/ui/src/vite-env.d.ts index a1fdcdd1e6fc5..193866687bff9 100644 --- a/airflow/ui/src/vite-env.d.ts +++ b/airflow/ui/src/vite-env.d.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/consistent-type-definitions */ /*! * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -18,3 +19,11 @@ */ /// + +interface ImportMetaEnv { + readonly VITE_FASTAPI_URL: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/contributing-docs/14_node_environment_setup.rst b/contributing-docs/14_node_environment_setup.rst index 8d98f0860fc8b..7b10f0b0d5ed5 100644 --- a/contributing-docs/14_node_environment_setup.rst +++ b/contributing-docs/14_node_environment_setup.rst @@ -84,6 +84,23 @@ Project Structure - ``/src/components`` shared components across the UI - ``/dist`` build files +Local Environment Variables +--------------------------- + +Copy the example environment + +.. code-block:: bash + + cp .env.example .env.local + +If you run into CORS issues, you may need to add some variables to your Breeze config, ``files/airflow-breeze-config/variables.env``: + +.. code-block:: bash + + export AIRFLOW__API__ACCESS_CONTROL_ALLOW_HEADERS="Origin, Access-Control-Request-Method" + export AIRFLOW__API__ACCESS_CONTROL_ALLOW_METHODS="*" + export AIRFLOW__API__ACCESS_CONTROL_ALLOW_ORIGINS="http://localhost:28080,http://localhost:8080" + DEPRECATED Airflow WWW