style(striker-ui): re-run prettier across all sources

main
Tsu-ba-me 3 years ago
parent 8c60aaaf5f
commit 072680f9b3
  1. 4
      striker-ui/components/AnvilDrawer.tsx
  2. 8
      striker-ui/components/Anvils/Anvil.tsx
  3. 6
      striker-ui/components/Anvils/AnvilList.tsx
  4. 4
      striker-ui/components/Bars/AllocationBar.tsx
  5. 4
      striker-ui/components/Bars/ProgressBar.tsx
  6. 6
      striker-ui/components/Decorator.tsx
  7. 6
      striker-ui/components/Display/FullSize.tsx
  8. 4
      striker-ui/components/Domain.tsx
  9. 4
      striker-ui/components/FileSystem/FileSystemsHost.tsx
  10. 6
      striker-ui/components/Files/FileInfo.tsx
  11. 8
      striker-ui/components/Files/FileList.tsx
  12. 7
      striker-ui/components/Hosts/AnvilHost.tsx
  13. 11
      striker-ui/components/MessageBox.tsx
  14. 6
      striker-ui/components/Network/Network.tsx
  15. 6
      striker-ui/components/Panels/InnerPanel.tsx
  16. 4
      striker-ui/components/Panels/InnerPanelHeader.tsx
  17. 4
      striker-ui/components/Panels/Panel.tsx
  18. 34
      striker-ui/components/Resource/ResourceVolumes.tsx
  19. 4
      striker-ui/components/Resource/index.tsx
  20. 20
      striker-ui/components/Servers.tsx
  21. 11
      striker-ui/components/SharedStorage/SharedStorageHost.tsx
  22. 4
      striker-ui/components/Spinner.tsx
  23. 6
      striker-ui/components/Text/HeaderText.tsx
  24. 6
      striker-ui/lib/consts/UPLOAD_FILE_TYPES.ts
  25. 4
      striker-ui/lib/create_emotion_cache/createEmotionCache.ts
  26. 5
      striker-ui/lib/fetchers/fetchJSON.ts
  27. 5
      striker-ui/lib/fetchers/putFetch.ts
  28. 7
      striker-ui/lib/sanitizers/hostsSanitizer.ts
  29. 4
      striker-ui/pages/_app.tsx
  30. 4
      striker-ui/pages/file-manager/index.tsx

@ -45,8 +45,7 @@ interface DrawerProps {
setOpen: Dispatch<SetStateAction<boolean>>;
}
const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
return (
const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => (
<StyledDrawer
BackdropProps={{ invisible: true }}
anchor="left"
@ -102,6 +101,5 @@ const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
</div>
</StyledDrawer>
);
};
export default AnvilDrawer;

@ -1,15 +1,11 @@
import { BodyText } from '../Text';
import anvilState from '../../lib/consts/ANVILS';
const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
return (
const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => (
<>
<BodyText text={anvil.anvil_name} />
<BodyText
text={anvilState.get(anvil.anvil_state) || 'State unavailable'}
/>
<BodyText text={anvilState.get(anvil.anvil_state) || 'State unavailable'} />
</>
);
};
export default Anvil;

@ -75,8 +75,7 @@ const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
className={classes.root}
aria-label="mailbox folders"
>
{sortAnvils(list).map((anvil) => {
return (
{sortAnvils(list).map((anvil) => (
<>
<Divider className={classes.divider} />
<ListItem
@ -95,8 +94,7 @@ const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
</Box>
</ListItem>
</>
);
})}
))}
</List>
</StyledDiv>
);

@ -39,8 +39,7 @@ const StyledDiv = styled('div')(() => ({
const breakpointWarning = 70;
const breakpointAlert = 90;
const AllocationBar = ({ allocated }: { allocated: number }): JSX.Element => {
return (
const AllocationBar = ({ allocated }: { allocated: number }): JSX.Element => (
<StyledDiv>
<BorderLinearProgress
classes={{
@ -62,6 +61,5 @@ const AllocationBar = ({ allocated }: { allocated: number }): JSX.Element => {
/>
</StyledDiv>
);
};
export default AllocationBar;

@ -32,8 +32,7 @@ const ProgressBar = ({
progressPercentage,
}: {
progressPercentage: number;
}): JSX.Element => {
return (
}): JSX.Element => (
<StyledDiv>
<BorderLinearProgress
classes={{
@ -52,6 +51,5 @@ const ProgressBar = ({
/>
</StyledDiv>
);
};
export default ProgressBar;

@ -40,8 +40,8 @@ const StyledDiv = styled('div')(() => ({
export type Colours = 'ok' | 'off' | 'error' | 'warning';
const Decorator = ({ colour }: { colour: Colours }): JSX.Element => {
return <StyledDiv className={classes[colour]} />;
};
const Decorator = ({ colour }: { colour: Colours }): JSX.Element => (
<StyledDiv className={classes[colour]} />
);
export default Decorator;

@ -219,8 +219,7 @@ const FullSize = ({
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
>
{keyCombinations.map(({ keys, scans }) => {
return (
{keyCombinations.map(({ keys, scans }) => (
<MenuItem
onClick={() => handleSendKeys(scans)}
className={classes.keysItem}
@ -228,8 +227,7 @@ const FullSize = ({
>
<Typography variant="subtitle1">{keys}</Typography>
</MenuItem>
);
})}
))}
</Menu>
</Box>
</Box>

@ -1,12 +1,10 @@
import { Panel } from './Panels';
import { HeaderText } from './Text';
const Domain = (): JSX.Element => {
return (
const Domain = (): JSX.Element => (
<Panel>
<HeaderText text="Domain Settings" />
</Panel>
);
};
export default Domain;

@ -34,8 +34,7 @@ const SharedStorageHost = ({
host,
}: {
host: AnvilFileSystemHost;
}): JSX.Element => {
return (
}): JSX.Element => (
<StyledDiv>
<Box display="flex" width="100%" className={classes.fs}>
<Box flexGrow={1}>
@ -84,6 +83,5 @@ const SharedStorageHost = ({
)}
</StyledDiv>
);
};
export default SharedStorageHost;

@ -117,13 +117,11 @@ const FileInfo = (
}}
>
{UPLOAD_FILE_TYPES_ARRAY.map(
([fileTypeKey, [, fileTypeDisplayString]]) => {
return (
([fileTypeKey, [, fileTypeDisplayString]]) => (
<StyledMenuItem key={fileTypeKey} value={fileTypeKey}>
{fileTypeDisplayString}
</StyledMenuItem>
);
},
),
)}
</StyledSelect>
</FormControl>

@ -10,8 +10,7 @@ type FileListProps = {
filesOverview: FileOverviewMetadata[];
};
const FileList = ({ filesOverview }: FileListProps): JSX.Element => {
return (
const FileList = ({ filesOverview }: FileListProps): JSX.Element => (
<List>
{filesOverview.map(
({ fileChecksum, fileName, fileSizeInBytes, fileType, fileUUID }) => {
@ -51,9 +50,7 @@ const FileList = ({ filesOverview }: FileListProps): JSX.Element => {
marginRight: '.5em',
}}
/>
<BodyText
text={UPLOAD_FILE_TYPES.get(fileType)?.[1] ?? ''}
/>
<BodyText text={UPLOAD_FILE_TYPES.get(fileType)?.[1] ?? ''} />
</Box>
<BodyText text={fileSize} />
</Box>
@ -79,6 +76,5 @@ const FileList = ({ filesOverview }: FileListProps): JSX.Element => {
)}
</List>
);
};
export default FileList;

@ -86,10 +86,10 @@ const AnvilHost = ({
<StyledBox>
{hosts &&
hosts.map(
(host): JSX.Element => {
(host): JSX.Element =>
// Temporary fix: avoid crash when encounter undefined host entry by returning a blank element.
// TODO: figure out why there are undefined host entries.
return host ? (
host ? (
<InnerPanel key={host.host_uuid}>
<InnerPanelHeader>
<Box display="flex" width="100%" className={classes.header}>
@ -169,8 +169,7 @@ const AnvilHost = ({
</InnerPanel>
) : (
<></>
);
},
),
)}
</StyledBox>
);

@ -64,9 +64,8 @@ const StyledBox = styled(Box)({
});
const MessageBox = ({ type, text }: MessageBoxProps): JSX.Element => {
const buildMessageBoxClasses = (messageBoxType: MessageBoxType) => {
return MESSAGE_BOX_CLASSES[messageBoxType];
};
const buildMessageBoxClasses = (messageBoxType: MessageBoxType) =>
MESSAGE_BOX_CLASSES[messageBoxType];
const buildMessageIcon = (messageBoxType: MessageBoxType) => {
let messageIcon;
@ -85,9 +84,9 @@ const MessageBox = ({ type, text }: MessageBoxProps): JSX.Element => {
return messageIcon;
};
const buildMessage = (message: string, messageBoxType: MessageBoxType) => {
return <BodyText inverted={messageBoxType === 'info'} text={message} />;
};
const buildMessage = (message: string, messageBoxType: MessageBoxType) => (
<BodyText inverted={messageBoxType === 'info'} text={message} />
);
return (
<StyledBox className={buildMessageBoxClasses(type)}>

@ -81,8 +81,7 @@ const Network = (): JSX.Element => {
{!isLoading ? (
<Box className={classes.container}>
{data &&
processed.bonds.map((bond: ProcessedBond) => {
return (
processed.bonds.map((bond: ProcessedBond) => (
<>
<Box
display="flex"
@ -128,8 +127,7 @@ const Network = (): JSX.Element => {
</Box>
<Divider className={classes.divider} />
</>
);
})}
))}
</Box>
) : (
<Spinner />

@ -18,8 +18,8 @@ type Props = {
children: ReactNode;
};
const InnerPanel = ({ children }: Props): JSX.Element => {
return <StyledBox>{children}</StyledBox>;
};
const InnerPanel = ({ children }: Props): JSX.Element => (
<StyledBox>{children}</StyledBox>
);
export default InnerPanel;

@ -32,13 +32,11 @@ type Props = {
children: ReactNode;
};
const InnerPanelHeader = ({ children }: Props): JSX.Element => {
return (
const InnerPanelHeader = ({ children }: Props): JSX.Element => (
<StyledBox>
<div className={classes.header} />
{children}
</StyledBox>
);
};
export default InnerPanelHeader;

@ -71,8 +71,7 @@ const styledScrollbars = (
/>
);
const Panel = ({ children }: PanelProps): JSX.Element => {
return (
const Panel = ({ children }: PanelProps): JSX.Element => (
<StyledDiv>
{styledScrollbars}
<div className={`${classes.square} ${classes.topSquare}`} />
@ -80,6 +79,5 @@ const Panel = ({ children }: PanelProps): JSX.Element => {
<div className={classes.paper}>{children}</div>
</StyledDiv>
);
};
export default Panel;

@ -71,12 +71,10 @@ const ResourceVolumes = ({
resource,
}: {
resource: AnvilReplicatedStorage;
}): JSX.Element => {
return (
}): JSX.Element => (
<StyledBox>
{resource &&
resource.volumes.map((volume) => {
return (
resource.volumes.map((volume) => (
<InnerPanel key={volume.drbd_device_minor}>
<InnerPanelHeader>
<Box display="flex" width="100%" className={classes.header}>
@ -93,8 +91,7 @@ const ResourceVolumes = ({
</Box>
</InnerPanelHeader>
{volume.connections.map(
(connection, index): JSX.Element => {
return (
(connection, index): JSX.Element => (
<>
<Box
key={connection.fencing}
@ -104,26 +101,16 @@ const ResourceVolumes = ({
>
<Box className={classes.decoratorBox}>
<Decorator
colour={selectDecorator(
connection.connection_state,
)}
colour={selectDecorator(connection.connection_state)}
/>
</Box>
<Box>
<Box display="flex" width="100%">
<BodyText
text={connection.targets[0].target_name}
/>
<BodyText text={connection.targets[0].target_name} />
<InsertLinkIcon style={{ color: DIVIDER }} />
<BodyText
text={connection.targets[1].target_name}
/>
<BodyText text={connection.targets[1].target_name} />
</Box>
<Box
display="flex"
justifyContent="center"
width="100%"
>
<Box display="flex" justifyContent="center" width="100%">
<BodyText text={connection.connection_state} />
</Box>
</Box>
@ -132,14 +119,11 @@ const ResourceVolumes = ({
<Divider className={classes.divider} />
) : null}
</>
);
},
),
)}
</InnerPanel>
);
})}
))}
</StyledBox>
);
};
export default ResourceVolumes;

@ -6,13 +6,11 @@ const Resource = ({
resource,
}: {
resource: AnvilReplicatedStorage;
}): JSX.Element => {
return (
}): JSX.Element => (
<Panel>
<HeaderText text={`Resource: ${resource.resource_name}`} />
<ResourceVolumes resource={resource} />
</Panel>
);
};
export default Resource;

@ -261,8 +261,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
>
{buttonLabels.current.map((label: ButtonLabels) => {
return (
{buttonLabels.current.map((label: ButtonLabels) => (
<ServerActionButtonMenuItem
onClick={() => handlePower(label)}
key={label}
@ -274,8 +273,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
{label.replace(/^[a-z]/, (c) => c.toUpperCase())}
</ServerActionButtonMenuItemLabel>
</ServerActionButtonMenuItem>
);
})}
))}
</Menu>
</Box>
</Box>
@ -311,8 +309,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
{!isLoading ? (
<Box className={classes.root}>
<List component="nav">
{data?.servers.map((server: AnvilServer) => {
return (
{data?.servers.map((server: AnvilServer) => (
<>
<ListItem
button
@ -329,9 +326,8 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
style={{ color: TEXT }}
color="secondary"
checked={
selected.find(
(s) => s === server.server_uuid,
) !== undefined
selected.find((s) => s === server.server_uuid) !==
undefined
}
/>
</Box>
@ -367,8 +363,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
<BodyText
text={host.host_name}
selected={
server.server_host_uuid ===
host.host_uuid
server.server_host_uuid === host.host_uuid
}
/>
</Box>
@ -386,8 +381,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
</ListItem>
<Divider className={classes.divider} />
</>
);
})}
))}
</List>
</Box>
) : (

@ -33,8 +33,7 @@ const SharedStorageHost = ({
group,
}: {
group: AnvilSharedStorageGroup;
}): JSX.Element => {
return (
}): JSX.Element => (
<StyledDiv>
<Box display="flex" width="100%" className={classes.fs}>
<Box flexGrow={1}>
@ -68,16 +67,12 @@ const SharedStorageHost = ({
</Box>
<Box display="flex" justifyContent="center" width="100%">
<BodyText
text={`Total Storage: ${prettyBytes.default(
group.storage_group_total,
{
text={`Total Storage: ${prettyBytes.default(group.storage_group_total, {
binary: true,
},
)}`}
})}`}
/>
</Box>
</StyledDiv>
);
};
export default SharedStorageHost;

@ -19,12 +19,10 @@ const StyledDiv = styled('div')(() => ({
},
}));
const Spinner = (): JSX.Element => {
return (
const Spinner = (): JSX.Element => (
<StyledDiv>
<CircularProgress variant="indeterminate" className={classes.spinner} />
</StyledDiv>
);
};
export default Spinner;

@ -6,8 +6,8 @@ const WhiteTypography = styled(Typography)({
color: TEXT,
});
const HeaderText = ({ text }: { text: string }): JSX.Element => {
return <WhiteTypography variant="h4">{text}</WhiteTypography>;
};
const HeaderText = ({ text }: { text: string }): JSX.Element => (
<WhiteTypography variant="h4">{text}</WhiteTypography>
);
export default HeaderText;

@ -5,7 +5,5 @@ export const UPLOAD_FILE_TYPES_ARRAY: ReadonlyArray<
['other', ['text/plain', 'Other file type']],
['script', ['text/plain', 'Script (program)']],
];
export const UPLOAD_FILE_TYPES: ReadonlyMap<
FileType,
[string, string]
> = new Map(UPLOAD_FILE_TYPES_ARRAY);
export const UPLOAD_FILE_TYPES: ReadonlyMap<FileType, [string, string]> =
new Map(UPLOAD_FILE_TYPES_ARRAY);

@ -1,8 +1,6 @@
import { EmotionCache } from '@emotion/react';
import createCache from '@emotion/cache';
const createEmotionCache = (): EmotionCache => {
return createCache({ key: 'css' });
};
const createEmotionCache = (): EmotionCache => createCache({ key: 'css' });
export default createEmotionCache;

@ -1,5 +1,4 @@
const fetchJSON = <T>(...args: [RequestInfo, RequestInit?]): Promise<T> => {
return fetch(...args).then((response: Response) => response.json());
};
const fetchJSON = <T>(...args: [RequestInfo, RequestInit?]): Promise<T> =>
fetch(...args).then((response: Response) => response.json());
export default fetchJSON;

@ -1,12 +1,11 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
const putFetch = <T>(uri: string, data: T): Promise<any> => {
return fetch(uri, {
const putFetch = <T>(uri: string, data: T): Promise<any> =>
fetch(uri, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
};
export default putFetch;

@ -1,7 +1,4 @@
const hostsSanitizer = (
data: Array<AnvilStatusHost>,
): Array<AnvilStatusHost> => {
return data?.filter((host) => host.host_uuid);
};
const hostsSanitizer = (data: Array<AnvilStatusHost>): Array<AnvilStatusHost> =>
data?.filter((host) => host.host_uuid);
export default hostsSanitizer;

@ -17,8 +17,7 @@ const App = ({
Component,
emotionCache = clientSideEmotionCache,
pageProps,
}: MyAppProps): JSX.Element => {
return (
}: MyAppProps): JSX.Element => (
<CacheProvider value={emotionCache}>
<ThemeProvider theme={theme}>
<Component
@ -28,6 +27,5 @@ const App = ({
</ThemeProvider>
</CacheProvider>
);
};
export default App;

@ -3,8 +3,7 @@ import Head from 'next/head';
import Files from '../../components/Files';
import Header from '../../components/Header';
const FileManager = (): JSX.Element => {
return (
const FileManager = (): JSX.Element => (
<>
<Head>
<title>File Manager</title>
@ -13,6 +12,5 @@ const FileManager = (): JSX.Element => {
<Files />
</>
);
};
export default FileManager;

Loading…
Cancel
Save