diff --git a/package.json b/package.json index f1fe9ac..1add72f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@grafana/aws-sdk", - "version": "0.0.32", + "version": "0.0.33", "description": "Common AWS features for grafana", "main": "dist/index.js", "scripts": { diff --git a/src/sql/ResourceSelector.test.tsx b/src/sql/ResourceSelector.test.tsx index 4066e86..486e612 100644 --- a/src/sql/ResourceSelector.test.tsx +++ b/src/sql/ResourceSelector.test.tsx @@ -1,7 +1,8 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; -import { ResourceSelector, ResourceSelectorProps } from './ResourceSelector'; +import React from 'react'; import { select } from 'react-select-event'; + +import { ResourceSelector, ResourceSelectorProps } from './ResourceSelector'; import { defaultKey } from './types'; const props: ResourceSelectorProps = { @@ -30,4 +31,16 @@ describe('ResourceSelector', () => { expect(fetch).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith({ label: 'bar', value: 'bar' }); }); + + it('should select pre-loaded resource', async () => { + const onChange = jest.fn(); + const resources = ['foo', 'bar']; + render(); + + const selectEl = screen.getByLabelText(props.label); + expect(selectEl).toBeInTheDocument(); + + await select(selectEl, 'bar', { container: document.body }); + expect(onChange).toHaveBeenCalledWith({ label: 'bar', value: 'bar' }); + }); }); diff --git a/src/sql/ResourceSelector.tsx b/src/sql/ResourceSelector.tsx index cd093f6..de76355 100644 --- a/src/sql/ResourceSelector.tsx +++ b/src/sql/ResourceSelector.tsx @@ -1,12 +1,12 @@ -import React, { useState, useEffect, useMemo } from 'react'; import { SelectableValue } from '@grafana/data'; import { InlineField, Select } from '@grafana/ui'; import { isEqual } from 'lodash'; +import React, { useEffect, useMemo, useState } from 'react'; + import { defaultKey } from './types'; export type ResourceSelectorProps = { value: string | null; - fetch: () => Promise>>; onChange: (e: SelectableValue | null) => void; dependencies?: Array; tooltip?: string; @@ -21,6 +21,9 @@ export type ResourceSelectorProps = { labelWidth?: number; className?: string; saveOptions?: () => Promise; + // Either set a way of fetching resources or the resource list + fetch?: () => Promise>>; + resources?: string[]; }; export function ResourceSelector(props: ResourceSelectorProps) { @@ -44,8 +47,13 @@ export function ResourceSelector(props: ResourceSelectorProps) { }, [props.default, props.value]); const [options, setOptions] = useState>>(props.default ? defaultOpts : []); useEffect(() => { + if (props.resources !== undefined) { + setResources(props.resources); + } + }, [props.resources]); + useEffect(() => { + const newOptions: Array> = props.default ? defaultOpts : []; if (resources.length) { - const newOptions: Array> = props.default ? defaultOpts : []; resources.forEach((r) => { const value = typeof r === 'string' ? r : r.value; if (!newOptions.find((o) => o.value === value)) { @@ -62,7 +70,6 @@ export function ResourceSelector(props: ResourceSelectorProps) { // A change in the dependencies cause a state clean-up if (!isEqual(props.dependencies, dependencies)) { setFetched(false); - setResources([]); setResource(null); props.onChange(null); setDependencies(props.dependencies); @@ -110,7 +117,7 @@ export function ResourceSelector(props: ResourceSelectorProps) { isLoading={isLoading} className={props.className || 'min-width-6'} disabled={props.disabled} - onOpenMenu={onClick} + onOpenMenu={() => props.fetch && onClick()} />