homarr/packages/widgets/src/_inputs/widget-integration-select-input.tsx

"use client";

import { Select, Text } from "@mantine/core";

import { useScopedI18n } from "@homarr/translation/client";

import type { CommonWidgetInputProps } from "./common";
import { useWidgetInputTranslation } from "./common";
import { useFormContext } from "./form";

const useIntegrationSelectTranslation = () => useScopedI18n("widget.integrationSelect");

export const WidgetIntegrationSelectInput = ({
  property,
  kind,
  options,
}: CommonWidgetInputProps<"integrationSelect">) => {
  const t = useIntegrationSelectTranslation();
  const tInput = useWidgetInputTranslation(kind, property);
  const form = useFormContext();

  const integrationIds = form.values.integrationIds as string[];

  const { data: selectData = [], isPending, isError } = options.useOptions(integrationIds);
  const currentValue = form.getInputProps(`options.${property}`).value as string;
  const data =
    currentValue && !selectData.some((opt) => opt.value === currentValue)
      ? [...selectData, { value: currentValue, label: currentValue }]
      : selectData;

  if (integrationIds.length === 0) {
    return (
      <Text size="sm" c="dimmed">
        {t("configureIntegrationFirst")}
      </Text>
    );
  }

  return (
    <Select
      label={tInput("label")}
      description={options.withDescription ? tInput("description") : undefined}
      placeholder={(isPending && t("loading")) || t("placeholder")}
      clearable={options.clearable}
      searchable={options.searchable}
      nothingFoundMessage={t("noResults")}
      data={data}
      disabled={isError}
      error={(isError && t("loadError")) || undefined}
      {...form.getInputProps(`options.${property}`)}
    />
  );
};