frontend: input field variants

the default config for some components have changed, so standard variant had to be specified
flatcar · Dec 19, 2024 · aabfe8a · aabfe8a
1 parent 874ef2b
commit aabfe8a
Show file tree

Hide file tree

Showing 17 changed files with 101 additions and 36 deletions.
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
   addons: [
     '@storybook/addon-links',
@@ -12,6 +12,8 @@ module.exports = {
     options: {}
   },
 
+  staticDirs: ['../public'],
+
   docs: {
     autodocs: true
   }

diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
@@ -3,6 +3,7 @@ import themesConf from '../src/lib/themes';
 import { StylesProvider } from '@mui/styles';
 import '../src/i18n/config';
 import ThemeProviderNexti18n from '../src/i18n/ThemeProviderNexti18n';
+import { StyledEngineProvider } from '@mui/material/styles';
 
 const darkTheme = themesConf['dark'];
 const lightTheme = themesConf['light'];
@@ -12,9 +13,11 @@ const withThemeProvider = (Story, context) => {
   const theme = backgroundColor !== 'dark' ? lightTheme : darkTheme;
 
   const ourThemeProvider = (
-    <ThemeProviderNexti18n theme={theme}>
-      <Story {...context} />
-    </ThemeProviderNexti18n>
+    <StyledEngineProvider injectFirst>
+      <ThemeProviderNexti18n theme={theme}>
+        <Story {...context} />
+      </ThemeProviderNexti18n>
+    </StyledEngineProvider>
   );
   if (process.env.NODE_ENV !== 'test') {
     return ourThemeProvider;

diff --git a/frontend/package.json b/frontend/package.json
@@ -97,8 +97,8 @@
     "lint:fix": "eslint -c package.json --fix 'src/**/*.{js,jsx,ts,tsx}'",
     "i18n": "npx --no-install i18next ./src/**/ts* ./src/**/**/*.ts* ./src/**/**/**/*.ts* -c ./src/i18n/i18next-parser.config.js",
     "tsc": "tsc",
-    "storybook": "storybook dev -p 6006 -s public",
-    "build-storybook": "storybook build -s public"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "browserslist": {
     "production": [

diff --git a/frontend/src/components/Activity/ActivityContainer.tsx b/frontend/src/components/Activity/ActivityContainer.tsx
@@ -17,10 +17,13 @@ const useStyles = makeStyles({
   toolbar: {
     padding: 0,
   },
-  caption: {
+  select: {
     fontSize: '.85em',
   },
-  select: {
+  selectLabel: {
+    fontSize: '.85em',
+  },
+  displayedRows: {
     fontSize: '.85em',
   },
 });
@@ -102,6 +105,8 @@ function Container() {
     return entries;
   }
 
+  console.log(classes);
+
   return (
     <>
       <ListHeader title={t('activity|Activity')} />

diff --git a/frontend/src/components/Applications/ApplicationEdit.tsx b/frontend/src/components/Applications/ApplicationEdit.tsx
@@ -75,6 +75,7 @@ export default function ApplicationEdit(props: ApplicationEditProps) {
           <Field
             name="name"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('frequent|Name')}
             type="text"
@@ -84,6 +85,7 @@ export default function ApplicationEdit(props: ApplicationEditProps) {
           <Field
             name="product_id"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('frequent|Product ID')}
             type="text"
@@ -93,6 +95,7 @@ export default function ApplicationEdit(props: ApplicationEditProps) {
           <Field
             name="description"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('frequent|Description')}
             type="text"
@@ -102,6 +105,7 @@ export default function ApplicationEdit(props: ApplicationEditProps) {
             <Field
               type="text"
               name="appToClone"
+              variant="standard"
               label={t('applications|Groups/Channels')}
               select
               helperText={t(

diff --git a/frontend/src/components/Channels/ChannelAvatar.tsx b/frontend/src/components/Channels/ChannelAvatar.tsx
@@ -22,5 +22,5 @@ const useStyles = makeStyles((theme: Theme) => ({
 export default function ChannelAvatar(props: ChannelAvatarProps) {
   const classes = useStyles(props);
 
-  return <Avatar className={classes.colorAvatar}>{props.children || ''}</Avatar>;
+  return <Avatar className={classes.colorAvatar}>{props.children || ' '}</Avatar>;
 }
diff --git a/frontend/src/components/Channels/ChannelEdit.tsx b/frontend/src/components/Channels/ChannelEdit.tsx
@@ -186,6 +186,7 @@ export default function ChannelEdit(props: ChannelEditProps) {
                 <Field
                   name="name"
                   component={TextField}
+                  variant="standard"
                   margin="dense"
                   label={t('frequent|Name')}
                   InputLabelProps={{ shrink: true }}
@@ -199,8 +200,8 @@ export default function ChannelEdit(props: ChannelEditProps) {
               </Grid>
             </Grid>
           </Grid>
-          <FormControl variant="standard" margin="dense" disabled={!isCreation} fullWidth>
-            <InputLabel>Architecture</InputLabel>
+          <FormControl margin="dense" disabled={!isCreation} fullWidth>
+            <InputLabel variant="standard">Architecture</InputLabel>
             <MuiSelect
               variant="standard"
               value={arch}

diff --git a/frontend/src/components/Groups/GroupEditDialog/GroupDetailsForm.tsx b/frontend/src/components/Groups/GroupEditDialog/GroupDetailsForm.tsx
@@ -22,6 +22,7 @@ export default function GroupDetailsForm(props: GroupDetailsFormProps) {
           <Field
             name="name"
             component={TextField}
+            variant="standard"
             margin="dense"
             label="Name"
             required
@@ -30,11 +31,14 @@ export default function GroupDetailsForm(props: GroupDetailsFormProps) {
           />
         </Grid>
         <Grid item xs={4}>
-          <FormControl variant="standard" margin="dense" fullWidth>
-            <InputLabel shrink>{t('groups|Channel')}</InputLabel>
+          <FormControl margin="dense" fullWidth>
+            <InputLabel variant="standard" shrink>
+              {t('groups|Channel')}
+            </InputLabel>
             <Field
               name="channel"
               component={Select}
+              variant="standard"
               displayEmpty
               defaultValue={values.channel}
               onChange={(e: any) => {
@@ -56,6 +60,7 @@ export default function GroupDetailsForm(props: GroupDetailsFormProps) {
           <Field
             name="track"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('groups|Track (identifier for clients, filled with the group ID if omitted)')}
             fullWidth
@@ -66,6 +71,7 @@ export default function GroupDetailsForm(props: GroupDetailsFormProps) {
           <Field
             name="description"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('groups|Description')}
             fullWidth

diff --git a/frontend/src/components/Groups/GroupEditDialog/GroupPolicyForm.tsx b/frontend/src/components/Groups/GroupEditDialog/GroupPolicyForm.tsx
@@ -125,6 +125,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
               <Field
                 name="maxUpdates"
                 component={TextField}
+                variant="standard"
                 label={t('groups|Max number of updates')}
                 margin="dense"
                 type="number"
@@ -143,6 +144,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
               <Field
                 name="updatesPeriodRange"
                 component={TextField}
+                variant="standard"
                 margin="dense"
                 type="number"
                 fullWidth
@@ -156,6 +158,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
               <Field
                 name="updatesPeriodUnit"
                 component={TextField}
+                variant="standard"
                 margin="dense"
                 select
                 fullWidth
@@ -182,6 +185,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
                 <Field
                   name="updatesTimeout"
                   component={TextField}
+                  variant="standard"
                   margin="dense"
                   type="number"
                   defaultValue={values.updatesTimeout}
@@ -193,6 +197,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
                   <Field
                     name="updatesTimeoutUnit"
                     component={TextField}
+                    variant="standard"
                     margin="dense"
                     select
                     fullWidth

diff --git a/frontend/src/components/Instances/Details.tsx b/frontend/src/components/Instances/Details.tsx
@@ -250,6 +250,7 @@ function EditDialog(props: EditDialogProps) {
           <Field
             name="name"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('instances|Name')}
             type="text"

diff --git a/frontend/src/components/Instances/List.tsx b/frontend/src/components/Instances/List.tsx
@@ -78,12 +78,11 @@ function InstanceFilter(props: InstanceFilterProps) {
     <Box pr={2}>
       <Grid container spacing={2} justifyContent="flex-end">
         <Grid item xs={5}>
-          <FormControl variant="standard" fullWidth disabled={props.disabled}>
-            <InputLabel htmlFor="select-status" shrink>
+          <FormControl fullWidth disabled={props.disabled}>
+            <InputLabel variant="standard" htmlFor="select-status" shrink>
               {t('instances|Filter Status')}
             </InputLabel>
             <Select
-              variant="standard"
               onChange={(event: any) => changeFilter('status', event.target.value)}
               input={<Input id="select-status" />}
               renderValue={(selected: any) =>
@@ -107,12 +106,11 @@ function InstanceFilter(props: InstanceFilterProps) {
           </FormControl>
         </Grid>
         <Grid item xs={5}>
-          <FormControl variant="standard" fullWidth disabled={props.disabled}>
-            <InputLabel htmlFor="select-versions" shrink>
+          <FormControl fullWidth disabled={props.disabled}>
+            <InputLabel variant="standard" htmlFor="select-versions" shrink>
               {t('instances|Filter Version')}
             </InputLabel>
             <Select
-              variant="standard"
               onChange={(event: SelectChangeEvent<string>) =>
                 changeFilter('version', event.target.value)
               }
@@ -419,7 +417,7 @@ function ListView(props: { application: Application; group: Group }) {
                 </Box>
               </Grid>
               <Grid item>
-                <InputLabel htmlFor="instance-search-filter" shrink>
+                <InputLabel variant="standard" htmlFor="instance-search-filter" shrink>
                   {t('frequent|Search')}
                 </InputLabel>
                 <SearchInput

diff --git a/frontend/src/components/Packages/EditDialog.tsx b/frontend/src/components/Packages/EditDialog.tsx
@@ -141,8 +141,8 @@ function EditDialog(props: EditDialogProps) {
           )}
           <Grid container justifyContent="space-between">
             <Grid item>
-              <FormControl variant="standard" margin="dense" className={classes.topSelect}>
-                <InputLabel>Type</InputLabel>
+              <FormControl margin="dense" className={classes.topSelect}>
+                <InputLabel variant="standard">Type</InputLabel>
                 <MuiSelect
                   variant="standard"
                   value={packageType}
@@ -159,13 +159,12 @@ function EditDialog(props: EditDialogProps) {
             </Grid>
             <Grid item>
               <FormControl
-                variant="standard"
                 margin="dense"
                 fullWidth
                 className={classes.topSelect}
                 disabled={!isCreation}
               >
-                <InputLabel>{t('packages|Architecture')}</InputLabel>
+                <InputLabel variant="standard">{t('packages|Architecture')}</InputLabel>
                 <MuiSelect variant="standard" value={arch} onChange={handleArchChange}>
                   {Object.keys(ARCHES).map((key: string) => {
                     const archName = ARCHES[parseInt(key)];
@@ -191,6 +190,7 @@ function EditDialog(props: EditDialogProps) {
                       <Field
                         name="url"
                         component={TextField}
+                        variant="standard"
                         margin="dense"
                         label={t('packages|URL')}
                         type="url"
@@ -200,6 +200,7 @@ function EditDialog(props: EditDialogProps) {
                       <Field
                         name="filename"
                         component={TextField}
+                        variant="standard"
                         margin="dense"
                         label={t('packages|Filename')}
                         type="text"
@@ -209,6 +210,7 @@ function EditDialog(props: EditDialogProps) {
                       <Field
                         name="description"
                         component={TextField}
+                        variant="standard"
                         margin="dense"
                         label={t('packages|Description')}
                         type="text"
@@ -220,6 +222,7 @@ function EditDialog(props: EditDialogProps) {
                           <Field
                             name="version"
                             component={TextField}
+                            variant="standard"
                             margin="dense"
                             label={t('packages|Version')}
                             type="text"
@@ -232,6 +235,7 @@ function EditDialog(props: EditDialogProps) {
                           <Field
                             name="size"
                             component={TextField}
+                            variant="standard"
                             margin="dense"
                             label={t('packages|Size')}
                             type="number"
@@ -244,6 +248,7 @@ function EditDialog(props: EditDialogProps) {
                       <Field
                         name="hash"
                         component={TextField}
+                        variant="standard"
                         margin="dense"
                         label={t('packages|Hash')}
                         type="text"
@@ -257,6 +262,7 @@ function EditDialog(props: EditDialogProps) {
                         <Field
                           name="flatcarHash"
                           component={TextField}
+                          variant="standard"
                           margin="dense"
                           label={t('packages|Flatcar Action SHA256')}
                           type="text"
@@ -267,11 +273,12 @@ function EditDialog(props: EditDialogProps) {
                           fullWidth
                         />
                       )}
-                      <FormControl variant="standard" margin="dense" fullWidth>
-                        <InputLabel>Channels Blacklist</InputLabel>
+                      <FormControl margin="dense" fullWidth>
+                        <InputLabel variant="standard">Channels Blacklist</InputLabel>
                         <Field
                           name="channelsBlacklist"
                           component={Select}
+                          variant="standard"
                           multiple
                           renderValue={(selected: string[]) =>
                             getChannelsNames(selected).join(' / ')

diff --git a/frontend/src/components/Packages/FileList.tsx b/frontend/src/components/Packages/FileList.tsx
@@ -107,7 +107,6 @@ function FileListItem(props: FileListItemProps) {
         </Grid>
         <Grid item xs={12}>
           <TextField
-            variant="standard"
             name="name"
             margin="dense"
             label={t('packages|Name')}
@@ -123,7 +122,6 @@ function FileListItem(props: FileListItemProps) {
         <Grid item container spacing={1}>
           <Grid item xs={6}>
             <TextField
-              variant="standard"
               name="size"
               margin="dense"
               label={t('packages|Size')}
@@ -138,7 +136,6 @@ function FileListItem(props: FileListItemProps) {
           </Grid>
           <Grid item xs={6}>
             <TextField
-              variant="standard"
               name="hash"
               margin="dense"
               label={t('packages|SHA1 Hash (base64)')}
@@ -155,7 +152,6 @@ function FileListItem(props: FileListItemProps) {
           </Grid>
           <Grid item xs={6}>
             <TextField
-              variant="standard"
               name="hash256"
               margin="dense"
               label={t('packages|SHA256 Hash (hex)')}