Access mode controls how requests to the data source will be handled.
@@ -79,6 +70,9 @@ const HttpAccessHelp = () => {
const LABEL_WIDTH = 26;
+/**
+ * @deprecated Use components from `@grafana/plugin-ui` instead, according to the [migration guide](https://github.com/grafana/plugin-ui/blob/main/src/components/ConfigEditor/migrating-from-datasource-http-settings.md).
+ */
export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
const {
defaultUrl,
@@ -94,6 +88,22 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
urlDocs,
} = props;
+ const ACCESS_OPTIONS: Array> = useMemo(
+ () => [
+ {
+ label: t('grafana-ui.data-source-http-settings.server-mode-label', 'Server (default)'),
+ value: 'proxy',
+ },
+ {
+ label: t('grafana-ui.data-source-http-settings.browser-mode-label', 'Browser'),
+ value: 'direct',
+ },
+ ],
+ []
+ );
+
+ const DEFAULT_ACCESS_OPTION = useMemo(() => ACCESS_OPTIONS[0], [ACCESS_OPTIONS]);
+
const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false);
const [azureAuthEnabled, setAzureAuthEnabled] = useState(false);
const theme = useTheme2();
@@ -160,246 +170,235 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
);
}
- const accessSelect = (
-