@grafana/create-plugin 5.3.2 → 5.3.3-canary.1041.f587936.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 (3) hide show
  1. package/package.json +2 -2
  2. package/templates/app/src/components/AppConfig/AppConfig.tsx +26 -17
  3. package/templates/scenes-app/src/components/AppConfig/AppConfig.tsx +55 -97
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.f587936.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": "f58793693d0e271ad3d1bad66d0a698072564acb"
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,30 @@ 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
71
  <div data-testid={testIds.appConfig.container}>
72
+ <form onSubmit={onSubmit}>
49
73
  <FieldSet label="API Settings">
50
74
  <Field label="API Key" description="A secret key for authenticating to our custom API">
51
75
  <SecretInput
@@ -77,28 +101,13 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
77
101
  <Button
78
102
  type="submit"
79
103
  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))}
104
+ disabled={isSubmitDisabled}
97
105
  >
98
106
  Save API settings
99
107
  </Button>
100
108
  </div>
101
109
  </FieldSet>
110
+ </form>
102
111
  </div>
103
112
  );
104
113
  };
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,106 +56,62 @@ export const AppConfig = ({ plugin }: Props) => {
54
56
  });
55
57
  };
56
58
 
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
+ };
76
+
57
77
  return (
58
78
  <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
79
+ <form onSubmit={onSubmit}>
80
+ <FieldSet label="API Settings" className={s.marginTopXl}>
81
+ {/* API Key */}
82
+ <Field label="API Key" description="A secret key for authenticating to our custom API">
83
+ <SecretInput
84
+ width={60}
85
+ data-testid={testIds.appConfig.apiKey}
86
+ id="api-key"
87
+ value={state?.apiKey}
88
+ isConfigured={state.isApiKeySet}
89
+ placeholder={'Your secret API key'}
90
+ onChange={onChangeApiKey}
91
+ onReset={onResetApiKey}
92
+ />
93
+ </Field>
94
+
95
+ {/* API Url */}
96
+ <Field label="API Url" description="" className={s.marginTop}>
97
+ <Input
98
+ width={60}
99
+ id="api-url"
100
+ data-testid={testIds.appConfig.apiUrl}
101
+ label={`API Url`}
102
+ value={state?.apiUrl}
103
+ placeholder={`E.g.: http://mywebsite.com/api/v1`}
104
+ onChange={onChangeApiUrl}
105
+ />
106
+ </Field>
107
+
108
+ <div className={s.marginTop}>
109
+ <Button type="submit" data-testid={testIds.appConfig.submit} disabled={isSubmitDisabled}>
110
+ Save API settings
96
111
  </Button>
97
- </>
98
- )}
99
- </FieldSet>
100
-
101
- {/* CUSTOM SETTINGS */}
102
- <FieldSet label="API Settings" className={s.marginTopXl}>
103
- {/* API Key */}
104
- <Field label="API Key" description="A secret key for authenticating to our custom API">
105
- <SecretInput
106
- width={60}
107
- data-testid={testIds.appConfig.apiKey}
108
- id="api-key"
109
- value={state?.apiKey}
110
- isConfigured={state.isApiKeySet}
111
- placeholder={'Your secret API key'}
112
- onChange={onChangeApiKey}
113
- onReset={onResetApiKey}
114
- />
115
- </Field>
116
-
117
- {/* API Url */}
118
- <Field label="API Url" description="" className={s.marginTop}>
119
- <Input
120
- width={60}
121
- id="api-url"
122
- data-testid={testIds.appConfig.apiUrl}
123
- label={`API Url`}
124
- value={state?.apiUrl}
125
- placeholder={`E.g.: http://mywebsite.com/api/v1`}
126
- onChange={onChangeApiUrl}
127
- />
128
- </Field>
129
-
130
- <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
- >
153
- Save API settings
154
- </Button>
155
- </div>
156
- </FieldSet>
112
+ </div>
113
+ </FieldSet>
114
+ </form>
157
115
  </div>
158
116
  );
159
117
  };