[frontend] Fix spacing for tags (#1112)

OpenBAS-Platform · Jul 16, 2024 · 40c0b3a · 40c0b3a
1 parent 1ca55e6
commit 40c0b3a
Show file tree

Hide file tree

Showing 23 changed files with 153 additions and 127 deletions.
diff --git a/openbas-front/src/admin/components/Dashboard.tsx b/openbas-front/src/admin/components/Dashboard.tsx
@@ -223,6 +223,7 @@ const Dashboard = () => {
             searchPaginationInput={searchPaginationInput}
             setSearchPaginationInput={setSearchPaginationInput}
             hasHeader={false}
+            variant={'reduced-view'}
           />
         </Paper>
       </Grid>

diff --git a/openbas-front/src/admin/components/assets/asset_groups/AssetGroupDialogAdding.tsx b/openbas-front/src/admin/components/assets/asset_groups/AssetGroupDialogAdding.tsx
@@ -136,9 +136,9 @@ const AssetGroupDialogAdding: FunctionComponent<Props> = ({
                     </ListItemIcon>
                     <ListItemText
                       primary={assetGroup.asset_group_name}
-                      secondary={assetGroup.asset_group_description}
+                      secondary={truncate(assetGroup.asset_group_description, 30)}
                     />
-                    <ItemTags variant="list" tags={assetGroup.asset_group_tags} />
+                    <ItemTags variant="reduced-view" tags={assetGroup.asset_group_tags} />
                   </ListItemButton>
                 );
               })}

diff --git a/openbas-front/src/admin/components/assets/asset_groups/AssetGroups.tsx b/openbas-front/src/admin/components/assets/asset_groups/AssetGroups.tsx
@@ -57,13 +57,13 @@ const inlineStyles: Record<string, CSSProperties> = {
     width: '20%',
   },
   asset_group_description: {
-    width: '25%',
+    width: '20%',
   },
   asset_group_assets: {
     width: '35%',
   },
   asset_group_tags: {
-    width: '20%',
+    width: '25%',
   },
 };
 

diff --git a/openbas-front/src/admin/components/assets/asset_groups/AssetGroupsList.tsx b/openbas-front/src/admin/components/assets/asset_groups/AssetGroupsList.tsx
@@ -74,7 +74,7 @@ const AssetGroupsList: FunctionComponent<Props> = ({
                     className={classes.bodyItem}
                     style={inlineStyles.asset_group_tags}
                   >
-                    <ItemTags variant="list" tags={assetGroup.asset_group_tags} />
+                    <ItemTags variant="reduced-view" tags={assetGroup.asset_group_tags} />
                   </div>
                 </>
               }

diff --git a/openbas-front/src/admin/components/assets/endpoints/EndpointsDialogAdding.tsx b/openbas-front/src/admin/components/assets/endpoints/EndpointsDialogAdding.tsx
@@ -185,14 +185,14 @@ const EndpointsDialogAdding: FunctionComponent<Props> = ({
                     <ListItemText
                       primary={
                         <div style={{ display: 'flex', alignItems: 'center' }}>
-                          <div className={classes.bodyItem} style={{ width: '50%' }}>
+                          <div className={classes.bodyItem} style={{ width: '45%' }}>
                             {endpoint.asset_name}
                           </div>
-                          <div className={classes.bodyItem} style={{ width: '25%' }}>
+                          <div className={classes.bodyItem} style={{ width: '20%' }}>
                             <PlatformIcon platform={endpoint.endpoint_platform} width={20} marginRight={10} /> {endpoint.endpoint_platform}
                           </div>
-                          <div className={classes.bodyItem} style={{ width: '25%' }}>
-                            <ItemTags variant="list" tags={endpoint.asset_tags} />
+                          <div className={classes.bodyItem} style={{ width: '35%' }}>
+                            <ItemTags variant="reduced-view" tags={endpoint.asset_tags} />
                           </div>
                         </div>
                     }

diff --git a/openbas-front/src/admin/components/assets/endpoints/EndpointsList.tsx b/openbas-front/src/admin/components/assets/endpoints/EndpointsList.tsx
@@ -28,15 +28,15 @@ const useStyles = makeStyles(() => ({
 
 const inlineStyles: Record<string, CSSProperties> = {
   asset_name: {
-    width: '40%',
+    width: '35%',
   },
   asset_platform: {
-    width: '20%',
+    width: '15%',
     display: 'flex',
     alignItems: 'center',
   },
   asset_tags: {
-    width: '25%',
+    width: '35%',
   },
   asset_type: {
     width: '10%',
@@ -97,7 +97,7 @@ const EndpointsList: FunctionComponent<Props> = ({
                     className={classes.bodyItem}
                     style={inlineStyles.asset_tags}
                   >
-                    <ItemTags variant="list" tags={endpoint.asset_tags} />
+                    <ItemTags variant="reduced-view" tags={endpoint.asset_tags} />
                   </div>
                   <div
                     className={classes.bodyItem}

diff --git a/openbas-front/src/admin/components/common/injects/InjectAddDocuments.tsx b/openbas-front/src/admin/components/common/injects/InjectAddDocuments.tsx
@@ -200,7 +200,7 @@ const InjectAddDocuments: FunctionComponent<Props> = ({
                         secondary={document.document_description}
                       />
                       <ItemTags
-                        variant="list"
+                        variant="reduced-view"
                         tags={document.document_tags}
                       />
                     </ListItem>

diff --git a/openbas-front/src/admin/components/common/injects/InjectAddTeams.tsx b/openbas-front/src/admin/components/common/injects/InjectAddTeams.tsx
@@ -200,7 +200,7 @@ const InjectAddTeams: FunctionComponent<Props> = ({
                         secondary={team.team_description}
                       />
                       <ItemTags
-                        variant="list"
+                        variant="reduced-view"
                         tags={team.team_tags}
                       />
                     </ListItem>

diff --git a/openbas-front/src/admin/components/common/injects/InjectDefinition.js b/openbas-front/src/admin/components/common/injects/InjectDefinition.js
@@ -1159,7 +1159,7 @@ class InjectDefinition extends Component {
                             className={classes.bodyItem}
                             style={inlineStyles.team_tags}
                           >
-                            <ItemTags variant="list" tags={[]} />
+                            <ItemTags variant="reduced-view" tags={[]} />
                           </div>
                         </>
                       }
@@ -1319,7 +1319,7 @@ class InjectDefinition extends Component {
                             style={inlineStyles.challenge_tags}
                           >
                             <ItemTags
-                              variant="list"
+                              variant="reduced-view"
                               tags={challenge.challenge_tags}
                             />
                           </div>
@@ -1490,7 +1490,7 @@ class InjectDefinition extends Component {
                             style={inlineStyles.document_tags}
                           >
                             <ItemTags
-                              variant="list"
+                              variant="reduced-view"
                               tags={document.document_tags}
                             />
                           </div>

diff --git a/openbas-front/src/admin/components/common/injects/Injects.js b/openbas-front/src/admin/components/common/injects/Injects.js
@@ -78,7 +78,7 @@ const headerStyles = {
   },
   inject_depends_duration: {
     float: 'left',
-    width: '20%',
+    width: '18%',
     fontSize: 12,
     fontWeight: '700',
   },
@@ -90,12 +90,13 @@ const headerStyles = {
   },
   inject_enabled: {
     float: 'left',
-    width: '15%',
+    width: '12%',
     fontSize: 12,
     fontWeight: '700',
   },
   inject_tags: {
     float: 'left',
+    width: '20%',
     fontSize: 12,
     fontWeight: '700',
   },
@@ -120,7 +121,7 @@ const inlineStyles = {
   },
   inject_depends_duration: {
     float: 'left',
-    width: '20%',
+    width: '18%',
     height: 20,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -138,14 +139,15 @@ const inlineStyles = {
   },
   inject_enabled: {
     float: 'left',
-    width: '15%',
+    width: '12%',
     height: 20,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
   inject_tags: {
     float: 'left',
+    width: '20%',
     height: 20,
     whiteSpace: 'nowrap',
     overflow: 'hidden',

diff --git a/openbas-front/src/admin/components/common/injects/teams/InjectTeamsList.tsx b/openbas-front/src/admin/components/common/injects/teams/InjectTeamsList.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   column: {
     display: 'grid',
-    gridTemplateColumns: '2fr 1fr 1fr 1fr',
+    gridTemplateColumns: '2fr 1fr 1fr 2fr',
   },
   bodyItem: {
     fontSize: theme.typography.h3.fontSize,
@@ -59,7 +59,7 @@ const InjectTeamsList: FunctionComponent<Props> = ({
                   {team.team_users_enabled_number}
                 </div>
                 <div className={classes.bodyItem}>
-                  <ItemTags variant="list" tags={team.team_tags} />
+                  <ItemTags variant="reduced-view" tags={team.team_tags} />
                 </div>
               </div>
             }

diff --git a/openbas-front/src/admin/components/components/teams/AddTeams.tsx b/openbas-front/src/admin/components/components/teams/AddTeams.tsx
@@ -167,7 +167,7 @@ const AddTeams: React.FC<Props> = ({ addedTeamIds, onAddTeams }) => {
                         primary={team.team_name}
                         secondary={team.organization_name}
                       />
-                      <ItemTags variant="list" tags={team.team_tags} />
+                      <ItemTags variant="reduced-view" tags={team.team_tags} />
                     </ListItem>
                   );
                 })}

diff --git a/openbas-front/src/admin/components/components/teams/ContextualTeams.tsx b/openbas-front/src/admin/components/components/teams/ContextualTeams.tsx
@@ -57,19 +57,19 @@ const headerStylesContextual: Record<string, CSSProperties> = {
   },
   team_users_number: {
     float: 'left',
-    width: '12%',
+    width: '10%',
     fontSize: 12,
     fontWeight: '700',
   },
   team_users_enabled_number: {
     float: 'left',
-    width: '12%',
+    width: '10%',
     fontSize: 12,
     fontWeight: '700',
   },
   team_tags: {
     float: 'left',
-    width: '25%',
+    width: '29%',
     fontSize: 12,
     fontWeight: '700',
   },
@@ -92,23 +92,23 @@ const inlineStylesContextual: Record<string, CSSProperties> = {
   },
   team_users_number: {
     float: 'left',
-    width: '12%',
+    width: '10%',
     height: 20,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
   team_users_enabled_number: {
     float: 'left',
-    width: '12%',
+    width: '10%',
     height: 20,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
   team_tags: {
     float: 'left',
-    width: '25%',
+    width: '29%',
     height: 20,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -263,7 +263,7 @@ const ContextualTeams: React.FC<Props> = ({ teamIds }) => {
                     className={classes.bodyItem}
                     style={inlineStylesContextual.team_tags}
                   >
-                    <ItemTags variant="list" tags={team.team_tags} />
+                    <ItemTags variant="reduced-view" tags={team.team_tags} />
                   </div>
                   <div
                     className={classes.bodyItem}

diff --git a/openbas-front/src/admin/components/components/teams/TeamAddPlayers.tsx b/openbas-front/src/admin/components/components/teams/TeamAddPlayers.tsx
@@ -176,7 +176,7 @@ const TeamAddPlayers: React.FC<Props> = ({ addedUsersIds, teamId }) => {
                         primary={resolveUserName(user)}
                         secondary={user.organization_name}
                       />
-                      <ItemTags variant="list" tags={user.user_tags} />
+                      <ItemTags variant="reduced-view" tags={user.user_tags} />
                     </ListItem>
                   );
                 })}

diff --git a/openbas-front/src/admin/components/components/teams/TeamPlayers.tsx b/openbas-front/src/admin/components/components/teams/TeamPlayers.tsx
@@ -135,15 +135,15 @@ const inlineStyles: Record<string, CSSProperties> = {
   },
   user_organization: {
     float: 'left',
-    width: '20%',
+    width: '18%',
     height: 20,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
   user_tags: {
     float: 'left',
-    width: '23%',
+    width: '25%',
     height: 20,
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -407,7 +407,7 @@ const TeamPlayers: React.FC<Props> = ({ teamId, handleClose }) => {
                     className={classes.bodyItem}
                     style={inlineStyles.user_tags}
                   >
-                    <ItemTags variant="list" tags={user.user_tags} />
+                    <ItemTags variant="reduced-view" tags={user.user_tags} />
                   </div>
                 </>
               }

diff --git a/openbas-front/src/admin/components/components/teams/Teams.tsx b/openbas-front/src/admin/components/components/teams/Teams.tsx
@@ -55,13 +55,13 @@ const inlineStyles: Record<string, CSSProperties> = {
     width: '25%',
   },
   team_description: {
-    width: '25%',
+    width: '20%',
   },
   team_users_number: {
     width: '10%',
   },
   team_tags: {
-    width: '20%',
+    width: '25%',
   },
   team_updated_at: {
     width: '20%',

diff --git a/openbas-front/src/admin/components/payloads/Payloads.js b/openbas-front/src/admin/components/payloads/Payloads.js
@@ -250,7 +250,7 @@ const Payloads = () => {
                       style={inlineStyles.payload_tags}
                     >
                       <ItemTags
-                        variant="list"
+                        variant="reduced-view"
                         tags={payload.payload_tags}
                       />
                     </div>

diff --git a/openbas-front/src/admin/components/scenarios/Scenarios.tsx b/openbas-front/src/admin/components/scenarios/Scenarios.tsx
@@ -84,11 +84,11 @@ const inlineStyles: Record<string, CSSProperties> = {
     width: '12%',
   },
   scenario_platforms: {
-    width: '12%',
+    width: '10%',
     cursor: 'default',
   },
   scenario_tags: {
-    width: '15%',
+    width: '18%',
   },
   scenario_updated_at: {
     width: '10%',