Skip to content

Commit

Permalink
Merge pull request #86 from openmsupply/#85-Plugin-configuration-page…
Browse files Browse the repository at this point in the history 
…-has-labels-all-showing-blanks

#85 Plugin configuration page has labels all showing blanks while other pages work
  • Loading branch information
@sworup
sworup authored Jul 8, 2022
2 parents b44f175 + d3a15df commit 95eb629
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 151 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "msupply-foundation-excel-report-email-scheduler",
"version": "2.0.0",
"version": "2.0.02",
"description": "Grafana plugin for mSupply Dashboard application. The plugin takes data from panels of mSupply dashboard to generate excel reports. The reports are then emailed to a custom user group created with mSupply users pulled from mSupply Dashboard's datasource. The timing of the scheduler can be set in the plugin.",
"scripts": {
"build": "rm -rf dist && yarn build:frontend && mage -v && yarn sign",
Expand All @@ -10,7 +10,7 @@
"typecheck": "tsc --noEmit",
"lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
"lint:fix": "yarn lint --fix",
"sign": "rm -rf ./dist/.DS_Store & grafana-toolkit plugin:sign --signatureType private --rootUrls https://demo-board.msupply.org:3000,https://ci.msupply.org:3000,https://liberia.msupply.org:3000,https://tonga-vax.msupply.org:3000,https://timor.msupply.org:3000,http://localhost:3000,https://vanuatu-vax.msupply.org:3000,https://tokelau.msupply.org:3000,https://tonga.msupply.org:3000,https://who-demo.msupply.org:3000,https://msupply.health.gov.ws:3000",
"sign": "rm -rf ./dist/.DS_Store & grafana-toolkit plugin:sign --signatureType private --rootUrls https://demo-board.msupply.org:3000,https://png.msupply.org:3000,https://ci.msupply.org:3000,https://liberia.msupply.org:3000,https://tonga-vax.msupply.org:3000,https://timor.msupply.org:3000,http://localhost:3000,https://vanuatu-vax.msupply.org:3000,https://tokelau.msupply.org:3000,https://tonga.msupply.org:3000,https://who-demo.msupply.org:3000,https://msupply.health.gov.ws:3000",
"start": "yarn dev:frontend"
},
"author": "mSupply Foundation",
Expand Down
305 changes: 156 additions & 149 deletions src/components/AppConfigForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,15 @@ const AppConfigForm = ({ plugin }: Props) => {
});

useEffect(() => {
intl.init({ currentLocale: 'en', locales }).then(() => {
// After loading locale data, start to render
setLoading(false);
});
intl
.init({
currentLocale: 'en-US',
locales,
})
.then(() => {
// After loading locale data, start to render
setLoading(false);
});
}, []);

const onResetGrafanaPassword = () =>
Expand Down Expand Up @@ -108,160 +113,162 @@ const AppConfigForm = ({ plugin }: Props) => {
}

return (
<div>
{/* Grafana Username */}
<FieldSet label={intl.get('grafana_details')}>
<Field label={intl.get('grafana_url')} description="Full URL of your Grafana installation">
<Input
width={60}
id="api-grafana-url"
data-testid="api-grafana-url"
label={intl.get('grafana_url')}
value={state?.grafanaURL}
placeholder={intl.get('grafana_url')}
onChange={onChangeGrafanaURL}
/>
</Field>
!loading && (
<div>
{/* Grafana Username */}
<FieldSet label={intl.get('grafana_details')}>
<Field label={intl.get('grafana_url')} description="Full URL of your Grafana installation">
<Input
width={60}
id="api-grafana-url"
data-testid="api-grafana-url"
label={intl.get('grafana_url')}
value={state?.grafanaURL}
placeholder={intl.get('grafana_url')}
onChange={onChangeGrafanaURL}
/>
</Field>

<Field label={intl.get('grafana_username')}>
<Input
width={60}
id="api-grafana-username"
data-testid="api-grafana-username"
label={intl.get('grafana_username')}
value={state?.grafanaUsername}
placeholder={intl.get('grafana_username')}
onChange={onChangeGrafanaUsername}
/>
</Field>
<Field label={intl.get('grafana_username')}>
<Input
width={60}
id="api-grafana-username"
data-testid="api-grafana-username"
label={intl.get('grafana_username')}
value={state?.grafanaUsername}
placeholder={intl.get('grafana_username')}
onChange={onChangeGrafanaUsername}
/>
</Field>

<Field label={intl.get('grafana_password')} description={intl.get('grafana_password_tooltip')}>
<SecretInput
width={60}
id="api-grafana-password"
data-testid="api-grafana-password"
label={intl.get('grafana_password')}
value={state?.grafanaPassword}
isConfigured={state.isGrafanaPasswordSet}
placeholder={intl.get('grafana_password')}
onChange={onChangeGrafanaPassword}
onReset={onResetGrafanaPassword}
/>
</Field>
</FieldSet>
<Field label={intl.get('grafana_password')} description={intl.get('grafana_password_tooltip')}>
<SecretInput
width={60}
id="api-grafana-password"
data-testid="api-grafana-password"
label={intl.get('grafana_password')}
value={state?.grafanaPassword}
isConfigured={state.isGrafanaPasswordSet}
placeholder={intl.get('grafana_password')}
onChange={onChangeGrafanaPassword}
onReset={onResetGrafanaPassword}
/>
</Field>
</FieldSet>

<FieldSet label={intl.get('email_details')}>
<Field label={intl.get('email_address')}>
<Input
width={60}
id="api-email-address"
data-testid="api-email-address"
label={intl.get('email_address')}
value={state?.senderEmailAddress}
placeholder={intl.get('email_address')}
onChange={onEmailAddressChange}
/>
</Field>
<FieldSet label={intl.get('email_details')}>
<Field label={intl.get('email_address')}>
<Input
width={60}
id="api-email-address"
data-testid="api-email-address"
label={intl.get('email_address')}
value={state?.senderEmailAddress}
placeholder={intl.get('email_address')}
onChange={onEmailAddressChange}
/>
</Field>

<Field label={intl.get('email_password')} description={intl.get('email_password_tooltip')}>
<SecretInput
width={60}
id="api-email-password"
data-testid="api-email-password"
label={intl.get('email_password')}
value={state?.senderEmailPassword}
isConfigured={state.isSenderEmailPasswordSet}
placeholder={intl.get('email_password')}
onChange={onChangeSenderEmailPassword}
onReset={onResetSenderEmailPassword}
/>
</Field>
<Field label={intl.get('email_password')} description={intl.get('email_password_tooltip')}>
<SecretInput
width={60}
id="api-email-password"
data-testid="api-email-password"
label={intl.get('email_password')}
value={state?.senderEmailPassword}
isConfigured={state.isSenderEmailPasswordSet}
placeholder={intl.get('email_password')}
onChange={onChangeSenderEmailPassword}
onReset={onResetSenderEmailPassword}
/>
</Field>

<Field label={intl.get('email_host')} description={intl.get('email_host_tooltip')}>
<Input
width={60}
id="api-email-host"
data-testid="api-email-host"
label={intl.get('email_host')}
value={state?.senderEmailHost}
placeholder={intl.get('email_host')}
onChange={onSenderEmailHost}
/>
</Field>
<Field label={intl.get('email_host')} description={intl.get('email_host_tooltip')}>
<Input
width={60}
id="api-email-host"
data-testid="api-email-host"
label={intl.get('email_host')}
value={state?.senderEmailHost}
placeholder={intl.get('email_host')}
onChange={onSenderEmailHost}
/>
</Field>

<Field label={intl.get('email_port')} description={intl.get('email_port_tooltip')}>
<Input
width={60}
id="api-email-port"
data-testid="api-email-port"
label={intl.get('email_port')}
value={state?.senderEmailPort}
placeholder={intl.get('email_port')}
onChange={onSenderEmailPort}
/>
</Field>
</FieldSet>
<Field label={intl.get('email_port')} description={intl.get('email_port_tooltip')}>
<Input
width={60}
id="api-email-port"
data-testid="api-email-port"
label={intl.get('email_port')}
value={state?.senderEmailPort}
placeholder={intl.get('email_port')}
onChange={onSenderEmailPort}
/>
</Field>
</FieldSet>

<FieldSet label={intl.get('datasource_details')}>
<Field label={intl.get('datasource')}>
<Select
width={60}
menuShouldPortal
value={state?.datasourceID}
options={datasources?.map((datasource: any) => ({ label: datasource.name, value: datasource.id })) ?? []}
onChange={(selectedDatasource: SelectableValue) => {
setState({
...state,
datasourceID: Number(selectedDatasource.value),
});
}}
></Select>
</Field>
</FieldSet>
<FieldSet label={intl.get('datasource_details')}>
<Field label={intl.get('datasource')}>
<Select
width={60}
menuShouldPortal
value={state?.datasourceID}
options={datasources?.map((datasource: any) => ({ label: datasource.name, value: datasource.id })) ?? []}
onChange={(selectedDatasource: SelectableValue) => {
setState({
...state,
datasourceID: Number(selectedDatasource.value),
});
}}
></Select>
</Field>
</FieldSet>

<div className={style.marginTop}>
<Button
type="submit"
onClick={() =>
updatePluginAndReload(plugin.meta.id, {
enabled,
pinned,
jsonData: {
grafanaUsername: state.grafanaUsername,
grafanaURL: state.grafanaURL,
isGrafanaPasswordSet: true,
senderEmailAddress: state.senderEmailAddress,
isSenderEmailPasswordSet: true,
senderEmailHost: state.senderEmailHost,
senderEmailPort: state.senderEmailPort,
datasourceID: state.datasourceID,
},
secureJsonData:
state.isGrafanaPasswordSet && state.isSenderEmailPasswordSet
? undefined
: Object.fromEntries(
Object.entries({
grafanaPassword: state.grafanaPassword,
senderEmailPassword: state.senderEmailPassword,
}).filter(([_, v]) => v !== '')
),
})
}
disabled={Boolean(
!state.grafanaUsername ||
(!state.isGrafanaPasswordSet && !state.grafanaPassword) ||
(!state.isSenderEmailPasswordSet && !state.senderEmailPassword) ||
!state.senderEmailAddress ||
!state.senderEmailHost ||
!state.senderEmailPort ||
!state.grafanaURL ||
!state.datasourceID
)}
>
Save settings
</Button>
<div className={style.marginTop}>
<Button
type="submit"
onClick={() =>
updatePluginAndReload(plugin.meta.id, {
enabled,
pinned,
jsonData: {
grafanaUsername: state.grafanaUsername,
grafanaURL: state.grafanaURL,
isGrafanaPasswordSet: true,
senderEmailAddress: state.senderEmailAddress,
isSenderEmailPasswordSet: true,
senderEmailHost: state.senderEmailHost,
senderEmailPort: state.senderEmailPort,
datasourceID: state.datasourceID,
},
secureJsonData:
state.isGrafanaPasswordSet && state.isSenderEmailPasswordSet
? undefined
: Object.fromEntries(
Object.entries({
grafanaPassword: state.grafanaPassword,
senderEmailPassword: state.senderEmailPassword,
}).filter(([_, v]) => v !== '')
),
})
}
disabled={Boolean(
!state.grafanaUsername ||
(!state.isGrafanaPasswordSet && !state.grafanaPassword) ||
(!state.isSenderEmailPasswordSet && !state.senderEmailPassword) ||
!state.senderEmailAddress ||
!state.senderEmailHost ||
!state.senderEmailPort ||
!state.grafanaURL ||
!state.datasourceID
)}
>
Save settings
</Button>
</div>
</div>
</div>
)
);
};

Expand Down

0 comments on commit 95eb629

Please sign in to comment.