Merge pull request OpenEnergyDashboard#1096 from Jake-Bodin/Issue974-…

…branch

Issue OpenEnergyDashboard#974 Moves help website url to admin user pages

src/client/app/actions/admin.ts

@@ -88,6 +88,10 @@ export function updateDefaultMeterDisableChecks(defaultMeterDisableChecks: boole
 	return { type: ActionType.UpdateDefaultMeterDisableChecks, defaultMeterDisableChecks };
 }
 
+export function updateDefaultHelpUrl(defaultHelpUrl: string): t.UpdateDefaultHelpUrlAction {
+	return { type: ActionType.UpdateDefaultHelpUrl, defaultHelpUrl }
+}
+
 function requestPreferences(): t.RequestPreferencesAction {
 	return { type: ActionType.RequestPreferences };
 }
@@ -195,7 +199,8 @@ export function submitPreferences() {
 				defaultMeterMaximumDate: state.admin.defaultMeterMaximumDate,
 				defaultMeterReadingGap: state.admin.defaultMeterReadingGap,
 				defaultMeterMaximumErrors: state.admin.defaultMeterMaximumErrors,
-				defaultMeterDisableChecks: state.admin.defaultMeterDisableChecks
+				defaultMeterDisableChecks: state.admin.defaultMeterDisableChecks,
+				defaultHelpUrl: state.admin.defaultHelpUrl
 			});
 			// Only return the defaultMeterReadingFrequency because the value from the DB
 			// generally differs from what the user input so update state with DB value.

src/client/app/components/HeaderButtonsComponent.tsx

@@ -18,7 +18,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Navbar, Nav, NavLink, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import LanguageSelectorComponent from './LanguageSelectorComponent';
 import { toggleOptionsVisibility } from '../actions/graph';
-import { BASE_URL } from './TooltipHelpComponent';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 import TooltipHelpContainer from '../containers/TooltipHelpContainer';
 
@@ -34,8 +33,9 @@ export default function HeaderButtonsComponent() {
 
 	// OED version is needed for help redirect
 	const version = useSelector((state: State) => state.version.version);
+	const baseHelpUrl = useSelector((state: State) => state.admin.defaultHelpUrl);
 	// Help URL location
-	let helpUrl = BASE_URL + version;
+	let helpUrl = baseHelpUrl + version;
 	// options help
 	const optionsHelp = helpUrl + '/optionsMenu.html';
 
@@ -85,7 +85,7 @@ export default function HeaderButtonsComponent() {
 
 	// Must update in case the version was not set when the page was loaded.
 	useEffect(() => {
-		helpUrl = BASE_URL + version;
+		helpUrl = baseHelpUrl + version;
 		setState(prevState => ({
 			...prevState,
 			pageChoicesHelp: helpUrl

src/client/app/components/LanguageSelectorComponent.tsx

@@ -9,7 +9,6 @@ import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from
 import { useDispatch, useSelector } from 'react-redux';
 import { State } from '../types/redux/state';
 import { updateSelectedLanguage } from '../actions/options';
-import { BASE_URL } from './TooltipHelpComponent';
 
 /**
  * A component that allows users to select which language the page should be displayed in.
@@ -20,8 +19,9 @@ export default function LanguageSelectorComponent() {
 
 	const selectedLanguage = useSelector((state: State) => state.options.selectedLanguage);
 	const version = useSelector((state: State) => state.version.version);
+	const baseHelpUrl = useSelector((state: State) => state.admin.defaultHelpUrl);
 
-	const HELP_URL = BASE_URL + version;
+	const helpUrl = baseHelpUrl + version;
 
 	return (
 		<>
@@ -47,7 +47,7 @@ export default function LanguageSelectorComponent() {
 					</DropdownItem>
 					<DropdownItem divider />
 					<DropdownItem
-						href={HELP_URL + '/language.html'}>
+						href={helpUrl + '/language.html'}>
 						<FormattedMessage id="help" />
 					</DropdownItem>
 				</DropdownMenu>

src/client/app/components/TooltipHelpComponent.tsx

@@ -11,15 +11,12 @@ import translate from '../utils/translate';
 interface TooltipHelpProps {
 	page: string; // Specifies which page the tip is in.
 	version: string;
+	baseHelpUrl: string;
 	fetchVersionIfNeeded(): Promise<any>;
 }
 
 // Normal/live URL for OED help pages
 // Exported to HeaderButtonsComponent and LanguageSelectorComponent
-export const BASE_URL = 'https://openenergydashboard.github.io/help/'
-// Debug URL where need to put own GitHub ID before .github.io.
-// This works if you have a fork of the web pages and setup your GitHub account to serve them up.
-// export const BASE_URL = 'https://xxx.github.io/OpenEnergyDashboard.github.io/help/';
 
 export default class TooltipHelpComponent extends React.Component<TooltipHelpProps> {
 	constructor(props: TooltipHelpProps) {
@@ -36,50 +33,50 @@ export default class TooltipHelpComponent extends React.Component<TooltipHelpPro
 		};
 
 		const version = this.props.version
-
-		const HELP_URL = BASE_URL + version;
+		const baseHelpUrl = this.props.baseHelpUrl
+		const helpUrl = baseHelpUrl + version;
 
 		const helpLinks: Record<string, Record<string, string>> = {
-			'help.admin.conversioncreate': { link: `${HELP_URL}/adminConversionCreating.html` },
-			'help.admin.conversionedit': { link: `${HELP_URL}/adminConversionEditing.html` },
-			'help.admin.conversionview': { link: `${HELP_URL}/adminConversionViewing.html` },
-			'help.admin.groupcreate': { link: `${HELP_URL}/adminGroupCreating.html` },
-			'help.admin.groupedit': { link: `${HELP_URL}/adminGroupEditing.html` },
-			'help.admin.groupview': { link: `${HELP_URL}/adminGroupViewing.html` },
-			'help.admin.header': { link: `${HELP_URL}/adminPreferences.html` },
-			'help.admin.mapview': { link: `${HELP_URL}/adminMapViewing.html` },
-			'help.admin.metercreate': { link: `${HELP_URL}/adminMeterCreating.html` },
-			'help.admin.meteredit': { link: `${HELP_URL}/adminMeterEditing.html` },
-			'help.admin.meterview': { link: `${HELP_URL}/adminMeterViewing.html` },
-			'help.admin.unitcreate': { link: `${HELP_URL}/adminUnitCreating.html` },
-			'help.admin.unitedit': { link: `${HELP_URL}/adminUnitEditing.html` },
-			'help.admin.unitview': { link: `${HELP_URL}/adminUnitViewing.html` },
-			'help.admin.user': { link: `${HELP_URL}/adminUser.html` },
-			'help.csv.header': { link: `${HELP_URL}/adminDataAcquisition.html` },
-			'help.home.area.normalize': { link: `${HELP_URL}/areaNormalization.html` },
-			'help.home.bar.custom.slider.tip': { link: `${HELP_URL}/barGraphic.html#usage` },
-			'help.home.bar.interval.tip': { link: `${HELP_URL}/barGraphic.html#usage` },
-			'help.home.bar.stacking.tip': { link: `${HELP_URL}/barGraphic.html#barStacking` },
+			'help.admin.conversioncreate': { link: `${helpUrl}/adminConversionCreating.html` },
+			'help.admin.conversionedit': { link: `${helpUrl}/adminConversionEditing.html` },
+			'help.admin.conversionview': { link: `${helpUrl}/adminConversionViewing.html` },
+			'help.admin.groupcreate': { link: `${helpUrl}/adminGroupCreating.html` },
+			'help.admin.groupedit': { link: `${helpUrl}/adminGroupEditing.html` },
+			'help.admin.groupview': { link: `${helpUrl}/adminGroupViewing.html` },
+			'help.admin.header': { link: `${helpUrl}/adminPreferences.html` },
+			'help.admin.mapview': { link: `${helpUrl}/adminMapViewing.html` },
+			'help.admin.metercreate': { link: `${helpUrl}/adminMeterCreating.html` },
+			'help.admin.meteredit': { link: `${helpUrl}/adminMeterEditing.html` },
+			'help.admin.meterview': { link: `${helpUrl}/adminMeterViewing.html` },
+			'help.admin.unitcreate': { link: `${helpUrl}/adminUnitCreating.html` },
+			'help.admin.unitedit': { link: `${helpUrl}/adminUnitEditing.html` },
+			'help.admin.unitview': { link: `${helpUrl}/adminUnitViewing.html` },
+			'help.admin.user': { link: `${helpUrl}/adminUser.html` },
+			'help.csv.header': { link: `${helpUrl}/adminDataAcquisition.html` },
+			'help.home.area.normalize': { link: `${helpUrl}/areaNormalization.html` },
+			'help.home.bar.custom.slider.tip': { link: `${helpUrl}/barGraphic.html#usage` },
+			'help.home.bar.interval.tip': { link: `${helpUrl}/barGraphic.html#usage` },
+			'help.home.bar.stacking.tip': { link: `${helpUrl}/barGraphic.html#barStacking` },
 			'help.home.chart.plotly.controls': { link: 'https://plotly.com/chart-studio-help/getting-to-know-the-plotly-modebar/' },
-			'help.home.chart.redraw.restore': { link: `${HELP_URL}/lineGraphic.html#redrawRestore` },
-			'help.home.chart.select': { link: `${HELP_URL}/graphType.html` },
-			'help.home.compare.interval.tip': { link: `${HELP_URL}/compareGraphic.html#usage` },
-			'help.home.compare.sort.tip': { link: `${HELP_URL}/compareGraphic.html#usage` },
-			'help.home.error.bar': { link: `${HELP_URL}/errorBar.html#usage` },
-			'help.home.export.graph.data': { link: `${HELP_URL}/export.html` },
-			'help.home.map.interval.tip': { link: `${HELP_URL}/mapGraphic.html#usage` },
+			'help.home.chart.redraw.restore': { link: `${helpUrl}/lineGraphic.html#redrawRestore` },
+			'help.home.chart.select': { link: `${helpUrl}/graphType.html` },
+			'help.home.compare.interval.tip': { link: `${helpUrl}/compareGraphic.html#usage` },
+			'help.home.compare.sort.tip': { link: `${helpUrl}/compareGraphic.html#usage` },
+			'help.home.error.bar': { link: `${helpUrl}/errorBar.html#usage` },
+			'help.home.export.graph.data': { link: `${helpUrl}/export.html` },
+			'help.home.map.interval.tip': { link: `${helpUrl}/mapGraphic.html#usage` },
 			'help.home.navigation': { link: '' },
-			'help.home.select.dateRange': { link: `${HELP_URL}/dateRange.html` },
-			'help.home.select.groups': { link: `${HELP_URL}/graphingGroups.html` },
-			'help.home.select.maps': { link: `${HELP_URL}/mapGraphic.html` },
-			'help.home.select.meters': { link: `${HELP_URL}/graphingMeters.html` },
-			'help.home.select.rates': { link: `${HELP_URL}/graphingRates.html` },
-			'help.home.select.units': { link: `${HELP_URL}/graphingUnits.html` },
-			'help.home.readings.per.day': { link: `${HELP_URL}/readingsPerDay.html` },
-			'help.home.toggle.chart.link': { link: `${HELP_URL}/chartLink.html` },
-			'help.groups.groupdetails': { link: `${HELP_URL}/groupViewing.html#groupDetails` },
-			'help.groups.groupview': { link: `${HELP_URL}/groupViewing.html` },
-			'help.meters.meterview': { link: `${HELP_URL}/meterViewing.html` }
+			'help.home.select.dateRange': { link: `${helpUrl}/dateRange.html` },
+			'help.home.select.groups': { link: `${helpUrl}/graphingGroups.html` },
+			'help.home.select.maps': { link: `${helpUrl}/mapGraphic.html` },
+			'help.home.select.meters': { link: `${helpUrl}/graphingMeters.html` },
+			'help.home.select.rates': { link: `${helpUrl}/graphingRates.html` },
+			'help.home.select.units': { link: `${helpUrl}/graphingUnits.html` },
+			'help.home.readings.per.day': { link: `${helpUrl}/readingsPerDay.html` },
+			'help.home.toggle.chart.link': { link: `${helpUrl}/chartLink.html` },
+			'help.groups.groupdetails': { link: `${helpUrl}/groupViewing.html#groupDetails` },
+			'help.groups.groupview': { link: `${helpUrl}/groupViewing.html` },
+			'help.meters.meterview': { link: `${helpUrl}/meterViewing.html` }
 		};
 
 		return (

src/client/app/components/admin/PreferencesComponent.tsx

@@ -22,14 +22,15 @@ import {
 	UpdateDefaultMeterMaximumDateAction,
 	UpdateDefaultMeterReadingGapAction,
 	UpdateDefaultMeterMaximumErrorsAction,
-	UpdateDefaultMeterDisableChecksAction
+	UpdateDefaultMeterDisableChecksAction,
+	UpdateDefaultHelpUrlAction
 
 } from '../../types/redux/admin';
 import { removeUnsavedChanges, updateUnsavedChanges } from '../../actions/unsavedWarning';
 import { defineMessages, FormattedMessage, injectIntl, WrappedComponentProps } from 'react-intl';
 import { LanguageTypes } from '../../types/redux/i18n';
 import TimeZoneSelect from '../TimeZoneSelect';
-import { store }  from '../../store';
+import { store } from '../../store';
 import { fetchPreferencesIfNeeded, submitPreferences } from '../../actions/admin';
 import { AreaUnitType } from '../../utils/getAreaUnitConversion';
 import translate from '../../utils/translate';
@@ -54,6 +55,7 @@ interface PreferencesProps {
 	defaultMeterReadingGap: number;
 	defaultMeterMaximumErrors: number;
 	defaultMeterDisableChecks: boolean;
+	defaultHelpUrl: string;
 	updateDisplayTitle(title: string): UpdateDisplayTitleAction;
 	updateDefaultChartType(defaultChartToRender: ChartTypes): UpdateDefaultChartToRenderAction;
 	toggleDefaultBarStacking(): ToggleDefaultBarStackingAction;
@@ -65,13 +67,14 @@ interface PreferencesProps {
 	updateDefaultFileSizeLimit(defaultFileSizeLimit: number): UpdateDefaultFileSizeLimit;
 	updateDefaultAreaUnit(defaultAreaUnit: AreaUnitType): UpdateDefaultAreaUnitAction;
 	updateDefaultMeterReadingFrequency(defaultMeterReadingFrequency: string): UpdateDefaultMeterReadingFrequencyAction;
-	updateDefaultMeterMinimumValue(defaultMeterMinimumValue : number): UpdateDefaultMeterMinimumValueAction;
+	updateDefaultMeterMinimumValue(defaultMeterMinimumValue: number): UpdateDefaultMeterMinimumValueAction;
 	updateDefaultMeterMaximumValue(defaultMeterMaximumValue: number): UpdateDefaultMeterMaximumValueAction;
 	updateDefaultMeterMinimumDate(defaultMeterMinimumDate: string): UpdateDefaultMeterMinimumDateAction;
 	updateDefaultMeterMaximumDate(defaultMeterMaximumDate: string): UpdateDefaultMeterMaximumDateAction;
 	updateDefaultMeterReadingGap(defaultMeterReadingGap: number): UpdateDefaultMeterReadingGapAction;
 	updateDefaultMeterMaximumErrors(defaultMeterMaximumErrors: number): UpdateDefaultMeterMaximumErrorsAction;
 	updateDefaultMeterDisableChecks(defaultMeterDisableChecks: boolean): UpdateDefaultMeterDisableChecksAction;
+	updateDefaultHelpUrl(defaultHelpUrl: string): UpdateDefaultHelpUrlAction;
 }
 
 type PreferencesPropsWithIntl = PreferencesProps & WrappedComponentProps;
@@ -98,6 +101,7 @@ class PreferencesComponent extends React.Component<PreferencesPropsWithIntl> {
 		this.handleDefaultMeterReadingGapChange = this.handleDefaultMeterReadingGapChange.bind(this);
 		this.handleDefaultMeterMaximumErrorsChange = this.handleDefaultMeterMaximumErrorsChange.bind(this);
 		this.handleDefaultMeterDisableChecksChange = this.handleDefaultMeterDisableChecksChange.bind(this);
+		this.handleDefaultHelpUrlChange = this.handleDefaultHelpUrlChange.bind(this);
 	}
 
 	public render() {
@@ -418,6 +422,16 @@ class PreferencesComponent extends React.Component<PreferencesPropsWithIntl> {
 						})}
 					</Input>
 				</div>
+				<div style={bottomPaddingStyle}>
+					<p style={titleStyle}>
+						<FormattedMessage id='default.help.url' />:
+					</p>
+					<Input
+						type='text'
+						value={this.props.defaultHelpUrl}
+						onChange={this.handleDefaultHelpUrlChange}
+					/>
+				</div>
 				<Button
 					type='submit'
 					onClick={this.handleSubmitPreferences}
@@ -539,6 +553,11 @@ class PreferencesComponent extends React.Component<PreferencesPropsWithIntl> {
 		this.updateUnsavedChanges();
 	}
 
+	private handleDefaultHelpUrlChange(e: { target: HTMLInputElement; }) {
+		this.props.updateDefaultHelpUrl(e.target.value);
+		this.updateUnsavedChanges();
+	}
+
 }
 
 export default injectIntl(PreferencesComponent);

src/client/app/containers/TooltipHelpContainer.ts

@@ -13,7 +13,8 @@ import { Dispatch } from '../types/redux/actions';
  */
 function mapStateToProps(state: State) {
 	return {
-		version: state.version.version
+		version: state.version.version,
+		baseHelpUrl: state.admin.defaultHelpUrl
 	};
 }
 

src/client/app/containers/admin/PreferencesContainer.ts

@@ -22,7 +22,8 @@ import {
 	updateDefaultMeterMaximumDate,
 	updateDefaultMeterReadingGap,
 	updateDefaultMeterMaximumErrors,
-	updateDefaultMeterDisableChecks
+	updateDefaultMeterDisableChecks,
+	updateDefaultHelpUrl
 } from '../../actions/admin';
 import { State } from '../../types/redux/state';
 import { Dispatch } from '../../types/redux/actions';
@@ -49,7 +50,8 @@ function mapStateToProps(state: State) {
 		defaultMeterMaximumDate: state.admin.defaultMeterMaximumDate,
 		defaultMeterReadingGap: state.admin.defaultMeterReadingGap,
 		defaultMeterMaximumErrors: state.admin.defaultMeterMaximumErrors,
-		defaultMeterDisableChecks: state.admin.defaultMeterDisableChecks
+		defaultMeterDisableChecks: state.admin.defaultMeterDisableChecks,
+		defaultHelpUrl: state.admin.defaultHelpUrl
 	};
 }
 
@@ -73,7 +75,8 @@ function mapDispatchToProps(dispatch: Dispatch) {
 		updateDefaultMeterMaximumDate: (defaultMeterMaximumDate: string) => dispatch(updateDefaultMeterMaximumDate(defaultMeterMaximumDate)),
 		updateDefaultMeterReadingGap: (defaultMeterReadingGap: number) => dispatch(updateDefaultMeterReadingGap(defaultMeterReadingGap)),
 		updateDefaultMeterMaximumErrors: (defaultMeterMaximumErrors: number) => dispatch(updateDefaultMeterMaximumErrors(defaultMeterMaximumErrors)),
-		updateDefaultMeterDisableChecks: (defaultMeterDisableChecks: boolean) => dispatch(updateDefaultMeterDisableChecks(defaultMeterDisableChecks))
+		updateDefaultMeterDisableChecks: (defaultMeterDisableChecks: boolean) => dispatch(updateDefaultMeterDisableChecks(defaultMeterDisableChecks)),
+		updateDefaultHelpUrl: (defaultHelpUrl: string) => dispatch(updateDefaultHelpUrl(defaultHelpUrl))
 	};
 }
 

src/client/app/reducers/admin.ts

@@ -31,7 +31,8 @@ const defaultState: AdminState = {
 	defaultMeterMaximumDate: moment(0).utc().add(5000, 'years').format('YYYY-MM-DD HH:mm:ssZ'),
 	defaultMeterReadingGap: 0,
 	defaultMeterMaximumErrors: 75,
-	defaultMeterDisableChecks: false
+	defaultMeterDisableChecks: false,
+	defaultHelpUrl: ''
 };
 
 export default function admin(state = defaultState, action: AdminAction) {
@@ -108,7 +109,8 @@ export default function admin(state = defaultState, action: AdminAction) {
 				defaultMeterMaximumDate: action.data.defaultMeterMaximumDate,
 				defaultMeterReadingGap: action.data.defaultMeterReadingGap,
 				defaultMeterMaximumErrors: action.data.defaultMeterMaximumErrors,
-				defaultMeterDisableChecks: action.data.defaultMeterDisableChecks
+				defaultMeterDisableChecks: action.data.defaultMeterDisableChecks,
+				defaultHelpUrl: action.data.defaultHelpUrl
 			};
 		case ActionType.MarkPreferencesNotSubmitted:
 			return {
@@ -187,6 +189,12 @@ export default function admin(state = defaultState, action: AdminAction) {
 				defaultMeterDisableChecks: action.defaultMeterDisableChecks,
 				submitted: false
 			}
+		case ActionType.UpdateDefaultHelpUrl:
+			return {
+				...state,
+				defaultHelpUrl: action.defaultHelpUrl,
+				submitted: false
+			}
 		default:
 			return state;
 	}

src/client/app/translations/data.js

@@ -124,6 +124,7 @@ const localeData = {
 		"default.site.title": "Default Site Title",
 		"default.warning.file.size": "Default Warning File Size",
 		"default.file.size.limit": "Default File Size Limit",
+		"default.help.url": "Help URL",
 		"default.time.zone": "Default Time Zone",
 		"default.meter.minimum.value": "Default meter minimum reading value check",
 		"default.meter.maximum.value": "Default meter maximum reading value check",
@@ -593,6 +594,7 @@ const localeData = {
 		"default.site.title": "Titre du Site par Défaut",
 		"default.warning.file.size": "Taille du fichier d'avertissement par défaut",
 		"default.file.size.limit": "Limite de taille de fichier par défaut",
+		"default.help.url": "(Need French) Help URL",
 		"default.time.zone": "Zona Horaria Predeterminada",
 		"default.meter.minimum.value": "(Need French) Default meter minimum reading value check",
 		"default.meter.maximum.value": "(Need French) Default meter maximum reading value check",
@@ -1062,6 +1064,7 @@ const localeData = {
 		"default.site.title": "Título del Sitio Predeterminado",
 		"default.warning.file.size": "Tamaño de Archivo por Defecto de Advertencia",
 		"default.file.size.limit": "El límite de Archivo por Defecto de Tamaño",
+		"default.help.url": "(Need Spanish) Help URL",
 		"default.time.zone": "Fuseau Horaire par Défaut",
 		"default.meter.minimum.value": "(Need Spanish) Default meter minimum reading value check",
 		"default.meter.maximum.value": "(Need Spanish) Default meter maximum reading value check",

src/client/app/types/items.ts

@@ -54,6 +54,7 @@ export interface PreferenceRequestItem {
 	defaultMeterReadingGap: number;
 	defaultMeterMaximumErrors: number;
 	defaultMeterDisableChecks: boolean;
+	defaultHelpUrl: string;
 }
 
 /**

src/client/app/types/redux/actions.ts

@@ -100,6 +100,7 @@ export enum ActionType {
 	UpdateDefaultMeterReadingGap = 'UPDATE_DEFAULT_METER_READING_GAP',
 	UpdateDefaultMeterMaximumErrors = 'UPDATE_DEFAULT_METER_MAXIMUM_ERRORS',
 	UpdateDefaultMeterDisableChecks = 'UPDATE_DEFAULT_METER_DISABLE_CHECKS',
+	UpdateDefaultHelpUrl = 'UPDATE_DEFAULT_HELP_URL',
 
 	UpdateSelectedLanguage = 'UPDATE_SELECTED_LANGUAGE',