@grafana/create-plugin 5.3.2 → 5.3.3-canary.1041.1ab47f9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +2 -2
  2. package/templates/app/src/components/AppConfig/AppConfig.tsx +26 -19
  3. package/templates/app/src/components/testIds.ts +0 -1
  4. package/templates/scenes-app/src/components/AppConfig/AppConfig.tsx +23 -67
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@grafana/create-plugin",
3
- "version": "5.3.2",
3
+ "version": "5.3.3-canary.1041.1ab47f9.0",
4
4
  "repository": {
5
5
  "directory": "packages/create-plugin",
6
6
  "url": "https://github.com/grafana/plugin-tools"
@@ -87,5 +87,5 @@
87
87
  "engines": {
88
88
  "node": ">=20"
89
89
  },
90
- "gitHead": "2ccd6e4dbbf8bcf8f20ff63fed6011476e0d1bb3"
90
+ "gitHead": "1ab47f9435853af26327c194ec7eece7b6ad533c"
91
91
  }
package/templates/app/src/components/AppConfig/AppConfig.tsx CHANGED
@@ -30,6 +30,8 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
30
30
  isApiKeySet: Boolean(secureJsonFields?.apiKey),
31
31
  });
32
32
 
33
+ const isSubmitDisabled = Boolean(!state.apiUrl || (!state.isApiKeySet && !state.apiKey));
34
+
33
35
  const onResetApiKey = () =>
34
36
  setState({
35
37
  ...state,
@@ -44,8 +46,29 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
44
46
  });
45
47
  };
46
48
 
49
+ const onSubmit = () => {
50
+ if (isSubmitDisabled) {
51
+ return;
52
+ }
53
+
54
+ updatePluginAndReload(plugin.meta.id, {
55
+ enabled,
56
+ pinned,
57
+ jsonData: {
58
+ apiUrl: state.apiUrl,
59
+ },
60
+ // This cannot be queried later by the frontend.
61
+ // We don't want to override it in case it was set previously and left untouched now.
62
+ secureJsonData: state.isApiKeySet
63
+ ? undefined
64
+ : {
65
+ apiKey: state.apiKey,
66
+ },
67
+ });
68
+ };
69
+
47
70
  return (
48
- <div data-testid={testIds.appConfig.container}>
71
+ <form onSubmit={onSubmit}>
49
72
  <FieldSet label="API Settings">
50
73
  <Field label="API Key" description="A secret key for authenticating to our custom API">
51
74
  <SecretInput
@@ -77,29 +100,13 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
77
100
  <Button
78
101
  type="submit"
79
102
  data-testid={testIds.appConfig.submit}
80
- onClick={() =>
81
- updatePluginAndReload(plugin.meta.id, {
82
- enabled,
83
- pinned,
84
- jsonData: {
85
- apiUrl: state.apiUrl,
86
- },
87
- // This cannot be queried later by the frontend.
88
- // We don't want to override it in case it was set previously and left untouched now.
89
- secureJsonData: state.isApiKeySet
90
- ? undefined
91
- : {
92
- apiKey: state.apiKey,
93
- },
94
- })
95
- }
96
- disabled={Boolean(!state.apiUrl || (!state.isApiKeySet && !state.apiKey))}
103
+ disabled={isSubmitDisabled}
97
104
  >
98
105
  Save API settings
99
106
  </Button>
100
107
  </div>
101
108
  </FieldSet>
102
- </div>
109
+ </form>
103
110
  );
104
111
  };
105
112
 
package/templates/app/src/components/testIds.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  export const testIds = {
2
2
  appConfig: {
3
- container: 'data-testid ac-container',
4
3
  apiKey: 'data-testid ac-api-key',
5
4
  apiUrl: 'data-testid ac-api-url',
6
5
  submit: 'data-testid ac-submit-form',
package/templates/scenes-app/src/components/AppConfig/AppConfig.tsx CHANGED
@@ -33,6 +33,8 @@ export const AppConfig = ({ plugin }: Props) => {
33
33
  isApiKeySet: Boolean(jsonData?.isApiKeySet),
34
34
  });
35
35
 
36
+ const isSubmitDisabled = Boolean(!state.apiUrl || (!state.isApiKeySet && !state.apiKey));
37
+
36
38
  const onResetApiKey = () =>
37
39
  setState({
38
40
  ...state,
@@ -54,51 +56,26 @@ export const AppConfig = ({ plugin }: Props) => {
54
56
  });
55
57
  };
56
58
 
57
- return (
58
- <div data-testid={testIds.appConfig.container}>
59
- {/* ENABLE / DISABLE PLUGIN */}
60
- <FieldSet label="Enable / Disable">
61
- {!enabled && (
62
- <>
63
- <div className={s.colorWeak}>The plugin is currently not enabled.</div>
64
- <Button
65
- className={s.marginTop}
66
- variant="primary"
67
- onClick={() =>
68
- updatePluginAndReload(plugin.meta.id, {
69
- enabled: true,
70
- pinned: true,
71
- jsonData,
72
- })
73
- }
74
- >
75
- Enable plugin
76
- </Button>
77
- </>
78
- )}
79
-
80
- {/* Disable the plugin */}
81
- {enabled && (
82
- <>
83
- <div className={s.colorWeak}>The plugin is currently enabled.</div>
84
- <Button
85
- className={s.marginTop}
86
- variant="destructive"
87
- onClick={() =>
88
- updatePluginAndReload(plugin.meta.id, {
89
- enabled: false,
90
- pinned: false,
91
- jsonData,
92
- })
93
- }
94
- >
95
- Disable plugin
96
- </Button>
97
- </>
98
- )}
99
- </FieldSet>
59
+ const onSubmit = () => {
60
+ updatePluginAndReload(plugin.meta.id, {
61
+ enabled,
62
+ pinned,
63
+ jsonData: {
64
+ apiUrl: state.apiUrl,
65
+ isApiKeySet: true,
66
+ },
67
+ // This cannot be queried later by the frontend.
68
+ // We don't want to override it in case it was set previously and left untouched now.
69
+ secureJsonData: state.isApiKeySet
70
+ ? undefined
71
+ : {
72
+ apiKey: state.apiKey,
73
+ },
74
+ });
75
+ };
100
76
 
101
- {/* CUSTOM SETTINGS */}
77
+ return (
78
+ <form onSubmit={onSubmit}>
102
79
  <FieldSet label="API Settings" className={s.marginTopXl}>
103
80
  {/* API Key */}
104
81
  <Field label="API Key" description="A secret key for authenticating to our custom API">
@@ -128,33 +105,12 @@ export const AppConfig = ({ plugin }: Props) => {
128
105
  </Field>
129
106
 
130
107
  <div className={s.marginTop}>
131
- <Button
132
- type="submit"
133
- data-testid={testIds.appConfig.submit}
134
- onClick={() =>
135
- updatePluginAndReload(plugin.meta.id, {
136
- enabled,
137
- pinned,
138
- jsonData: {
139
- apiUrl: state.apiUrl,
140
- isApiKeySet: true,
141
- },
142
- // This cannot be queried later by the frontend.
143
- // We don't want to override it in case it was set previously and left untouched now.
144
- secureJsonData: state.isApiKeySet
145
- ? undefined
146
- : {
147
- apiKey: state.apiKey,
148
- },
149
- })
150
- }
151
- disabled={Boolean(!state.apiUrl || (!state.isApiKeySet && !state.apiKey))}
152
- >
108
+ <Button type="submit" data-testid={testIds.appConfig.submit} disabled={isSubmitDisabled}>
153
109
  Save API settings
154
110
  </Button>
155
111
  </div>
156
112
  </FieldSet>
157
- </div>
113
+ </form>
158
114
  );
159
115
  };
160
116