Add Docs button to Nav (apache#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

@@ -111,6 +111,7 @@ celerybeat-schedule
 
 # dotenv
 .env
+.env.local
 .autoenv*.zsh
 
 # virtualenv

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"

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 = () => (
+  <Menu placement="right">
+    <MenuButton
+      as={IconButton}
+      icon={<FiBookOpen size="1.75rem" />}
+      {...navButtonProps}
+    />
+    <MenuList>
+      {links.map((link) => (
+        <MenuItem
+          aria-label={link.title}
+          as={Link}
+          href={link.href}
+          key={link.title}
+          target="_blank"
+        >
+          {link.title}
+        </MenuItem>
+      ))}
+    </MenuList>
+  </Menu>
+);

airflow/ui/src/layouts/Nav.tsx → 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 = () => {
         <NavButton
           icon={<FiDatabase size="1.75rem" />}
           isDisabled
-          title="Datasets"
+          title="Assets"
         />
         <NavButton
           icon={<FiBarChart2 size="1.75rem" />}
@@ -103,6 +105,7 @@ export const Nav = () => {
           icon={<FiCornerUpLeft size="1.5rem" />}
           title="Return to legacy UI"
         />
+        <DocsButton />
         <NavButton
           icon={
             colorMode === "light" ? (

airflow/ui/src/layouts/NavButton.tsx → airflow/ui/src/layouts/Nav/NavButton.tsx

@@ -20,27 +20,18 @@ import { Box, Button, type ButtonProps } from "@chakra-ui/react";
 import type { ReactElement } from "react";
 import { Link as RouterLink } from "react-router-dom";
 
+import { navButtonProps } from "./navButtonProps";
+
 type NavButtonProps = {
   readonly href?: string;
   readonly icon: ReactElement;
+  readonly target?: string;
   readonly title?: string;
   readonly to?: string;
 } & ButtonProps;
 
 export const NavButton = ({ icon, title, to, ...rest }: NavButtonProps) => (
-  <Button
-    alignItems="center"
-    as={RouterLink}
-    borderRadius="none"
-    flexDir="column"
-    height={16}
-    to={to}
-    transition="0.2s background-color ease-in-out"
-    variant="ghost"
-    whiteSpace="wrap"
-    width={24}
-    {...rest}
-  >
+  <Button as={RouterLink} to={to} {...navButtonProps} {...rest}>
     <Box alignSelf="center">{icon}</Box>
     <Box fontSize="xs">{title}</Box>
   </Button>

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";

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,
+};

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(

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 @@
  */
 
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_FASTAPI_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

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