daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix install types and test ids

Browse Source
This commit is contained in:
Ildar Kamalov
2025-01-24 15:15:07 +03:00
parent 681cdb023e
commit 9d5042b1f0
11 changed files with 97 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/helpers/helpers.tsx
View File

@@ -28,7 +28,7 @@ import {
THEMES,
} from './constants';
import { LOCAL_STORAGE_KEYS, LocalStorageHelper } from './localStorageHelper';
import { DhcpInterface } from '../initialState';
import { DhcpInterface, InstallInterface } from '../initialState';
/**
* @param time {string} The time to format
@@ -217,9 +217,9 @@ export const getInterfaceIp = (option: any) => {
return interfaceIP;
};
export const getIpList = (interfaces: DhcpInterface[]) =>
export const getIpList = (interfaces: InstallInterface[]) =>
Object.values(interfaces)
.reduce((acc: string[], curr: DhcpInterface) => acc.concat(curr.ip_addresses), [] as string[])
.reduce((acc: string[], curr: InstallInterface) => acc.concat(curr.ip_addresses), [] as string[])
.sort();
/**

16
client/src/initialState.ts
View File

@@ -9,6 +9,14 @@ import {
import { DEFAULT_BLOCKING_IPV4, DEFAULT_BLOCKING_IPV6 } from './reducers/dnsConfig';
import { Filter } from './helpers/helpers';
export type InstallInterface = {
flags: string;
hardware_address: string;
ip_addresses: string[];
mtu: number;
name: string;
};
export type InstallData = {
step: number;
processingDefault: boolean;
@@ -31,13 +39,7 @@ export type InstallData = {
ip: string;
error: string;
};
interfaces: {
flags: string;
hardware_address: string;
ip_addresses: string[];
mtu: number;
name: string;
}[];
interfaces: InstallInterface[];
dnsVersion: string;
};

4
client/src/install/Setup/AddressList.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { getIpList, getDnsAddress, getWebAddress } from '../../helpers/helpers';
import { ALL_INTERFACES_IP } from '../../helpers/constants';
import { DhcpInterface } from '../../initialState';
import { InstallInterface } from '../../initialState';
interface renderItemProps {
ip: string;
@@ -28,7 +28,7 @@ const renderItem = ({ ip, port, isDns }: renderItemProps) => {
};
interface AddressListProps {
interfaces: DhcpInterface[];
interfaces: InstallInterface[];
address: string;
port: number;
isDns?: boolean;

3
client/src/install/Setup/Auth.tsx
View File

@@ -60,6 +60,7 @@ export const Auth = ({ onAuthSubmit }: Props) => {
<Input
{...field}
type="text"
data-testid="install_username"
label={t('install_auth_username')}
placeholder={t('install_auth_username_enter')}
error={fieldState.error?.message}
@@ -83,6 +84,7 @@ export const Auth = ({ onAuthSubmit }: Props) => {
<Input
{...field}
type="password"
data-testid="install_password"
label={t('install_auth_password')}
placeholder={t('install_auth_password_enter')}
error={fieldState.error?.message}
@@ -106,6 +108,7 @@ export const Auth = ({ onAuthSubmit }: Props) => {
<Input
{...field}
type="password"
data-testid="install_confirm_password"
label={t('install_auth_confirm')}
placeholder={t('install_auth_confirm')}
error={fieldState.error?.message}

29
client/src/install/Setup/Controls.tsx
View File

@@ -32,6 +32,7 @@ class Controls extends Component<ControlsProps> {
case 3:
return (
<button
data-testid="install_back"
type="button"
className="btn btn-secondary btn-lg setup__button"
onClick={this.props.prevStep}>
@@ -44,24 +45,16 @@ class Controls extends Component<ControlsProps> {
}
renderNextButton(step: any) {
const {
nextStep,
invalid,
pristine,
install,
ip,
port,
} = this.props;
const { nextStep, invalid, pristine, install, ip, port } = this.props;
switch (step) {
case 1:
return (
<button type="button" className="btn btn-success btn-lg setup__button" onClick={nextStep}>
<button
data-testid="install_get_started"
type="button"
className="btn btn-success btn-lg setup__button"
onClick={nextStep}>
<Trans>get_started</Trans>
</button>
);
@@ -69,6 +62,7 @@ class Controls extends Component<ControlsProps> {
case 3:
return (
<button
data-testid="install_next"
type="submit"
className="btn btn-success btn-lg setup__button"
disabled={invalid || pristine || install.processingSubmit}>
@@ -77,13 +71,18 @@ class Controls extends Component<ControlsProps> {
);
case 4:
return (
<button type="button" className="btn btn-success btn-lg setup__button" onClick={nextStep}>
<button
data-testid="install_next"
type="button"
className="btn btn-success btn-lg setup__button"
onClick={nextStep}>
<Trans>next</Trans>
</button>
);
case 5:
return (
<button
data-testid="install_open_dashboard"
type="button"
className="btn btn-success btn-lg setup__button"
onClick={() => this.props.openDashboard(ip, port)}>

21
client/src/install/Setup/Devices.tsx
View File

@@ -1,22 +1,21 @@
import React from 'react';
import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow';
import { Trans } from 'react-i18next';
import Guide from '../../components/ui/Guide';
import Controls from './Controls';
import AddressList from './AddressList';
import { DhcpInterface } from '../../initialState';
import { InstallInterface } from '../../initialState';
import { DnsConfig } from './Settings';
interface DevicesProps {
interfaces: DhcpInterface[];
dnsIp: string;
dnsPort: number;
}
type Props = {
interfaces: InstallInterface[];
dnsConfig: DnsConfig;
};
const Devices = ({ interfaces, dnsIp, dnsPort }: DevicesProps) => (
export const Devices = ({ interfaces, dnsConfig }: Props) => (
<div className="setup__step">
<div className="setup__group">
<div className="setup__subtitle">
@@ -31,7 +30,7 @@ const Devices = ({ interfaces, dnsIp, dnsPort }: DevicesProps) => (
</div>
<div className="mt-1">
<AddressList interfaces={interfaces} address={dnsIp} port={dnsPort} isDns />
<AddressList interfaces={interfaces} address={dnsConfig.ip} port={dnsConfig.port} isDns />
</div>
</div>
@@ -41,5 +40,3 @@ const Devices = ({ interfaces, dnsIp, dnsPort }: DevicesProps) => (
<Controls />
</div>
);
export default flow([withTranslation()])(Devices);

12
client/src/install/Setup/Progress.tsx
View File

@@ -1,21 +1,19 @@
import React from 'react';
import { Trans, withTranslation } from 'react-i18next';
import { Trans } from 'react-i18next';
import { INSTALL_TOTAL_STEPS } from '../../helpers/constants';
const getProgressPercent = (step: any) => (step / INSTALL_TOTAL_STEPS) * 100;
const getProgressPercent = (step: number) => (step / INSTALL_TOTAL_STEPS) * 100;
type Props = {
step: number;
};
const Progress = (props: Props) => (
export const Progress = ({ step }: Props) => (
<div className="setup__progress">
<Trans>install_step</Trans> {props.step}/{INSTALL_TOTAL_STEPS}
<Trans>install_step</Trans> {step}/{INSTALL_TOTAL_STEPS}
<div className="setup__progress-wrap">
<div className="setup__progress-inner" style={{ width: `${getProgressPercent(props.step)}%` }} />
<div className="setup__progress-inner" style={{ width: `${getProgressPercent(step)}%` }} />
</div>
</div>
);
export default withTranslation()(Progress);

43
client/src/install/Setup/Settings.tsx
View File

@@ -19,7 +19,7 @@ import {
} from '../../helpers/constants';
import { validateRequiredValue } from '../../helpers/validators';
import { DhcpInterface } from '../../initialState';
import { InstallInterface } from '../../initialState';
import { Input } from '../../components/ui/Controls/Input';
import { Select } from '../../components/ui/Controls/Select';
import { toNumber } from '../../helpers/form';
@@ -31,12 +31,27 @@ const validateInstallPort = (value: number) => {
return undefined;
};
export type WebConfig = {
ip: string;
port: number;
};
export type DnsConfig = {
ip: string;
port: number;
};
export type SettingsFormValues = {
web: WebConfig;
dns: DnsConfig;
};
type StaticIpType = {
ip: string;
static: string;
};
type ConfigType = {
export type ConfigType = {
web: {
ip: string;
port?: number;
@@ -53,17 +68,17 @@ type ConfigType = {
};
type Props = {
handleSubmit: (data: any) => void;
handleChange?: (...args: unknown[]) => unknown;
handleFix: (web: any, dns: any, set_static_ip: boolean) => void;
validateForm: (data: any) => void;
handleSubmit: (data: SettingsFormValues) => void;
handleChange?: (data: SettingsFormValues) => unknown;
handleFix: (web: WebConfig, dns: DnsConfig, set_static_ip: boolean) => void;
validateForm: (data: SettingsFormValues) => void;
config: ConfigType;
interfaces: DhcpInterface[];
interfaces: InstallInterface[];
initialValues?: object;
};
const renderInterfaces = (interfaces: DhcpInterface[]) =>
Object.values(interfaces).map((option: DhcpInterface) => {
const renderInterfaces = (interfaces: InstallInterface[]) =>
Object.values(interfaces).map((option: InstallInterface) => {
const { name, ip_addresses, flags } = option;
if (option && ip_addresses?.length > 0) {
@@ -99,7 +114,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
watch,
handleSubmit: reactHookFormSubmit,
formState: { isValid },
} = useForm({
} = useForm<SettingsFormValues>({
defaultValues,
mode: 'onBlur',
});
@@ -235,7 +250,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
name="web.ip"
control={control}
render={({ field }) => (
<Select {...field}>
<Select {...field} data-testid="install_web_ip">
<option value={ALL_INTERFACES_IP}>
{t('install_settings_all_interfaces')}
</option>
@@ -264,6 +279,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
<Input
{...field}
type="number"
data-testid="install_web_port"
placeholder={STANDARD_WEB_PORT.toString()}
error={fieldState.error?.message}
onChange={(e) => {
@@ -283,6 +299,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
{isWebFixAvailable && (
<button
type="button"
data-testid="install_web_fix"
className="btn btn-secondary btn-sm ml-2"
onClick={() => handleAutofix('web')}>
<Trans>fix</Trans>
@@ -323,7 +340,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
name="dns.ip"
control={control}
render={({ field }) => (
<Select {...field}>
<Select {...field} data-testid="install_dns_ip">
<option value={ALL_INTERFACES_IP}>
{t('install_settings_all_interfaces')}
</option>
@@ -353,6 +370,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
<Input
{...field}
type="number"
data-testid="install_dns_port"
error={fieldState.error?.message}
placeholder={STANDARD_WEB_PORT.toString()}
onChange={(e) => {
@@ -373,6 +391,7 @@ export const Settings = ({ handleSubmit, handleFix, validateForm, config, interf
{isDnsFixAvailable && (
<button
type="button"
data-testid="install_dns_fix"
className="btn btn-secondary btn-sm ml-2"
onClick={() => handleAutofix('dns')}>
<Trans>fix</Trans>

22
client/src/install/Setup/Submit.tsx
View File

@@ -1,20 +1,16 @@
import React from 'react';
import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow';
import { Trans } from 'react-i18next';
import Controls from './Controls';
import { WebConfig } from './Settings';
interface SubmitProps {
webIp: string;
webPort: number;
handleSubmit: (...args: unknown[]) => string;
pristine: boolean;
submitting: boolean;
openDashboard: (...args: unknown[]) => unknown;
}
type Props = {
webConfig: WebConfig;
openDashboard: (ip: string, port: number) => void;
};
const Submit = (props: SubmitProps) => (
export const Submit = ({ openDashboard, webConfig }: Props) => (
<div className="setup__step">
<div className="setup__group">
<h1 className="setup__title">
@@ -26,8 +22,6 @@ const Submit = (props: SubmitProps) => (
</p>
</div>
<Controls openDashboard={props.openDashboard} ip={props.webIp} port={props.webPort} />
<Controls openDashboard={openDashboard} ip={webConfig.ip} port={webConfig.port} />
</div>
);
export default flow([withTranslation()])(Submit);

25
client/src/install/Setup/index.tsx
View File

@@ -9,10 +9,10 @@ import { INSTALL_TOTAL_STEPS, ALL_INTERFACES_IP, DEBOUNCE_TIMEOUT } from '../../
import Loading from '../../components/ui/Loading';
import Greeting from './Greeting';
import { Settings } from './Settings';
import Devices from './Devices';
import Submit from './Submit';
import Progress from './Progress';
import { ConfigType, DnsConfig, Settings, WebConfig } from './Settings';
import { Devices } from './Devices';
import { Submit } from './Submit';
import { Progress } from './Progress';
import { Auth } from './Auth';
import Toasts from '../../components/Toasts';
import Footer from '../../components/ui/Footer';
@@ -21,11 +21,12 @@ import { Logo } from '../../components/ui/svg/logo';
import './Setup.css';
import '../../components/ui/Tabler.css';
import { InstallInterface, InstallState } from '../../initialState';
const Setup = () => {
export const Setup = () => {
const dispatch = useDispatch();
const install = useSelector((state: any) => state.install);
const install = useSelector((state: InstallState) => state.install);
const { processingDefault, step, web, dns, staticIp, interfaces } = install;
useEffect(() => {
@@ -55,11 +56,11 @@ const Setup = () => {
}
}, DEBOUNCE_TIMEOUT);
const handleFix = (web: any, dns: any, set_static_ip: any) => {
const handleFix = (web: WebConfig, dns: DnsConfig, set_static_ip: boolean) => {
dispatch(actionCreators.checkConfig({ web, dns, set_static_ip }));
};
const openDashboard = (ip: any, port: any) => {
const openDashboard = (ip: string, port: number) => {
let address = getWebAddress(ip, port);
if (ip === ALL_INTERFACES_IP) {
address = getWebAddress(window.location.hostname, port);
@@ -73,7 +74,7 @@ const Setup = () => {
}
};
const renderPage = (step: any, config: any, interfaces: any) => {
const renderPage = (step: number, config: ConfigType, interfaces: InstallInterface[]) => {
switch (step) {
case 1:
return <Greeting />;
@@ -91,9 +92,9 @@ const Setup = () => {
case 3:
return <Auth onAuthSubmit={handleFormSubmit} />;
case 4:
return <Devices interfaces={interfaces} dnsIp={dns.ip} dnsPort={dns.port} />;
return <Devices interfaces={interfaces} dnsConfig={dns} />;
case 5:
return <Submit openDashboard={openDashboard} webIp={web.ip} webPort={web.port} />;
return <Submit openDashboard={openDashboard} webConfig={web} />;
default:
return false;
}
@@ -121,5 +122,3 @@ const Setup = () => {
</>
);
};
export default Setup;

2
client/src/install/index.tsx
View File

@@ -8,7 +8,7 @@ import configureStore from '../configureStore';
import reducers from '../reducers/install';
import '../i18n';
import Setup from './Setup';
import { Setup } from './Setup';
import { InstallState } from '../initialState';
const store = configureStore<InstallState>(reducers, {});