Update ReactBootstrap classes used in the code

Apply the changes suggested by ReactBootstrap's migration path: - Accordion: AccordionToggle has been renamed to AccordionButton. - Badge: variant has been renamed to bg. - FormControl: dropped as prop supporting select tags in favor of FormSelect. - FormRow: removed. Use Row instead. - InputGroup: dropped InputGroupPrepend and InputGroupAppend. Buttons and InputGroupText can now be added as direct children. Signed-off-by: Davide Briani <[email protected]>
davidebriani · Feb 19, 2024 · 5c06884 · 5c06884
1 parent 8bcb37d
commit 5c06884
Show file tree

Hide file tree

Showing 13 changed files with 144 additions and 179 deletions.
diff --git a/src/BlocksPage.tsx b/src/BlocksPage.tsx
@@ -63,7 +63,7 @@ function BlockCard({ block, onShow }: BlockCardProps) {
           {block.name}
         </Button>
         {block instanceof AstarteNativeBlock && (
-          <Badge variant="secondary" className="h6 text-light">
+          <Badge bg="secondary" className="h6 text-light">
             native
           </Badge>
         )}

diff --git a/src/DeviceStatusPage/DeviceLiveEventsCard.tsx b/src/DeviceStatusPage/DeviceLiveEventsCard.tsx
@@ -217,7 +217,7 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceConnectedEvent) {
     return (
       <>
-        <Badge variant="success" className="me-2">
+        <Badge bg="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="me-2">
+        <Badge bg="warning" className="me-2">
           device disconnected
         </Badge>
         <span>Device disconnected</span>
@@ -237,7 +237,7 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceIncomingDataEvent) {
     return (
       <>
-        <Badge variant="info" className="me-2">
+        <Badge bg="info" className="me-2">
           incoming data
         </Badge>
         <span className="me-2">{event.interfaceName}</span>
@@ -251,7 +251,7 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceUnsetPropertyEvent) {
     return (
       <>
-        <Badge variant="info" className="me-2">
+        <Badge bg="info" className="me-2">
           unset property
         </Badge>
         <span className="me-2">{event.interfaceName}</span>
@@ -262,7 +262,7 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceErrorEvent) {
     return (
       <>
-        <Badge variant="danger" className="me-2">
+        <Badge bg="danger" className="me-2">
           device error
         </Badge>
         <span>{deviceErrorNameToString(event.errorName)}</span>
@@ -305,7 +305,7 @@ const SystemEventDelegate = ({ event }: SystemEventDelegateProps) => {
       return (
         <li className="px-2">
           <Timestamp>{new Date(event.timestamp)}</Timestamp>
-          <Badge variant="secondary" className="me-2">
+          <Badge bg="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="me-2">
+          <Badge bg="secondary" className="me-2">
             channel
           </Badge>
           <span className="text-secondary">{event.message}</span>

diff --git a/src/InterfacesPage.tsx b/src/InterfacesPage.tsx
@@ -42,7 +42,7 @@ const InterfaceRow = ({ name, majors }: InterfaceRowProps): React.ReactElement =
         <Col md="auto">
           {majors.map((major) => (
             <Link key={major} to={`/interfaces/${name}/${major}/edit`}>
-              <Badge variant={major > 0 ? 'primary' : 'secondary'} className="me-1 px-2 py-1">
+              <Badge bg={major > 0 ? 'primary' : 'secondary'} className="me-1 px-2 py-1">
                 v{major}
               </Badge>
             </Link>

diff --git a/src/NewBlockPage.tsx b/src/NewBlockPage.tsx
@@ -104,9 +104,7 @@ export default (): React.ReactElement => {
           </Form.Group>
           <Form.Group controlId="block-type">
             <Form.Label>Type</Form.Label>
-            <Form.Control
-              as="select"
-              custom
+            <Form.Select
               value={block.type}
               onChange={(e) =>
                 setBlock({ ...block, type: e.target.value as AstarteCustomBlock['type'] })
@@ -117,7 +115,7 @@ export default (): React.ReactElement => {
               <option value="producer">Producer</option>
               <option value="consumer">Consumer</option>
               <option value="producer_consumer">Producer &amp; Consumer</option>
-            </Form.Control>
+            </Form.Select>
           </Form.Group>
           <Form.Group controlId="block-source">
             <Form.Label>Source</Form.Label>

diff --git a/src/NewGroupPage.tsx b/src/NewGroupPage.tsx
@@ -18,7 +18,7 @@
 
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button, Container, Form, InputGroup, Spinner } from 'react-bootstrap';
+import { Button, Container, Form, InputGroup, Row, Spinner } from 'react-bootstrap';
 import type { AstarteDevice } from 'astarte-client';
 
 import { AlertsBanner, useAlerts } from './AlertManager';
@@ -71,11 +71,9 @@ const FilterInputBox = ({ filter, onFilterChange }: FilterInputBoxProps): React.
   <Form.Group>
     <Form.Label srOnly>Table filter</Form.Label>
     <InputGroup>
-      <InputGroup.Prepend>
-        <InputGroup.Text>
-          <Icon icon="filter" />
-        </InputGroup.Text>
-      </InputGroup.Prepend>
+      <InputGroup.Text>
+        <Icon icon="filter" />
+      </InputGroup.Text>
       <Form.Control
         type="text"
         value={filter}
@@ -169,14 +167,14 @@ export default (): React.ReactElement => {
               selectedDevices={selectedDevices}
               onToggleDevice={handleDeviceToggle}
             />
-            <Form.Row className="flex-row-reverse pe-2">
+            <Row className="flex-row-reverse pe-2">
               <Button variant="primary" type="submit" disabled={!isValidForm || isCreatingGroup}>
                 {isCreatingGroup && (
                   <Spinner as="span" size="sm" animation="border" role="status" className="me-2" />
                 )}
                 Create group
               </Button>
-            </Form.Row>
+            </Row>
           </Form>
         )}
       </WaitForData>

diff --git a/src/RegisterDevicePage.tsx b/src/RegisterDevicePage.tsx
@@ -21,7 +21,7 @@
 import React, { useCallback, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { v4 as uuidv4, v5 as uuidv5 } from 'uuid';
-import { Button, Col, Form, Spinner, Table } from 'react-bootstrap';
+import { Button, Col, Form, Row, Spinner, Table } from 'react-bootstrap';
 import type { AstarteDevice, AstarteInterfaceDescriptor } from 'astarte-client';
 
 import Icon from './components/Icon';
@@ -316,7 +316,7 @@ export default (): React.ReactElement => {
     <SingleCardPage title="Register Device" backLink="/devices">
       <AlertsBanner alerts={registrationAlerts} />
       <Form onSubmit={registerDevice}>
-        <Form.Row className="mb-2">
+        <Row className="mb-2">
           <Form.Group as={Col} controlId="deviceIdInput">
             <Form.Label>Device ID</Form.Label>
             <Form.Control
@@ -346,7 +346,7 @@ export default (): React.ReactElement => {
               Generate from name...
             </Button>
           </Form.Group>
-        </Form.Row>
+        </Row>
         <Form.Group
           controlId="sendIntrospectionInput"
           className={shouldSendIntrospection ? 'mb-0' : ''}
@@ -367,7 +367,7 @@ export default (): React.ReactElement => {
             onRemoveInterface={removeIntrospectionInterface}
           />
         )}
-        <Form.Row className="flex-row-reverse pe-2">
+        <Row className="flex-row-reverse pe-2">
           <Button
             variant="primary"
             type="submit"
@@ -378,7 +378,7 @@ export default (): React.ReactElement => {
             )}
             Register device
           </Button>
-        </Form.Row>
+        </Row>
       </Form>
       {showNamespaceModal && (
         <NamespaceModal

diff --git a/src/components/InterfaceEditor.tsx b/src/components/InterfaceEditor.tsx
@@ -73,13 +73,13 @@ const databaseRetentionToLabel = {
 const MappingRow = ({ className, mapping, onEdit, onDelete }: MappingRowProps) => (
   <Accordion data-testid={mapping.endpoint}>
     <Card className={className}>
-      <Accordion.Toggle
+      <Accordion.Button
         eventKey={mapping.endpoint}
         as={Card.Header}
         className="d-flex align-items-center flex-wrap"
       >
         <span className="flex-grow-1">
-          <Badge variant="secondary">{mapping.type}</Badge>
+          <Badge bg="secondary">{mapping.type}</Badge>
           <Button className="text-start text-truncate" variant="link">
             {mapping.endpoint}
           </Button>
@@ -94,7 +94,7 @@ const MappingRow = ({ className, mapping, onEdit, onDelete }: MappingRowProps) =
             Delete
           </Button>
         )}
-      </Accordion.Toggle>
+      </Accordion.Button>
       <Accordion.Collapse eventKey={mapping.endpoint}>
         <Card.Body>
           {mapping.description && (
@@ -709,7 +709,7 @@ export default ({
       <Col md={isSourceVisible ? 6 : 12}>
         <Container fluid className="bg-white rounded p-3">
           <Form>
-            <Form.Row className="mb-2">
+            <Row className="mb-2">
               <Col md={6}>
                 <Form.Group controlId="interfaceName">
                   <Form.Label>Name</Form.Label>
@@ -764,8 +764,8 @@ export default ({
                   </Form.Control.Feedback>
                 </Form.Group>
               </Col>
-            </Form.Row>
-            <Form.Row className="mb-2">
+            </Row>
+            <Row className="mb-2">
               <Col md={4}>
                 <Form.Group>
                   <Form.Label>Type</Form.Label>
@@ -843,14 +843,13 @@ export default ({
                   />
                 </Form.Group>
               </Col>
-            </Form.Row>
+            </Row>
             {interfaceDraft.type === 'datastream' && interfaceDraft.aggregation === 'object' && (
-              <Form.Row className="mb-2">
+              <Row className="mb-2">
                 <Col md={6}>
                   <Form.Group controlId="objectMappingReliability">
                     <Form.Label>Reliability</Form.Label>
-                    <Form.Control
-                      as="select"
+                    <Form.Select
                       name="mappingReliability"
                       value={datastreamOptions.reliability || 'unreliable'}
                       onChange={handleInterfaceReliabilityChange}
@@ -859,7 +858,7 @@ export default ({
                       <option value="unreliable">{reliabilityToLabel.unreliable}</option>
                       <option value="guaranteed">{reliabilityToLabel.guaranteed}</option>
                       <option value="unique">{reliabilityToLabel.unique}</option>
-                    </Form.Control>
+                    </Form.Select>
                   </Form.Group>
                 </Col>
                 <Col md={6}>
@@ -875,15 +874,14 @@ export default ({
                     />
                   </Form.Group>
                 </Col>
-              </Form.Row>
+              </Row>
             )}
             {interfaceDraft.type === 'datastream' && interfaceDraft.aggregation === 'object' && (
-              <Form.Row className="mb-2">
+              <Row className="mb-2">
                 <Col md={showInterfaceExpiry ? 6 : 12}>
                   <Form.Group controlId="objectMappingRetention">
                     <Form.Label>Retention</Form.Label>
-                    <Form.Control
-                      as="select"
+                    <Form.Select
                       name="mappingRetention"
                       value={datastreamOptions.retention || 'discard'}
                       onChange={handleInterfaceRetentionChange}
@@ -892,7 +890,7 @@ export default ({
                       <option value="discard">{retentionToLabel.discard}</option>
                       <option value="volatile">{retentionToLabel.volatile}</option>
                       <option value="stored">{retentionToLabel.stored}</option>
-                    </Form.Control>
+                    </Form.Select>
                   </Form.Group>
                 </Col>
                 {showInterfaceExpiry && (
@@ -908,30 +906,27 @@ export default ({
                           isInvalid={(datastreamOptions.expiry || 0) < 0}
                           disabled={denyMajorChanges}
                         />
-                        <InputGroup.Append>
-                          <InputGroup.Text>seconds</InputGroup.Text>
-                        </InputGroup.Append>
+                        <InputGroup.Text>seconds</InputGroup.Text>
                       </InputGroup>
                     </Form.Group>
                   </Col>
                 )}
-              </Form.Row>
+              </Row>
             )}
             {interfaceDraft.type === 'datastream' && interfaceDraft.aggregation === 'object' && (
-              <Form.Row className="mb-2">
+              <Row className="mb-2">
                 <Col md={showInterfaceDatabaseRetentionTtl ? 6 : 12}>
                   <Form.Group controlId="objectMappingDatabaseRetention">
                     <Form.Label>Database Retention</Form.Label>
-                    <Form.Control
-                      as="select"
+                    <Form.Select
                       name="mappingDatabaseRetention"
                       value={datastreamOptions.databaseRetentionPolicy || 'no_ttl'}
                       onChange={handleInterfaceDatabaseRetentionPolicyChange}
                       disabled={denyMajorChanges}
                     >
                       <option value="no_ttl">{databaseRetentionToLabel.no_ttl}</option>
                       <option value="use_ttl">{databaseRetentionToLabel.use_ttl}</option>
-                    </Form.Control>
+                    </Form.Select>
                   </Form.Group>
                 </Col>
                 {showInterfaceDatabaseRetentionTtl && (
@@ -947,16 +942,14 @@ export default ({
                           isInvalid={(datastreamOptions.databaseRetentionTtl || 60) < 60}
                           disabled={denyMajorChanges}
                         />
-                        <InputGroup.Append>
-                          <InputGroup.Text>seconds</InputGroup.Text>
-                        </InputGroup.Append>
+                        <InputGroup.Text>seconds</InputGroup.Text>
                       </InputGroup>
                     </Form.Group>
                   </Col>
                 )}
-              </Form.Row>
+              </Row>
             )}
-            <Form.Row className="mb-2">
+            <Row className="mb-2">
               <Col sm={12}>
                 <Form.Group controlId="interfaceDescription">
                   <Form.Label>Description</Form.Label>
@@ -973,8 +966,8 @@ export default ({
                   </Form.Control.Feedback>
                 </Form.Group>
               </Col>
-            </Form.Row>
-            <Form.Row className="mb-2">
+            </Row>
+            <Row className="mb-2">
               <Col sm={12}>
                 <Form.Group controlId="interfaceDocumentation">
                   <Form.Label>Documentation</Form.Label>
@@ -991,8 +984,8 @@ export default ({
                   </Form.Control.Feedback>
                 </Form.Group>
               </Col>
-            </Form.Row>
-            <Form.Row className="mb-2">
+            </Row>
+            <Row className="mb-2">
               <Col sm={12}>
                 <Form.Group controlId="interfaceMappings">
                   <button
@@ -1028,7 +1021,7 @@ export default ({
                   <FormControlWarning message={interfaceValidationWarnings.mappings} />
                 </Form.Group>
               </Col>
-            </Form.Row>
+            </Row>
           </Form>
         </Container>
       </Col>