Function DatabaseGroupForm

frontend/src/react/components/DatabaseGroupForm.tsx:52–262

({
  readonly,
  project,
  databaseGroup,
  className,
  onDismiss,
  onCreated,
}: DatabaseGroupFormProps)

}

export function DatabaseGroupForm({
  readonly,
  project,
  databaseGroup,
  className,
  onDismiss,
  onCreated,
}: DatabaseGroupFormProps) {
  const { t } = useTranslation();

  const [title, setTitle] = useState("");
  const [resourceId, setResourceId] = useState("");
  const [resourceIdValid, setResourceIdValid] = useState(false);
  const [expr, setExpr] = useState<ConditionGroupExpr>(
    wrapAsGroup(emptySimpleExpr())
  );

  const isCreating = databaseGroup === undefined;

  const matchedDatabaseNames = useMemo(
    () => databaseGroup?.matchedDatabases.map((db) => db.name) ?? [],
    [databaseGroup]
  );

  // Initialize state from databaseGroup in editing mode
  useEffect(() => {
    if (!databaseGroup || !isValidDatabaseGroupName(databaseGroup.name)) {
      return;
    }

    const [, groupName] = getProjectNameAndDatabaseGroupName(
      databaseGroup.name
    );
    setResourceId(groupName);
    setTitle(databaseGroup.title);

    if (databaseGroup.databaseExpr?.expression) {
      batchConvertCELStringToParsedExpr([
        databaseGroup.databaseExpr.expression,
      ]).then((exprList) => {
        if (exprList.length > 0) {
          const simpleExpr = resolveCELExpr(exprList[0]);
          setExpr(cloneDeep(wrapAsGroup(simpleExpr)));
        }
      });
    }
  }, [databaseGroup]);

  // In edit mode, ResourceIdField is readonly and never fires onValidationChange,
  // so skip the resourceIdValid gate when editing.
  const allowConfirm = useMemo(() => {
    const idOk = isCreating ? resourceIdValid : true;
    return idOk && title.trim() !== "" && validateSimpleExpr(expr);
  }, [isCreating, resourceIdValid, title, expr]);

  // Duplicate-ID validation for creation: try to fetch the group and fail if it exists.
  const validateResourceId = useCallback(
    async (id: string): Promise<ValidatedMessage[]> => {