Use UI config (apache#44364)

* Swap to use ui/config

* Fix type checks

* Change from True to boolean types

airflow/ui/src/components/DataTable/useTableUrlState.ts

@@ -27,9 +27,7 @@ import type { TableState } from "./types";
 export const useTableURLState = (defaultState?: Partial<TableState>) => {
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const configPageSize = useConfig("webserver", "page_size");
-  const pageSize =
-    typeof configPageSize === "string" ? parseInt(configPageSize, 10) : 50;
+  const pageSize = useConfig("page_size") as number;
 
   const defaultTableState = {
     pagination: {

airflow/ui/src/components/TogglePause.tsx

@@ -60,8 +60,9 @@ export const TogglePause = ({
     onSuccess,
   });
 
-  const showConfirmation =
-    useConfig("webserver", "require_confirmation_dag_change") === "True";
+  const showConfirmation = Boolean(
+    useConfig("require_confirmation_dag_change"),
+  );
 
   const onToggle = useCallback(() => {
     mutate({

airflow/ui/src/context/timezone/TimezoneProvider.tsx

@@ -33,7 +33,7 @@ export const TimezoneContext = createContext<TimezoneContextType | undefined>(
 const TIMEZONE_KEY = "timezone";
 
 export const TimezoneProvider = ({ children }: PropsWithChildren) => {
-  const defaultUITimezone = useConfig("webserver", "default_ui_timezone");
+  const defaultUITimezone = useConfig("default_ui_timezone");
 
   const [selectedTimezone, setSelectedTimezone] = useLocalStorage(
     TIMEZONE_KEY,

airflow/ui/src/layouts/BaseLayout.tsx

@@ -25,7 +25,7 @@ import { useConfig } from "src/queries/useConfig";
 import { Nav } from "./Nav";
 
 export const BaseLayout = ({ children }: PropsWithChildren) => {
-  const instanceName = useConfig("webserver", "instance_name");
+  const instanceName = useConfig("instance_name");
   // const instanceNameHasMarkup =
   //   webserverConfig?.options.find(
   //     ({ key }) => key === "instance_name_has_markup",

airflow/ui/src/layouts/Nav/DocsButton.tsx

@@ -40,7 +40,7 @@ const links = [
 ];
 
 export const DocsButton = () => {
-  const showAPIDocs = useConfig("webserver", "enable_swagger_ui") === "True";
+  const showAPIDocs = Boolean(useConfig("enable_swagger_ui"));
 
   return (
     <Menu.Root positioning={{ placement: "right" }}>

airflow/ui/src/pages/DagsList/Dag/Code/Code.tsx

@@ -60,7 +60,7 @@ export const Code = () => {
     dagId: dagId ?? "",
   });
 
-  const defaultWrap = useConfig("webserver", "default_wrap") === "True";
+  const defaultWrap = Boolean(useConfig("default_wrap"));
 
   const [wrap, setWrap] = useState(defaultWrap);
 

airflow/ui/src/pages/DagsList/DagsFilters.tsx

@@ -70,12 +70,10 @@ export const DagsFilters = () => {
     orderBy: "name",
   });
 
-  const hidePausedDagsByDefault = useConfig(
-    "webserver",
-    "hide_paused_dags_by_default",
+  const hidePausedDagsByDefault = Boolean(
+    useConfig("hide_paused_dags_by_default"),
   );
-  const defaultShowPaused =
-    hidePausedDagsByDefault === "True" ? "false" : "all";
+  const defaultShowPaused = hidePausedDagsByDefault ? "false" : "all";
 
   const { setTableURLState, tableURLState } = useTableURLState();
   const { pagination, sorting } = tableURLState;

airflow/ui/src/pages/DagsList/DagsList.tsx

@@ -159,12 +159,10 @@ export const DagsList = () => {
     "card",
   );
 
-  const hidePausedDagsByDefault = useConfig(
-    "webserver",
-    "hide_paused_dags_by_default",
+  const hidePausedDagsByDefault = Boolean(
+    useConfig("hide_paused_dags_by_default"),
   );
-  const defaultShowPaused =
-    hidePausedDagsByDefault === "True" ? false : undefined;
+  const defaultShowPaused = hidePausedDagsByDefault ? false : undefined;
 
   const showPaused = searchParams.get(PAUSED_PARAM);
 

airflow/ui/src/pages/Dashboard/Health/Health.tsx

@@ -21,16 +21,12 @@ import { MdOutlineHealthAndSafety } from "react-icons/md";
 
 import { useMonitorServiceGetHealth } from "openapi/queries";
 import { ErrorAlert } from "src/components/ErrorAlert";
-import { useConfig } from "src/queries/useConfig";
 
 import { HealthTag } from "./HealthTag";
 
 export const Health = () => {
   const { data, error, isLoading } = useMonitorServiceGetHealth();
 
-  const isStandaloneDagProcessor =
-    useConfig("scheduler", "standalone_dag_processor") === "True";
-
   return (
     <Box>
       <Flex color="fg.muted" mb={2}>
@@ -58,14 +54,15 @@ export const Health = () => {
           status={data?.triggerer.status}
           title="Triggerer"
         />
-        {isStandaloneDagProcessor ? (
+        {/* TODO: Update this to match the API when we move the config check to the API level */}
+        {data?.dag_processor.status === undefined ? undefined : (
           <HealthTag
             isLoading={isLoading}
-            latestHeartbeat={data?.dag_processor.latest_dag_processor_heartbeat}
-            status={data?.dag_processor.status}
+            latestHeartbeat={data.dag_processor.latest_dag_processor_heartbeat}
+            status={data.dag_processor.status}
             title="Dag Processor"
           />
-        ) : undefined}
+        )}
       </HStack>
     </Box>
   );

airflow/ui/src/queries/useConfig.tsx

@@ -16,17 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useConfigServiceGetConfig } from "openapi/queries";
+import { useConfigServiceGetConfigs } from "openapi/queries";
+import type { ConfigResponse } from "openapi/requests/types.gen";
 
-export const useConfig = (sectionName: string, configKey: string) => {
-  // TODO: replace with a ui/config endpoint which will always return what the UI need to render
-  const { data: config } = useConfigServiceGetConfig({
-    accept: "application/json",
-  });
+export const useConfig = (configKey: keyof ConfigResponse) => {
+  const { data: config } = useConfigServiceGetConfigs();
 
-  const configSection = config?.sections.find(
-    (section) => section.name === sectionName,
-  );
-
-  return configSection?.options.find(({ key }) => key === configKey)?.value;
+  return config?.[configKey];
 };