M #~: Fix cards when title is too long (#2035)

2025-03-23 22:50:09 +03:00 · 2022-05-12 15:37:39 +02:00 · 2022-05-12 15:37:39 +02:00 · c5ccd9e83d
commit c5ccd9e83d
parent 8c481beb6b
21 changed files with 54 additions and 20 deletions
--- a/src/fireedge/src/client/components/Cards/DiskSnapshotCard.js
+++ b/src/fireedge/src/client/components/Cards/DiskSnapshotCard.js
@ -52,7 +52,9 @@ const DiskSnapshotCard = memo(({ snapshot = {}, actions = [] }) => {
    <Paper variant="outlined" className={classes.root}>
      <div className={classes.main}>
        <div className={classes.title}>
-          <Typography component="span">{NAME}</Typography>
+          <Typography noWrap component="span">
+            {NAME}
+          </Typography>
          <span className={classes.labels}>
            {isActive && <StatusChip text={<Translate word={T.Active} />} />}
            <StatusChip text={<Translate word={T.Snapshot} />} />
--- a/src/fireedge/src/client/components/Cards/MarketplaceAppCard.js
+++ b/src/fireedge/src/client/components/Cards/MarketplaceAppCard.js
@ -61,7 +61,9 @@ const MarketplaceAppCard = memo(
        <div className={classes.main}>
          <div className={classes.title}>
            <StatusCircle color={stateColor} tooltip={stateName} />
-            <Typography component="span">{NAME}</Typography>
+            <Typography noWrap component="span">
+              {NAME}
+            </Typography>
            {LOCK && <Lock />}
            <span className={classes.labels}>
              <StatusChip text={type} />
--- a/src/fireedge/src/client/components/Cards/MarketplaceCard.js
+++ b/src/fireedge/src/client/components/Cards/MarketplaceCard.js
@ -64,7 +64,9 @@ const MarketplaceCard = memo(
        <div className={classes.main}>
          <div className={classes.title}>
            <StatusCircle color={stateColor} tooltip={stateName} />
-            <Typography component="span">{NAME}</Typography>
+            <Typography noWrap component="span">
+              {NAME}
+            </Typography>
            {error && (
              <Tooltip
                arrow
--- a/src/fireedge/src/client/components/Cards/NetworkCard.js
+++ b/src/fireedge/src/client/components/Cards/NetworkCard.js
@ -106,7 +106,9 @@ const NetworkCard = memo(
        <div className={classes.main}>
          <div className={classes.title}>
            <StatusCircle color={stateColor} tooltip={stateName} />
-            <Typography component="span">{NAME}</Typography>
+            <Typography noWrap component="span">
+              {NAME}
+            </Typography>
            {error && (
              <Tooltip
                arrow
--- a/src/fireedge/src/client/components/Cards/NicCard.js
+++ b/src/fireedge/src/client/components/Cards/NicCard.js
@ -97,6 +97,7 @@ const NicCard = memo(
        >
          <div className={classes.title}>
            <Typography
+              noWrap
              component="span"
              fontWeight="bold"
              data-cy={`${dataCy}-name`}
--- a/src/fireedge/src/client/components/Cards/ScheduleActionCard.js
+++ b/src/fireedge/src/client/components/Cards/ScheduleActionCard.js
@ -53,7 +53,9 @@ const ScheduleActionCard = memo(({ schedule, actions }) => {
    <Paper variant="outlined" className={classes.root}>
      <div className={classes.main}>
        <div className={classes.title}>
-          <Typography component="span">{titleAction}</Typography>
+          <Typography noWrap component="span">
+            {titleAction}
+          </Typography>
          {MESSAGE && (
            <span className={classes.labels}>
              <StatusChip text={MESSAGE} />
--- a/src/fireedge/src/client/components/Cards/SecurityGroupCard.js
+++ b/src/fireedge/src/client/components/Cards/SecurityGroupCard.js
@ -52,7 +52,9 @@ const SecurityGroupCard = memo(
      <div {...rootProps} data-cy={`secgroup-${ID}`}>
        <div className={classes.main}>
          <div className={classes.title}>
-            <Typography component="span">{NAME}</Typography>
+            <Typography noWrap component="span">
+              {NAME}
+            </Typography>
          </div>
          <div className={classes.caption}>
            <span>{`#${ID}`}</span>
--- a/src/fireedge/src/client/components/Cards/SnapshotCard.js
+++ b/src/fireedge/src/client/components/Cards/SnapshotCard.js
@ -35,7 +35,9 @@ const SnapshotCard = memo(
      <Paper variant="outlined" className={classes.root}>
        <div className={classes.main}>
          <div className={classes.title}>
-            <Typography component="span">{NAME}</Typography>
+            <Typography noWrap component="span">
+              {NAME}
+            </Typography>
          </div>
          <div className={classes.caption}>
            <span title={time.toFormat('ff')}>
--- a/src/fireedge/src/client/components/Cards/VmTemplateCard.js
+++ b/src/fireedge/src/client/components/Cards/VmTemplateCard.js
@ -98,7 +98,9 @@ const VmTemplateCard = memo(
        </div>
        <div className={classes.main}>
          <div className={classes.title}>
-            <Typography component="span">{NAME}</Typography>
+            <Typography noWrap component="span">
+              {NAME}
+            </Typography>
            <span className={classes.labels}>
              {HYPERVISOR && <StatusChip text={HYPERVISOR} />}
              {LOCK && <Lock />}
--- a/src/fireedge/src/client/components/Tables/Clusters/row.js
+++ b/src/fireedge/src/client/components/Tables/Clusters/row.js
@ -29,7 +29,9 @@ const Row = ({ original, value, ...props }) => {
    <div data-cy={`cluster-${ID}`} {...props}>
      <div className={classes.main}>
        <div className={classes.title}>
-          <Typography component="span">{NAME}</Typography>
+          <Typography noWrap component="span">
+            {NAME}
+          </Typography>
        </div>
        <div className={classes.caption}>
          <span>{`#${ID}`}</span>
--- a/src/fireedge/src/client/components/Tables/DockerHubTags/row.js
+++ b/src/fireedge/src/client/components/Tables/DockerHubTags/row.js
@ -95,7 +95,9 @@ const Row = ({ original, value: _, ...props }) => {
    <div {...props}>
      <div className={classes.main}>
        <div className={classes.title}>
-          <Typography component="span">{name}</Typography>
+          <Typography noWrap component="span">
+            {name}
+          </Typography>
        </div>
        <div className={classes.caption}>
          <span title={time.toFormat('ff')} className="full-width">
--- a/src/fireedge/src/client/components/Tables/Groups/row.js
+++ b/src/fireedge/src/client/components/Tables/Groups/row.js
@ -29,7 +29,9 @@ const Row = ({ original, value, ...props }) => {
    <div {...props} data-cy={`group-${ID}`}>
      <div className={classes.main}>
        <div className={classes.title}>
-          <Typography component="span">{NAME}</Typography>
+          <Typography noWrap component="span">
+            {NAME}
+          </Typography>
        </div>
        <div className={classes.caption}>
          <span>{`#${ID}`}</span>
--- a/src/fireedge/src/client/components/Tables/Images/row.js
+++ b/src/fireedge/src/client/components/Tables/Images/row.js
@ -56,7 +56,7 @@ const Row = ({ original, value, ...props }) => {
      <div className={classes.main}>
        <div className={classes.title}>
          <StatusCircle color={stateColor} tooltip={stateName} />
-          <Typography component="span" data-cy="name">
+          <Typography noWrap component="span" data-cy="name">
            {NAME}
          </Typography>
          {LOCK && <Lock />}
--- a/src/fireedge/src/client/components/Tables/Users/row.js
+++ b/src/fireedge/src/client/components/Tables/Users/row.js
@ -29,7 +29,9 @@ const Row = ({ original, value, ...props }) => {
    <div {...props} data-cy={`user-${ID}`}>
      <div className={classes.main}>
        <div className={classes.title}>
-          <Typography component="span">{NAME}</Typography>
+          <Typography noWrap component="span">
+            {NAME}
+          </Typography>
          <span className={classes.labels}>{!+ENABLED && <Lock />}</span>
        </div>
        <div className={classes.caption}>
--- a/src/fireedge/src/client/components/Tables/VNetworkTemplates/row.js
+++ b/src/fireedge/src/client/components/Tables/VNetworkTemplates/row.js
@ -34,7 +34,9 @@ const Row = ({ original, value, ...props }) => {
    <div {...props}>
      <div className={classes.main}>
        <div className={classes.title}>
-          <Typography component="span">{NAME}</Typography>
+          <Typography noWrap component="span">
+            {NAME}
+          </Typography>
          <span className={classes.labels}>{LOCK && <Lock />}</span>
        </div>
        <div className={classes.caption}>
--- a/src/fireedge/src/client/components/Tables/VRouters/row.js
+++ b/src/fireedge/src/client/components/Tables/VRouters/row.js
@ -29,7 +29,9 @@ const Row = ({ original, value, ...props }) => {
    <div {...props}>
      <div className={classes.main}>
        <div className={classes.title}>
-          <Typography component="span">{NAME}</Typography>
+          <Typography noWrap component="span">
+            {NAME}
+          </Typography>
        </div>
        <div className={classes.caption}>
          <span>{`#${ID}`}</span>
--- a/src/fireedge/src/client/components/Tables/Wilds/row.js
+++ b/src/fireedge/src/client/components/Tables/Wilds/row.js
@ -36,7 +36,9 @@ const Row = memo(({ original, ...props }) => {
    <div {...props}>
      <div className={classes.main}>
        <div className={classes.title}>
-          <Typography component="span">{VM_NAME}</Typography>
+          <Typography noWrap component="span">
+            {VM_NAME}
+          </Typography>
        </div>
        <div className={classes.caption}>
          <span>{`#${DEPLOY_ID}`}</span>
--- a/src/fireedge/src/client/components/Tables/Zombies/row.js
+++ b/src/fireedge/src/client/components/Tables/Zombies/row.js
@ -36,7 +36,9 @@ const Row = memo(({ original, ...props }) => {
    <div {...props}>
      <div className={classes.main}>
        <div className={classes.title}>
-          <Typography component="span">{ZOMBIE_VM}</Typography>
+          <Typography noWrap component="span">
+            {ZOMBIE_VM}
+          </Typography>
        </div>
      </div>
    </div>
--- a/src/fireedge/src/client/components/Tables/Zones/row.js
+++ b/src/fireedge/src/client/components/Tables/Zones/row.js
@ -35,7 +35,9 @@ const Row = ({ original, value, ...props }) => {
      <div className={classes.main}>
        <div className={classes.title}>
          <StatusCircle color={stateColor} tooltip={stateName} />
-          <Typography component="span">{NAME}</Typography>
+          <Typography noWrap component="span">
+            {NAME}
+          </Typography>
        </div>
        <div className={classes.caption}>
          <span>{`#${ID}`}</span>
--- a/src/fireedge/src/client/components/Tables/styles.js
+++ b/src/fireedge/src/client/components/Tables/styles.js
@ -50,7 +50,6 @@ export const rowStyles = makeStyles(
      display: 'flex',
      gap: 6,
      alignItems: 'center',
-      flexWrap: 'wrap',
    },
    labels: {
      display: 'inline-flex',
--- a/src/fireedge/src/client/components/Tabs/Vm/History/HistoryRecord.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/History/HistoryRecord.js
@ -88,7 +88,7 @@ const HistoryRecordCard = memo(
      <Paper variant="outlined" className={classes.root}>
        <div className={classes.main}>
          <div className={classes.title}>
-            <Typography component="span">
+            <Typography noWrap component="span">
              {`#${SEQ} | #${HID} ${HOSTNAME} | ${Tr(T.Action)}: ${action}`}
            </Typography>
          </div>