Skip to content

Commit

Permalink
Saving work
Browse files Browse the repository at this point in the history
  • Loading branch information
@abailly-akamai
abailly-akamai committed Feb 7, 2024
1 parent 165b5bf commit c95b9f1
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 49 deletions.
90 changes: 42 additions & 48 deletions packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const getLinodeIPv6Ranges = (
);
};

const LinodeNetworkingIPTransferPanel = (props: Props) => {
export const IPTransfer = (props: Props) => {
const { linodeId, onClose, open, readOnly } = props;
const theme = useTheme();
const { mutateAsync: assignAddresses } = useAssignAdressesMutation();
Expand All @@ -100,10 +100,16 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {

const { data: _ips } = useLinodeIPsQuery(linodeId);

const publicIPs = _ips?.ipv4.public.map((i) => i.address) ?? [];
const privateIPs = _ips?.ipv4.private.map((i) => i.address) ?? [];
const publicIPv4Addresses = _ips?.ipv4.public.map((i) => i.address) ?? [];
const privateIPv4Addresses = _ips?.ipv4.private.map((i) => i.address) ?? [];
const ipv6Addresses =
_ips?.ipv6?.global.map((i) => `${i.range}/${i.prefix}`) ?? [];

const ipAddresses = [...publicIPs, ...privateIPs];
const ipAddresses = [
...publicIPv4Addresses,
...privateIPv4Addresses,
...ipv6Addresses,
];

const [ips, setIPs] = React.useState<IPRowState>(
ipAddresses.reduce(
Expand Down Expand Up @@ -252,30 +258,18 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
];

return (
<Grid container key={state.sourceIP} spacing={2} sx={{ width: '100%' }}>
<Grid container key={state.sourceIP} spacing={2} xs={12}>
<Grid
sx={{
alignItems: 'center',
display: 'flex',
[theme.breakpoints.down('sm')]: {
width: '100%',
},
}}
md={3}
xs={12}
>
<Typography
sx={{
marginTop: 0,
[theme.breakpoints.up('sm')]: {
width: 175,
},
width: '100%',
}}
variant="body1"
>
{state.sourceIP}
</Typography>
<Typography>{state.sourceIP}</Typography>
</Grid>
<StyledAudoGrid>
<StyledAutoGrid md={3} xs={12}>
<Select
textFieldProps={{
dataAttrs: {
Expand All @@ -299,7 +293,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
overflowPortal
placeholder="Select Action"
/>
</StyledAudoGrid>
</StyledAutoGrid>
{renderLinodeSelect && renderLinodeSelect(state as Move)}
{renderIPSelect && renderIPSelect(state as Swap)}
</Grid>
Expand All @@ -316,7 +310,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
});

return (
<StyledAudoGrid xs={12}>
<StyledAutoGrid md={3} xs={12}>
<Select
textFieldProps={{
dataAttrs: {
Expand All @@ -336,7 +330,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
overflowPortal
value={defaultLinode}
/>
</StyledAudoGrid>
</StyledAutoGrid>
);
};

Expand All @@ -350,7 +344,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
});

return (
<StyledAudoGrid xs={12}>
<StyledAutoGrid md={3} xs={12}>
<Select
textFieldProps={{
dataAttrs: {
Expand All @@ -367,7 +361,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
overflowPortal
value={defaultIP}
/>
</StyledAudoGrid>
</StyledAutoGrid>
);
};

Expand Down Expand Up @@ -474,7 +468,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
the DNS records.
</Typography>
</Grid>
<Grid container spacing={2} xs={12}>
<Grid container xs={12}>
{!isLoading && !ipv6RangesLoading && ipv6RangesError ? (
<Notice
text={'There was an error loading IPv6 Ranges'}
Expand Down Expand Up @@ -509,8 +503,8 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
<Typography>Actions</Typography>
</Grid>
</Grid>
<Grid sx={{ paddingTop: 0 }} xs={12}>
<Divider spacingBottom={0} />
<Grid xs={12}>
<Divider />
</Grid>
{linodes.length === 0 && searchText === '' ? (
<Typography
Expand All @@ -523,33 +517,35 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
with which to transfer IPs.
</Typography>
) : (
<Grid container spacing={2} sx={{ width: '100%' }}>
<Grid spacing={2} sx={{ width: '100%' }}>
{Object.values(ips).map(ipRow)}
</Grid>
)}
</>
)}
</Grid>
<ActionsPanel
primaryButtonProps={{
'data-testid': 'ip-transfer-save',
disabled: readOnly || linodes.length === 0,
label: 'Save',
loading: submitting,
onClick: onSubmit,
}}
secondaryButtonProps={{
'data-testid': 'ip-transfer-reset',
disabled: submitting || linodes.length === 0,
label: 'Reset Form',
onClick: onReset,
}}
/>
<Grid container justifyContent="flex-end" xs={12}>
<ActionsPanel
primaryButtonProps={{
'data-testid': 'ip-transfer-save',
disabled: readOnly || linodes.length === 0,
label: 'Save',
loading: submitting,
onClick: onSubmit,
}}
secondaryButtonProps={{
'data-testid': 'ip-transfer-reset',
disabled: submitting || linodes.length === 0,
label: 'Reset Form',
onClick: onReset,
}}
/>
</Grid>
</Dialog>
);
};

const StyledAudoGrid = styled(Grid, { label: 'StyledAutoGrid' })(
const StyledAutoGrid = styled(Grid, { label: 'StyledAutoGrid' })(
({ theme }) => ({
minWidth: 175,
[theme.breakpoints.up('sm')]: {
Expand Down Expand Up @@ -636,5 +632,3 @@ const createRequestData = (state: IPRowState, region: string) => ({
assignments: Object.values(state).reduce(stateToAssignmentsReducer, []),
region,
});

export default LinodeNetworkingIPTransferPanel;
2 changes: 1 addition & 1 deletion packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { DeleteRangeDialog } from './DeleteRangeDialog';
import { EditIPRDNSDrawer } from './EditIPRDNSDrawer';
import { EditRangeRDNSDrawer } from './EditRangeRDNSDrawer';
import IPSharing from './IPSharing';
import IPTransfer from './IPTransfer';
import { IPTransfer } from './IPTransfer';
import { IPAddressRowHandlers, LinodeIPAddressRow } from './LinodeIPAddressRow';
import {
StyledRootGrid,
Expand Down

0 comments on commit c95b9f1

Please sign in to comment.