Update Bootstrap classes used in the code

Apply the changes suggested by Bootstrap's migration path: - Renamed .no-gutters to .g-0. - Renamed .float-left and .float-right to .float-start and .float-end. - Renamed .border-left and .border-right to .border-start and .border-end. - Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end. - Renamed .ml-* and .mr-* to .ms-* and .me-*. - Renamed .pl-* and .pr-* to .ps-* and .pe-*. - Renamed .text-monospace to .font-monospace. Signed-off-by: Davide Briani <[email protected]>
davidebriani · Feb 19, 2024 · 8bcb37d · 8bcb37d
1 parent 80428e2
commit 8bcb37d
Show file tree

Hide file tree

Showing 42 changed files with 101 additions and 101 deletions.
diff --git a/src/AlertManager.tsx b/src/AlertManager.tsx
@@ -221,7 +221,7 @@ const AlertBanner = ({ alert }: AlertBannerProps) => {
         className="d-flex justify-content-between flex-wrap"
       >
         {alert.message}
-        <div className="col text-right">{alertRelativeTime}</div>
+        <div className="col text-end">{alertRelativeTime}</div>
       </Alert>
     </Col>
   );

diff --git a/src/App.tsx b/src/App.tsx
@@ -95,7 +95,7 @@ const Dashboard = () => {
   return (
     <ReduxProvider store={reduxStore}>
       <Container fluid className="px-0">
-        <Row className="no-gutters">
+        <Row className="g-0">
           <DashboardSidebar />
           <Col className="main-content vh-100 overflow-auto">
             <PageRouter />
@@ -108,7 +108,7 @@ const Dashboard = () => {
 
 const StandaloneEditor = () => (
   <Container fluid className="px-0">
-    <Row className="no-gutters">
+    <Row className="g-0">
       <Col id="main-navbar" className="col-auto nav-col">
         <Sidebar>
           <Sidebar.Brand />

diff --git a/src/BlockSourcePage.tsx b/src/BlockSourcePage.tsx
@@ -114,7 +114,7 @@ export default (): React.ReactElement => {
             disabled={isDeletingBlock}
           >
             {isDeletingBlock && (
-              <Spinner as="span" size="sm" animation="border" role="status" className="mr-2" />
+              <Spinner as="span" size="sm" animation="border" role="status" className="me-2" />
             )}
             Delete block
           </Button>

diff --git a/src/DeviceInterfaceValues.tsx b/src/DeviceInterfaceValues.tsx
@@ -202,7 +202,7 @@ export default (): React.ReactElement => {
       </h2>
       <Card className="mt-4">
         <Card.Header>
-          <span className="text-monospace">{deviceId}</span> /{interfaceName}
+          <span className="font-monospace">{deviceId}</span> /{interfaceName}
         </Card.Header>
         <Card.Body>
           <WaitForData

diff --git a/src/DeviceStatusPage/AddToGroupModal.tsx b/src/DeviceStatusPage/AddToGroupModal.tsx
@@ -49,7 +49,7 @@ const AddToGroupModal = ({
               className={groupName === selectedGroup ? 'p-2 bg-success text-white' : 'p-2'}
             >
               <span onClick={() => setSelectedGroup(groupName)}>
-                <Icon icon="add" className="mr-2" />
+                <Icon icon="add" className="me-2" />
                 {groupName}
               </span>
             </li>
@@ -73,7 +73,7 @@ const AddToGroupModal = ({
           style={{ minWidth: '5em' }}
         >
           {isAddingToGroup && (
-            <Spinner className="mr-2" size="sm" animation="border" role="status" />
+            <Spinner className="me-2" size="sm" animation="border" role="status" />
           )}
           Add to group
         </Button>

diff --git a/src/DeviceStatusPage/AliasesCard.tsx b/src/DeviceStatusPage/AliasesCard.tsx
@@ -53,7 +53,7 @@ const AliasesTable = ({
           <td>{key}</td>
           <td>{value}</td>
           <td className="text-center">
-            <Icon icon="edit" className="color-grey mr-2" onClick={() => onEditAliasClick(key)} />
+            <Icon icon="edit" className="color-grey me-2" onClick={() => onEditAliasClick(key)} />
             <Icon icon="erase" onClick={() => onRemoveAliasClick({ key, value })} />
           </td>
         </tr>

diff --git a/src/DeviceStatusPage/AttributesCard.tsx b/src/DeviceStatusPage/AttributesCard.tsx
@@ -55,7 +55,7 @@ const AttributesTable = ({
           <td className="text-center">
             <Icon
               icon="edit"
-              className="color-grey mr-2"
+              className="color-grey me-2"
               onClick={() => onEditAttributeClick(key)}
             />
             <Icon icon="erase" onClick={() => onRemoveAttributeClick({ key, value })} />

diff --git a/src/DeviceStatusPage/DeviceInfoCard.tsx b/src/DeviceStatusPage/DeviceInfoCard.tsx
@@ -56,7 +56,7 @@ const DeviceStatus = ({ status }: DeviceStatusProps): React.ReactElement => {
 
   return (
     <>
-      <Icon icon={icon} className="mr-1" />
+      <Icon icon={icon} className="me-1" />
       <span>{statusString}</span>
     </>
   );
@@ -81,7 +81,7 @@ const DeviceInfoCard = ({
     <Card.Header as="h5">Device Info</Card.Header>
     <Card.Body className="d-flex flex-column">
       <h6>Device ID</h6>
-      <p className="text-monospace">{device.id}</p>
+      <p className="font-monospace">{device.id}</p>
       <h6>Device name</h6>
       <p>{device.hasNameAlias ? device.name : 'No name alias set'}</p>
       <h6>Status</h6>
@@ -94,7 +94,7 @@ const DeviceInfoCard = ({
         {device.hasCredentialsInhibited ? (
           <Button
             variant="success text-white"
-            className="mr-1"
+            className="me-1"
             onClick={onEnableCredentialsClick}
             disabled={device.deletionInProgress}
           >
@@ -103,7 +103,7 @@ const DeviceInfoCard = ({
         ) : (
           <Button
             variant="danger"
-            className="mr-1"
+            className="me-1"
             onClick={onInhibitCredentialsClick}
             disabled={device.deletionInProgress}
           >
@@ -119,7 +119,7 @@ const DeviceInfoCard = ({
         </Button>
         <Button
           variant="danger"
-          className="ml-1"
+          className="ms-1"
           onClick={onDeleteDeviceClick}
           disabled={device.deletionInProgress}
         >

diff --git a/src/DeviceStatusPage/DeviceLiveEventsCard.tsx b/src/DeviceStatusPage/DeviceLiveEventsCard.tsx
@@ -158,7 +158,7 @@ interface TimestampProps {
 const Timestamp = ({ children }: TimestampProps): React.ReactElement => {
   const formattedTimestamp = children.toISOString().substring(11, 23);
 
-  return <small className="text-secondary text-monospace mr-2">{`[${formattedTimestamp}]`}</small>;
+  return <small className="text-secondary font-monospace me-2">{`[${formattedTimestamp}]`}</small>;
 };
 
 const deviceErrorNameToString = (errorName: string): string => {
@@ -217,7 +217,7 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceConnectedEvent) {
     return (
       <>
-        <Badge variant="success" className="mr-2">
+        <Badge variant="success" className="me-2">
           device connected
         </Badge>
         <span>IP : {event.ip}</span>
@@ -227,7 +227,7 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceDisconnectedEvent) {
     return (
       <>
-        <Badge variant="warning" className="mr-2">
+        <Badge variant="warning" className="me-2">
           device disconnected
         </Badge>
         <span>Device disconnected</span>
@@ -237,12 +237,12 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceIncomingDataEvent) {
     return (
       <>
-        <Badge variant="info" className="mr-2">
+        <Badge variant="info" className="me-2">
           incoming data
         </Badge>
-        <span className="mr-2">{event.interfaceName}</span>
-        <span className="mr-2">{event.path}</span>
-        <span className="mr-2 text-monospace">
+        <span className="me-2">{event.interfaceName}</span>
+        <span className="me-2">{event.path}</span>
+        <span className="me-2 font-monospace">
           {_.isObject(event.value) ? JSON.stringify(event.value) : event.value}
         </span>
       </>
@@ -251,18 +251,18 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceUnsetPropertyEvent) {
     return (
       <>
-        <Badge variant="info" className="mr-2">
+        <Badge variant="info" className="me-2">
           unset property
         </Badge>
-        <span className="mr-2">{event.interfaceName}</span>
+        <span className="me-2">{event.interfaceName}</span>
         <span>{event.path}</span>
       </>
     );
   }
   if (event instanceof AstarteDeviceErrorEvent) {
     return (
       <>
-        <Badge variant="danger" className="mr-2">
+        <Badge variant="danger" className="me-2">
           device error
         </Badge>
         <span>{deviceErrorNameToString(event.errorName)}</span>
@@ -272,7 +272,7 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
             <div style={{ paddingLeft: '6.3em' }}>
               {Object.entries(event.metadata).map(([key, value]) => (
                 <span key={key}>
-                  {key}:<span className="text-secondary pl-2 pr-4">{value}</span>
+                  {key}:<span className="text-secondary ps-2 pe-4">{value}</span>
                 </span>
               ))}
             </div>
@@ -305,7 +305,7 @@ const SystemEventDelegate = ({ event }: SystemEventDelegateProps) => {
       return (
         <li className="px-2">
           <Timestamp>{new Date(event.timestamp)}</Timestamp>
-          <Badge variant="secondary" className="mr-2">
+          <Badge variant="secondary" className="me-2">
             channel
           </Badge>
           <span className="text-danger">{event.message}</span>
@@ -317,7 +317,7 @@ const SystemEventDelegate = ({ event }: SystemEventDelegateProps) => {
       return (
         <li className="px-2">
           <Timestamp>{new Date(event.timestamp)}</Timestamp>
-          <Badge variant="secondary" className="mr-2">
+          <Badge variant="secondary" className="me-2">
             channel
           </Badge>
           <span className="text-secondary">{event.message}</span>

diff --git a/src/DeviceStatusPage/ExchangedBytesCard.tsx b/src/DeviceStatusPage/ExchangedBytesCard.tsx
@@ -49,10 +49,10 @@ interface StatsTableRowProps {
 const StatsTableRow = ({ stats }: StatsTableRowProps): React.ReactElement => (
   <tr>
     <td>{stats.name}</td>
-    <td className="text-right">{formatBytes(stats.bytes)}</td>
-    <td className="d-xl-table-cell d-none text-right">{`${stats.bytesPercent.toFixed(2)}%`}</td>
-    <td className="text-right">{stats.messages}</td>
-    <td className="d-xl-table-cell d-none text-right">{`${stats.messagesPercent.toFixed(2)}%`}</td>
+    <td className="text-end">{formatBytes(stats.bytes)}</td>
+    <td className="d-xl-table-cell d-none text-end">{`${stats.bytesPercent.toFixed(2)}%`}</td>
+    <td className="text-end">{stats.messages}</td>
+    <td className="d-xl-table-cell d-none text-end">{`${stats.messagesPercent.toFixed(2)}%`}</td>
   </tr>
 );
 
@@ -113,10 +113,10 @@ const ExchangedBytesCard = ({ astarte, device }: ExchangedBytesCardProps): React
               <thead>
                 <tr>
                   <th>Interface</th>
-                  <th className="text-right">Bytes</th>
-                  <th className="d-xl-table-cell d-none text-right">Bytes (%)</th>
-                  <th className="text-right">Messages</th>
-                  <th className="d-xl-table-cell d-none text-right">Messages (%)</th>
+                  <th className="text-end">Bytes</th>
+                  <th className="d-xl-table-cell d-none text-end">Bytes (%)</th>
+                  <th className="text-end">Messages</th>
+                  <th className="d-xl-table-cell d-none text-end">Messages (%)</th>
                 </tr>
               </thead>
               <tbody>

diff --git a/src/DeviceStatusPage/index.tsx b/src/DeviceStatusPage/index.tsx
@@ -303,7 +303,7 @@ const DeviceStatusPage = (): React.ReactElement => {
     <Container fluid className="p-3">
       <Row>
         <Col>
-          <h2 className="pl-2">
+          <h2 className="ps-2">
             <BackButton href="/devices" />
             Device
           </h2>

diff --git a/src/DevicesPage.tsx b/src/DevicesPage.tsx
@@ -129,10 +129,10 @@ const DeviceRow = ({ device, filters }: DeviceRowProps): React.ReactElement => {
   return (
     <tr>
       <td>
-        <Icon className="mr-2" icon={icon} tooltip={iconTooltip} tooltipPlacement="right" />
+        <Icon className="me-2" icon={icon} tooltip={iconTooltip} tooltipPlacement="right" />
         <span>{statusLabel}</span>
       </td>
-      <td className={device.hasNameAlias ? '' : 'text-monospace'}>
+      <td className={device.hasNameAlias ? '' : 'font-monospace'}>
         <Link to={`/devices/${device.id}/edit`}>{device.name}</Link>
         <MatchedAttributes filters={filters} attributes={device.attributes} />
       </td>
@@ -503,7 +503,7 @@ export default (): React.ReactElement => {
                   </Col>
                   <Col xs="auto" className="p-1">
                     <div className="p-2 mb-2" onClick={() => setShowSidebar(!showSidebar)}>
-                      <Icon icon="filter" className="mr-1" />
+                      <Icon icon="filter" className="me-1" />
                       {showSidebar && <b>Filters</b>}
                     </div>
                     {showSidebar && (

diff --git a/src/FlowConfigurationPage.tsx b/src/FlowConfigurationPage.tsx
@@ -99,7 +99,7 @@ export default (): React.ReactElement => {
         />
       </Form.Group>
       <Button variant="primary" disabled={!isValidForm || isCreatingFlow} onClick={createFlow}>
-        {isCreatingFlow && <Spinner className="mr-2" size="sm" animation="border" role="status" />}
+        {isCreatingFlow && <Spinner className="me-2" size="sm" animation="border" role="status" />}
         Instantiate Flow
       </Button>
     </Form>

diff --git a/src/GroupDevicesPage.tsx b/src/GroupDevicesPage.tsx
@@ -65,10 +65,10 @@ const deviceTableRow = (
   return (
     <tr key={index}>
       <td>
-        <Icon className="mr-2" icon={icon} tooltip={iconTooltip} tooltipPlacement="right" />
+        <Icon className="me-2" icon={icon} tooltip={iconTooltip} tooltipPlacement="right" />
         <span>{statusLabel}</span>
       </td>
-      <td className={device.hasNameAlias ? '' : 'text-monospace'}>
+      <td className={device.hasNameAlias ? '' : 'font-monospace'}>
         <Link to={`/devices/${device.id}/edit`}>{device.name}</Link>
       </td>
       <td>{lastEvent}</td>

diff --git a/src/HomePage.tsx b/src/HomePage.tsx
@@ -48,14 +48,14 @@ const ServiceStatusRow = ({ service, status }: ServiceStatusRowProps): React.Rea
   } else if (status === 'ok') {
     messageCell = (
       <td className="color-green">
-        <Icon icon="statusOK" className="mr-1" />
+        <Icon icon="statusOK" className="me-1" />
         This service is operating normally
       </td>
     );
   } else {
     messageCell = (
       <td className="color-red">
-        <Icon icon="statusKO" className="mr-1" />
+        <Icon icon="statusKO" className="me-1" />
         This service appears offline
       </td>
     );
@@ -163,7 +163,7 @@ const InterfaceList = ({
               onInterfaceClick(e, interfaceName);
             }}
           >
-            <Icon icon="interfaces" className="mr-1" />
+            <Icon icon="interfaces" className="me-1" />
             {interfaceName}
           </a>
         </li>
@@ -245,7 +245,7 @@ const TriggerList = ({ triggers, maxShownTriggers }: TriggerListProps): React.Re
       {shownTriggers.map((triggerName) => (
         <li key={triggerName} className="my-1">
           <Link to={`/triggers/${triggerName}/edit`}>
-            <Icon icon="triggers" className="mr-1" />
+            <Icon icon="triggers" className="me-1" />
             {triggerName}
           </Link>
         </li>

diff --git a/src/InterfacePage.tsx b/src/InterfacePage.tsx
@@ -206,12 +206,12 @@ export default (): React.ReactElement => {
                 denyMajorChanges
               />
               <Row className="justify-content-end m-3">
-                <Button variant="secondary" className="mr-2" onClick={handleToggleSourceVisibility}>
+                <Button variant="secondary" className="me-2" onClick={handleToggleSourceVisibility}>
                   {isSourceVisible ? 'Hide' : 'Show'} source
                 </Button>
                 {iface.major === 0 && (
                   <Button
-                    className="mr-2"
+                    className="me-2"
                     variant="danger"
                     onClick={isDeletingInterface ? undefined : showConfirmDeleteModal}
                     disabled={isDeletingInterface}
@@ -222,7 +222,7 @@ export default (): React.ReactElement => {
                         size="sm"
                         animation="border"
                         role="status"
-                        className="mr-2"
+                        className="me-2"
                       />
                     )}
                     Delete interface
@@ -239,7 +239,7 @@ export default (): React.ReactElement => {
                       size="sm"
                       animation="border"
                       role="status"
-                      className="mr-2"
+                      className="me-2"
                     />
                   )}
                   Apply changes

diff --git a/src/InterfacesPage.tsx b/src/InterfacesPage.tsx
@@ -35,14 +35,14 @@ const InterfaceRow = ({ name, majors }: InterfaceRowProps): React.ReactElement =
       <Row>
         <Col>
           <Link to={`/interfaces/${name}/${Math.max(...majors)}/edit`}>
-            <Icon icon="interfaces" className="mr-2" />
+            <Icon icon="interfaces" className="me-2" />
             {name}
           </Link>
         </Col>
         <Col md="auto">
           {majors.map((major) => (
             <Link key={major} to={`/interfaces/${name}/${major}/edit`}>
-              <Badge variant={major > 0 ? 'primary' : 'secondary'} className="mr-1 px-2 py-1">
+              <Badge variant={major > 0 ? 'primary' : 'secondary'} className="me-1 px-2 py-1">
                 v{major}
               </Badge>
             </Link>
@@ -110,7 +110,7 @@ export default (): React.ReactElement => {
           <ListGroup>
             <ListGroup.Item>
               <Button variant="link" className="p-0" onClick={() => navigate('/interfaces/new')}>
-                <Icon icon="add" className="mr-2" />
+                <Icon icon="add" className="me-2" />
                 Install a new interface...
               </Button>
             </ListGroup.Item>