From a25488f43dd27953a8ac9b567a269fbd5c49e7f3 Mon Sep 17 00:00:00 2001 From: gotti <18141824+gotti@users.noreply.github.com> Date: Sat, 14 Feb 2026 14:16:16 +0900 Subject: [PATCH 1/2] fix a problem connectiondetail save button is not working Signed-off-by: gotti <18141824+gotti@users.noreply.github.com> --- .../ConnectionDetail/ConnectionDetail.tsx | 166 +++++++++--------- 1 file changed, 83 insertions(+), 83 deletions(-) diff --git a/src/pages/Connection/ConnectionDetail/ConnectionDetail.tsx b/src/pages/Connection/ConnectionDetail/ConnectionDetail.tsx index e64b393..d8471c2 100644 --- a/src/pages/Connection/ConnectionDetail/ConnectionDetail.tsx +++ b/src/pages/Connection/ConnectionDetail/ConnectionDetail.tsx @@ -1,4 +1,4 @@ -import React, { Dispatch, SetStateAction, useEffect, useState } from 'react' +import React, {Dispatch, SetStateAction, useEffect, useState} from 'react' import { Button, CardContent, @@ -17,9 +17,9 @@ import { TunnelEndPointRouterIPTemplateData, } from '../../../interface' import classes from './ConnectionDialog.module.scss' -import { enqueueSnackbar, useSnackbar } from 'notistack' -import { Update } from '../../../api/Connection' -import { Open } from '../../../components/Dashboard/Open/Open' +import {enqueueSnackbar, useSnackbar} from 'notistack' +import {Update} from '../../../api/Connection' +import {Open} from '../../../components/Dashboard/Open/Open' import { StyledButton1, StyledCardRoot3, @@ -34,25 +34,25 @@ import { GetConnectionWithTemplate, GetServiceWithTemplate, } from '../../../api/Tool' -import { useRecoilState, useRecoilValue } from 'recoil' -import { TemplateState } from '../../../api/Recoil' +import {useRecoilState, useRecoilValue} from 'recoil' +import {TemplateState} from '../../../api/Recoil' import Dashboard from '../../../components/Dashboard/Dashboard' -import { Get, Put } from '../../../api/Connection' -import { useNavigate, useParams } from 'react-router-dom' -import { GenServiceCode } from '../../../components/Tool' +import {Get, Put} from '../../../api/Connection' +import {useNavigate, useParams} from 'react-router-dom' +import {GenServiceCode} from '../../../components/Tool' export default function ConnectionDetail() { const template = useRecoilValue(TemplateState) const [reload, setReload] = useState(true) const [connection, setConnection] = useState(DefaultConnectionDetailData) - const { enqueueSnackbar } = useSnackbar() - const { id } = useParams() + const {enqueueSnackbar} = useSnackbar() + const {id} = useParams() useEffect(() => { if (reload) { Get(Number(id)).then((res) => { if (res.error !== '') { - enqueueSnackbar('' + res.error, { variant: 'error' }) + enqueueSnackbar('' + res.error, {variant: 'error'}) return } setConnection(res.data) @@ -100,8 +100,8 @@ export function ConnectionOpenButton(props: { lock: boolean setReload: Dispatch> }) { - const { connection, lock, setReload } = props - const { enqueueSnackbar } = useSnackbar() + const {connection, lock, setReload} = props + const {enqueueSnackbar} = useSnackbar() // Update Service Information const updateInfo = (open: boolean) => { @@ -110,9 +110,9 @@ export function ConnectionOpenButton(props: { connection.tunnel_endpoint_router_ip = undefined Update(connection).then((res) => { if (res.error === '') { - enqueueSnackbar('Request Success', { variant: 'success' }) + enqueueSnackbar('Request Success', {variant: 'success'}) } else { - enqueueSnackbar(String(res.error), { variant: 'error' }) + enqueueSnackbar(String(res.error), {variant: 'error'}) } setReload(true) @@ -149,16 +149,16 @@ export function ConnectionOpen(props: { connection: ConnectionDetailData setReload: Dispatch> }) { - const { connection, setReload } = props + const {connection: original_connection, setReload} = props const [template] = useRecoilState(TemplateState) - const [connectionCopy, setConnectionCopy] = useState(connection) + const [connection, setConnection] = useState(original_connection) const [lock, setLock] = React.useState(true) const clickLockInfo = () => { setLock(!lock) } const resetAction = () => { - setConnectionCopy(connection) + setConnection(original_connection) setLock(true) } const updateInfo = () => { @@ -166,9 +166,9 @@ export function ConnectionOpen(props: { connection.tunnel_endpoint_router_ip = undefined Update(connection).then((res) => { if (res.error === '') { - enqueueSnackbar('Request Success', { variant: 'success' }) + enqueueSnackbar('Request Success', {variant: 'success'}) } else { - enqueueSnackbar(String(res.error), { variant: 'error' }) + enqueueSnackbar(String(res.error), {variant: 'error'}) } setReload(true) @@ -182,14 +182,14 @@ export function ConnectionOpen(props: {
@@ -198,10 +198,10 @@ export function ConnectionOpen(props: { labelId="bgp_router_hostname" id="bgp_router_hostname" label="BGP Router" - value={connectionCopy.bgp_router_id ?? 0} + value={connection.bgp_router_id ?? 0} onChange={(event) => - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, bgp_router_id: Number(event.target.value), }) } @@ -227,10 +227,10 @@ export function ConnectionOpen(props: { labelId="tunnel_endpoint_router_ip" id="tunnel_endpoint_router_ip" label="Tunnel EndPoint Router IP" - value={connectionCopy.tunnel_endpoint_router_ip_id ?? 0} + value={connection.tunnel_endpoint_router_ip_id ?? 0} onChange={(event) => - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, tunnel_endpoint_router_ip_id: Number(event.target.value), }) } @@ -273,7 +273,7 @@ export function ConnectionOpen(props: { @@ -289,7 +289,7 @@ export function ConnectionOpenVPN(props: { setConnection: Dispatch> lock: boolean }) { - const { connection, setConnection, lock } = props + const {connection, setConnection, lock} = props if (connection.connection_type === '') { return null @@ -306,7 +306,7 @@ export function ConnectionOpenVPN(props: { value={connection.term_ip ?? ''} variant="outlined" onChange={(event) => { - setConnection({ ...connection, term_ip: event.target.value }) + setConnection({...connection, term_ip: event.target.value}) }} />
@@ -319,7 +319,7 @@ export function ConnectionOpenL3User(props: { setConnection: Dispatch> lock: boolean }) { - const { connection, setConnection, lock } = props + const {connection, setConnection, lock} = props const template = useRecoilValue(TemplateState) if ( @@ -342,7 +342,7 @@ export function ConnectionOpenL3User(props: { value={connection.link_v4_our ?? ''} variant="outlined" onChange={(event) => { - setConnection({ ...connection, link_v4_our: event.target.value }) + setConnection({...connection, link_v4_our: event.target.value}) }} /> { - setConnection({ ...connection, link_v4_your: event.target.value }) + setConnection({...connection, link_v4_your: event.target.value}) }} />
@@ -369,7 +369,7 @@ export function ConnectionOpenL3User(props: { value={connection.link_v6_our ?? ''} variant="outlined" onChange={(event) => { - setConnection({ ...connection, link_v6_our: event.target.value }) + setConnection({...connection, link_v6_our: event.target.value}) }} /> { - setConnection({ ...connection, link_v6_your: event.target.value }) + setConnection({...connection, link_v6_your: event.target.value}) }} /> ) } -export function ConnectionStatus(props: { connection: ConnectionDetailData }) { - const { connection } = props +export function ConnectionStatus(props: {connection: ConnectionDetailData}) { + const {connection} = props const serviceCode = GenServiceCode(connection) const createDate = '作成日: ' + connection.CreatedAt const updateDate = '更新日: ' + connection.UpdatedAt @@ -463,8 +463,8 @@ export function ConnectionStatus(props: { connection: ConnectionDetailData }) { ) } -export function ConnectionEtc(props: { connection: ConnectionDetailData }) { - const { connection } = props +export function ConnectionEtc(props: {connection: ConnectionDetailData}) { + const {connection} = props const navigate = useNavigate() const clickGroupPage = () => navigate('/dashboard/group/' + connection.service?.group_id) @@ -516,8 +516,8 @@ export function ConnectionEtc(props: { connection: ConnectionDetailData }) { ) } -export function ConnectionMonitorDisplay(props: { monitor: boolean }) { - const { monitor } = props +export function ConnectionMonitorDisplay(props: {monitor: boolean}) { + const {monitor} = props if (monitor) { return @@ -528,7 +528,7 @@ export function ConnectionMonitorDisplay(props: { monitor: boolean }) { export function ConnectionUserDisplay(props: { connection: ConnectionDetailData }) { - const { connection } = props + const {connection} = props const distinctionIPAssign = (our: boolean) => { if (our) { @@ -653,28 +653,28 @@ export function ConnectionEtc2(props: { connection: ConnectionDetailData setReload: Dispatch> }) { - const { connection, setReload } = props + const {connection: original_connection, setReload} = props const [lock, setLockInfo] = React.useState(true) - const [connectionCopy, setConnectionCopy] = useState(connection) - const { enqueueSnackbar } = useSnackbar() + const [connection, setConnection] = useState(original_connection) + const {enqueueSnackbar} = useSnackbar() const template = useRecoilValue(TemplateState) const clickLockInfo = () => { setLockInfo(!lock) } const resetAction = () => { - setConnectionCopy(connection) + setConnection(original_connection) setLockInfo(true) } // Update Group Information const updateInfo = () => { - Put(connection.ID, connectionCopy).then((res) => { + Put(connection.ID, connection).then((res) => { if (res.error === '') { - enqueueSnackbar('Request Success', { variant: 'success' }) + enqueueSnackbar('Request Success', {variant: 'success'}) setLockInfo(true) } else { - enqueueSnackbar(String(res.error), { variant: 'error' }) + enqueueSnackbar(String(res.error), {variant: 'error'}) } setReload(true) @@ -712,12 +712,12 @@ export function ConnectionEtc2(props: { id="connection_type" aria-label="gender" onChange={(event) => { - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, connection_type: event.target.value, }) }} - value={connectionCopy.connection_type} + value={connection.connection_type} inputProps={{ readOnly: lock, }} @@ -745,12 +745,12 @@ export function ConnectionEtc2(props: { label="IPv4 BGP広報経路" aria-label="gender" onChange={(event) => { - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, ipv4_route: event.target.value, }) }} - value={connectionCopy.ipv4_route ?? ''} + value={connection.ipv4_route ?? ''} inputProps={{ readOnly: lock, }} @@ -777,12 +777,12 @@ export function ConnectionEtc2(props: { label="IPv6 BGP広報経路" aria-label="gender" onChange={(event) => { - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, ipv6_route: event.target.value, }) }} - value={connectionCopy.ipv6_route ?? ''} + value={connection.ipv6_route ?? ''} inputProps={{ readOnly: lock, }} @@ -809,12 +809,12 @@ export function ConnectionEtc2(props: { }} variant="outlined" onChange={(event) => { - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, address: event.target.value, }) }} - value={connectionCopy.address ?? ''} + value={connection.address ?? ''} /> @@ -826,12 +826,12 @@ export function ConnectionEtc2(props: { id="preferred_ap" aria-label="gender" onChange={(event) => { - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, preferred_ap: event.target.value, }) }} - value={connectionCopy.preferred_ap ?? ''} + value={connection.preferred_ap ?? ''} inputProps={{ readOnly: lock, }} @@ -853,12 +853,12 @@ export function ConnectionEtc2(props: { id="ntt" aria-label="gender" onChange={(event) => { - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, ntt: event.target.value, }) }} - value={connectionCopy.ntt ?? ''} + value={connection.ntt ?? ''} inputProps={{ readOnly: lock, }} @@ -883,12 +883,12 @@ export function ConnectionEtc2(props: { id="monitor" aria-label="gender" onChange={(event) => { - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, monitor: Number(event.target.value) === 1, }) }} - value={connectionCopy.monitor ? 1 : 0} + value={connection.monitor ? 1 : 0} inputProps={{ readOnly: lock, }} @@ -914,12 +914,12 @@ export function ConnectionEtc2(props: { id="ix" aria-label="ix" onChange={(event) => { - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, ix: event.target.value, }) }} - value={connectionCopy.ix ?? ''} + value={connection.ix ?? ''} inputProps={{ readOnly: lock, }} @@ -943,12 +943,12 @@ export function ConnectionEtc2(props: { id="ix_peer_type" aria-label="ix_peer_type" onChange={(event) => { - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, ix_peer_type: event.target.value, }) }} - value={connectionCopy.ix_peer_type ?? ''} + value={connection.ix_peer_type ?? ''} inputProps={{ readOnly: lock, }} @@ -975,12 +975,12 @@ export function ConnectionEtc2(props: { }} variant="outlined" onChange={(event) => { - setConnectionCopy({ - ...connectionCopy, + setConnection({ + ...connection, ix_vlan_id: event.target.value, }) }} - value={connectionCopy.ix_vlan_id ?? ''} + value={connection.ix_vlan_id ?? ''} /> From ffb585ece9cd0892cf68ff343327607ec6be1869 Mon Sep 17 00:00:00 2001 From: gotti <18141824+gotti@users.noreply.github.com> Date: Sat, 14 Feb 2026 14:17:28 +0900 Subject: [PATCH 2/2] revert formatter Signed-off-by: gotti <18141824+gotti@users.noreply.github.com> --- .../ConnectionDetail/ConnectionDetail.tsx | 74 +++++++++---------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/src/pages/Connection/ConnectionDetail/ConnectionDetail.tsx b/src/pages/Connection/ConnectionDetail/ConnectionDetail.tsx index d8471c2..9d5ab6b 100644 --- a/src/pages/Connection/ConnectionDetail/ConnectionDetail.tsx +++ b/src/pages/Connection/ConnectionDetail/ConnectionDetail.tsx @@ -1,4 +1,4 @@ -import React, {Dispatch, SetStateAction, useEffect, useState} from 'react' +import React, { Dispatch, SetStateAction, useEffect, useState } from 'react' import { Button, CardContent, @@ -17,9 +17,9 @@ import { TunnelEndPointRouterIPTemplateData, } from '../../../interface' import classes from './ConnectionDialog.module.scss' -import {enqueueSnackbar, useSnackbar} from 'notistack' -import {Update} from '../../../api/Connection' -import {Open} from '../../../components/Dashboard/Open/Open' +import { enqueueSnackbar, useSnackbar } from 'notistack' +import { Update } from '../../../api/Connection' +import { Open } from '../../../components/Dashboard/Open/Open' import { StyledButton1, StyledCardRoot3, @@ -34,25 +34,25 @@ import { GetConnectionWithTemplate, GetServiceWithTemplate, } from '../../../api/Tool' -import {useRecoilState, useRecoilValue} from 'recoil' -import {TemplateState} from '../../../api/Recoil' +import { useRecoilState, useRecoilValue } from 'recoil' +import { TemplateState } from '../../../api/Recoil' import Dashboard from '../../../components/Dashboard/Dashboard' -import {Get, Put} from '../../../api/Connection' -import {useNavigate, useParams} from 'react-router-dom' -import {GenServiceCode} from '../../../components/Tool' +import { Get, Put } from '../../../api/Connection' +import { useNavigate, useParams } from 'react-router-dom' +import { GenServiceCode } from '../../../components/Tool' export default function ConnectionDetail() { const template = useRecoilValue(TemplateState) const [reload, setReload] = useState(true) const [connection, setConnection] = useState(DefaultConnectionDetailData) - const {enqueueSnackbar} = useSnackbar() - const {id} = useParams() + const { enqueueSnackbar } = useSnackbar() + const { id } = useParams() useEffect(() => { if (reload) { Get(Number(id)).then((res) => { if (res.error !== '') { - enqueueSnackbar('' + res.error, {variant: 'error'}) + enqueueSnackbar('' + res.error, { variant: 'error' }) return } setConnection(res.data) @@ -100,8 +100,8 @@ export function ConnectionOpenButton(props: { lock: boolean setReload: Dispatch> }) { - const {connection, lock, setReload} = props - const {enqueueSnackbar} = useSnackbar() + const { connection, lock, setReload } = props + const { enqueueSnackbar } = useSnackbar() // Update Service Information const updateInfo = (open: boolean) => { @@ -110,9 +110,9 @@ export function ConnectionOpenButton(props: { connection.tunnel_endpoint_router_ip = undefined Update(connection).then((res) => { if (res.error === '') { - enqueueSnackbar('Request Success', {variant: 'success'}) + enqueueSnackbar('Request Success', { variant: 'success' }) } else { - enqueueSnackbar(String(res.error), {variant: 'error'}) + enqueueSnackbar(String(res.error), { variant: 'error' }) } setReload(true) @@ -149,7 +149,7 @@ export function ConnectionOpen(props: { connection: ConnectionDetailData setReload: Dispatch> }) { - const {connection: original_connection, setReload} = props + const { connection: original_connection, setReload } = props const [template] = useRecoilState(TemplateState) const [connection, setConnection] = useState(original_connection) const [lock, setLock] = React.useState(true) @@ -166,9 +166,9 @@ export function ConnectionOpen(props: { connection.tunnel_endpoint_router_ip = undefined Update(connection).then((res) => { if (res.error === '') { - enqueueSnackbar('Request Success', {variant: 'success'}) + enqueueSnackbar('Request Success', { variant: 'success' }) } else { - enqueueSnackbar(String(res.error), {variant: 'error'}) + enqueueSnackbar(String(res.error), { variant: 'error' }) } setReload(true) @@ -289,7 +289,7 @@ export function ConnectionOpenVPN(props: { setConnection: Dispatch> lock: boolean }) { - const {connection, setConnection, lock} = props + const { connection, setConnection, lock } = props if (connection.connection_type === '') { return null @@ -306,7 +306,7 @@ export function ConnectionOpenVPN(props: { value={connection.term_ip ?? ''} variant="outlined" onChange={(event) => { - setConnection({...connection, term_ip: event.target.value}) + setConnection({ ...connection, term_ip: event.target.value }) }} />
@@ -319,7 +319,7 @@ export function ConnectionOpenL3User(props: { setConnection: Dispatch> lock: boolean }) { - const {connection, setConnection, lock} = props + const { connection, setConnection, lock } = props const template = useRecoilValue(TemplateState) if ( @@ -342,7 +342,7 @@ export function ConnectionOpenL3User(props: { value={connection.link_v4_our ?? ''} variant="outlined" onChange={(event) => { - setConnection({...connection, link_v4_our: event.target.value}) + setConnection({ ...connection, link_v4_our: event.target.value }) }} /> { - setConnection({...connection, link_v4_your: event.target.value}) + setConnection({ ...connection, link_v4_your: event.target.value }) }} />
@@ -369,7 +369,7 @@ export function ConnectionOpenL3User(props: { value={connection.link_v6_our ?? ''} variant="outlined" onChange={(event) => { - setConnection({...connection, link_v6_our: event.target.value}) + setConnection({ ...connection, link_v6_our: event.target.value }) }} /> { - setConnection({...connection, link_v6_your: event.target.value}) + setConnection({ ...connection, link_v6_your: event.target.value }) }} /> ) } -export function ConnectionStatus(props: {connection: ConnectionDetailData}) { - const {connection} = props +export function ConnectionStatus(props: { connection: ConnectionDetailData }) { + const { connection } = props const serviceCode = GenServiceCode(connection) const createDate = '作成日: ' + connection.CreatedAt const updateDate = '更新日: ' + connection.UpdatedAt @@ -463,8 +463,8 @@ export function ConnectionStatus(props: {connection: ConnectionDetailData}) { ) } -export function ConnectionEtc(props: {connection: ConnectionDetailData}) { - const {connection} = props +export function ConnectionEtc(props: { connection: ConnectionDetailData }) { + const { connection } = props const navigate = useNavigate() const clickGroupPage = () => navigate('/dashboard/group/' + connection.service?.group_id) @@ -516,8 +516,8 @@ export function ConnectionEtc(props: {connection: ConnectionDetailData}) { ) } -export function ConnectionMonitorDisplay(props: {monitor: boolean}) { - const {monitor} = props +export function ConnectionMonitorDisplay(props: { monitor: boolean }) { + const { monitor } = props if (monitor) { return @@ -528,7 +528,7 @@ export function ConnectionMonitorDisplay(props: {monitor: boolean}) { export function ConnectionUserDisplay(props: { connection: ConnectionDetailData }) { - const {connection} = props + const { connection } = props const distinctionIPAssign = (our: boolean) => { if (our) { @@ -653,10 +653,10 @@ export function ConnectionEtc2(props: { connection: ConnectionDetailData setReload: Dispatch> }) { - const {connection: original_connection, setReload} = props + const { connection: original_connection, setReload } = props const [lock, setLockInfo] = React.useState(true) const [connection, setConnection] = useState(original_connection) - const {enqueueSnackbar} = useSnackbar() + const { enqueueSnackbar } = useSnackbar() const template = useRecoilValue(TemplateState) const clickLockInfo = () => { @@ -671,10 +671,10 @@ export function ConnectionEtc2(props: { const updateInfo = () => { Put(connection.ID, connection).then((res) => { if (res.error === '') { - enqueueSnackbar('Request Success', {variant: 'success'}) + enqueueSnackbar('Request Success', { variant: 'success' }) setLockInfo(true) } else { - enqueueSnackbar(String(res.error), {variant: 'error'}) + enqueueSnackbar(String(res.error), { variant: 'error' }) } setReload(true)