refactor: replaced some Ant components with MUI components. (#752)

Co-authored-by: Noam Gaash <noam.gaash@applitools.com>
hasadna · Jun 9, 2024 · f09c355 · f09c355
1 parent 4e58b09
commit f09c355
Show file tree

Hide file tree

Showing 14 changed files with 211 additions and 191 deletions.
diff --git a/src/pages/BugReportForm .tsx b/src/pages/BugReportForm .tsx
@@ -1,7 +1,9 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Form, Input, Button, Upload, message, Select, FormProps, Card } from 'antd'
-import { UploadOutlined } from '@ant-design/icons'
+import { Form, Input, Button, Upload, message, Select, FormProps } from 'antd'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined'
 import axios from 'axios'
 import './BugReportForm.scss'
 import { UploadChangeParam, UploadFile } from 'antd/lib/upload'
@@ -65,116 +67,120 @@ const BugReportForm = () => {
 
   return (
     <Card className="bug-report-form-container">
-      <h1 className="logo">
-        דאטאבוס
-        <InfoYoutubeModal
-          label={t('open_video_about_this_page')}
-          title={t('youtube_modal_info_title')}
-          videoUrl="https://www.youtube-nocookie.com/embed?v=F6sD9Bz4Xj0&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T&index=11"
-        />
-      </h1>
-      <span> {t('reportBug.description')}</span>
-      <p>
-        {submittedUrl && (
-          <a href={submittedUrl} target="_blank" rel="noopener noreferrer">
-            {t('reportBug.viewIssue')} (Github)
-          </a>
-        )}
-      </p>
-      <Form
-        form={form}
-        name="bug-report"
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        onFinish={onFinish}
-        onFinishFailed={onFinishFailed}
-        labelCol={{ span: 6 }}
-        wrapperCol={{ span: 18 }}>
-        <Form.Item
-          label={t('bug_type')}
-          name="type"
-          initialValue={selectedType}
-          rules={[{ required: true, message: t('bug_type_message') }]}>
-          <Select onChange={(value: string) => setSelectedType(value)}>
-            <Option value="bug">{t('bug_type_bug')}</Option>
-            <Option value="feature">{t('bug_type_feature')}</Option>
-          </Select>
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_title')}
-          name="title"
-          rules={[{ required: true, message: t('bug_title_message') }]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_contact_name')}
-          name="contactName"
-          rules={[{ required: true, message: t('bug_contact_name_message') }]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_contact_email')}
-          name="contactEmail"
-          rules={[
-            { required: true, message: t('bug_contact_email_message') },
-            // { type: 'email', message: t(TEXT_KEYS.bug_contact_email_valid_message) },
-          ]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_description')}
-          name="description"
-          rules={[{ required: true, message: t('bug_description_message') }]}>
-          <Input.TextArea rows={4} />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_environment')}
-          name="environment"
-          rules={[{ required: true, message: t('bug_environment_message') }]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_expected_behavior')}
-          name="expectedBehavior"
-          rules={[{ required: true, message: t('bug_expected_behavior_message') }]}>
-          <Input.TextArea rows={4} />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_actual_behavior')}
-          name="actualBehavior"
-          rules={[{ required: true, message: t('bug_actual_behavior_message') }]}>
-          <Input.TextArea rows={4} />
-        </Form.Item>
-
-        <Form.Item
-          label={t('bug_reproducibility')}
-          name="reproducibility"
-          rules={[{ required: true, message: t('bug_reproducibility_message') }]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item label={t('bug_attachments')} name="attachments">
-          <Upload
-            beforeUpload={() => false}
-            listType="picture"
-            fileList={fileList}
-            onChange={onFileChange}>
-            <Button icon={<UploadOutlined />}>{t('bug_attachments_upload_button')}</Button>
-          </Upload>
-        </Form.Item>
-
-        <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
-          <Button type="primary" htmlType="submit">
-            {t('bug_submit')}{' '}
-          </Button>
-        </Form.Item>
-      </Form>
+      <CardContent>
+        <h1 className="logo">
+          דאטאבוס
+          <InfoYoutubeModal
+            label={t('open_video_about_this_page')}
+            title={t('youtube_modal_info_title')}
+            videoUrl="https://www.youtube-nocookie.com/embed?v=F6sD9Bz4Xj0&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T&index=11"
+          />
+        </h1>
+        <span> {t('reportBug.description')}</span>
+        <p>
+          {submittedUrl && (
+            <a href={submittedUrl} target="_blank" rel="noopener noreferrer">
+              {t('reportBug.viewIssue')} (Github)
+            </a>
+          )}
+        </p>
+        <Form
+          form={form}
+          name="bug-report"
+          // eslint-disable-next-line @typescript-eslint/no-misused-promises
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          labelCol={{ span: 6 }}
+          wrapperCol={{ span: 18 }}>
+          <Form.Item
+            label={t('bug_type')}
+            name="type"
+            initialValue={selectedType}
+            rules={[{ required: true, message: t('bug_type_message') }]}>
+            <Select onChange={(value: string) => setSelectedType(value)}>
+              <Option value="bug">{t('bug_type_bug')}</Option>
+              <Option value="feature">{t('bug_type_feature')}</Option>
+            </Select>
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_title')}
+            name="title"
+            rules={[{ required: true, message: t('bug_title_message') }]}>
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_contact_name')}
+            name="contactName"
+            rules={[{ required: true, message: t('bug_contact_name_message') }]}>
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_contact_email')}
+            name="contactEmail"
+            rules={[
+              { required: true, message: t('bug_contact_email_message') },
+              // { type: 'email', message: t(TEXT_KEYS.bug_contact_email_valid_message) },
+            ]}>
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_description')}
+            name="description"
+            rules={[{ required: true, message: t('bug_description_message') }]}>
+            <Input.TextArea rows={4} />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_environment')}
+            name="environment"
+            rules={[{ required: true, message: t('bug_environment_message') }]}>
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_expected_behavior')}
+            name="expectedBehavior"
+            rules={[{ required: true, message: t('bug_expected_behavior_message') }]}>
+            <Input.TextArea rows={4} />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_actual_behavior')}
+            name="actualBehavior"
+            rules={[{ required: true, message: t('bug_actual_behavior_message') }]}>
+            <Input.TextArea rows={4} />
+          </Form.Item>
+
+          <Form.Item
+            label={t('bug_reproducibility')}
+            name="reproducibility"
+            rules={[{ required: true, message: t('bug_reproducibility_message') }]}>
+            <Input />
+          </Form.Item>
+
+          <Form.Item label={t('bug_attachments')} name="attachments">
+            <Upload
+              beforeUpload={() => false}
+              listType="picture"
+              fileList={fileList}
+              onChange={onFileChange}>
+              <Button icon={<FileUploadOutlinedIcon fontSize="small" />}>
+                {t('bug_attachments_upload_button')}
+              </Button>
+            </Upload>
+          </Form.Item>
+
+          <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
+            <Button type="primary" htmlType="submit">
+              {t('bug_submit')}{' '}
+            </Button>
+          </Form.Item>
+        </Form>
+      </CardContent>
     </Card>
   )
 }

diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
@@ -2,30 +2,29 @@ import styled from 'styled-components'
 import SlackIcon from '../../resources/slack-icon.svg'
 import { Trans, useTranslation } from 'react-i18next'
 import Widget from 'src/shared/Widget'
-import { Space, Typography } from 'antd'
-
+import Typography from '@mui/material/Typography'
+import Stack from '@mui/material/Stack'
 import './About.scss'
 import { useQuery } from '@tanstack/react-query'
 
-const { Title } = Typography
 const pageName = 'aboutPage'
 const About = () => {
   const { t } = useTranslation()
   return (
     <AboutStyle>
-      <Space direction="vertical" size="middle">
-        <Title className="page-title" level={3}>
+      <Stack spacing={4}>
+        <Typography variant="h4" gutterBottom className="page-title">
           {t(`${pageName}.title`)}
-        </Title>
+        </Typography>
         <WhatIsWebsite />
         <DiscoveredMistake />
         <Privacy />
         <License />
         <Questions />
         <Funding />
         <Attributions />
-        <Contributors />
-      </Space>
+      </Stack>
+      <Contributors />
     </AboutStyle>
   )
 }

diff --git a/src/pages/components/Label.tsx b/src/pages/components/Label.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
-import { Typography } from 'antd'
-const { Text } = Typography
+import Typography from '@mui/material/Typography'
+
 const StyledDiv = styled.div`
   display: inline-flex;
   width: 100%;
@@ -15,6 +15,6 @@ type LabelProps = {
 
 export const Label = ({ text }: LabelProps) => (
   <StyledDiv>
-    <Text>{text}</Text>
+    <Typography>{text}</Typography>
   </StyledDiv>
 )
diff --git a/src/pages/components/YoutubeModal.tsx b/src/pages/components/YoutubeModal.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+// import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; //TODO:
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { Modal } from 'antd'
 import './YotubeModal.scss'

diff --git a/src/pages/components/map-related/MapLayers/BusToolTip.tsx b/src/pages/components/map-related/MapLayers/BusToolTip.tsx
@@ -7,7 +7,7 @@ import './BusToolTip.scss'
 import { getSiriRideWithRelated } from 'src/api/siriService'
 import { SiriRideWithRelatedPydanticModel } from 'open-bus-stride-client/openapi/models/SiriRideWithRelatedPydanticModel'
 import { useTranslation } from 'react-i18next'
-import { Spin } from 'antd'
+import CircularProgress from '@mui/material/CircularProgress'
 import cn from 'classnames'
 import CustomTreeView from '../../CustomTreeView'
 
@@ -35,7 +35,7 @@ export function BusToolTip({ position, icon }: BusToolTipProps) {
       {isLoading || !siriRide ? (
         <div className="loading">
           <span>{t('loading_routes')}</span>
-          <Spin />
+          <CircularProgress />
         </div>
       ) : (
         <>

diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx
@@ -1,9 +1,9 @@
 import { MapContainer } from 'react-leaflet'
 import { Point } from 'src/pages/timeBasedMap'
+import IconButton from '@mui/material/IconButton'
+import OpenInFullRoundedIcon from '@mui/icons-material/OpenInFullRounded'
 import { MapProps } from './map-types'
 import { useCallback, useState } from 'react'
-import { Button } from 'antd'
-import { ExpandAltOutlined } from '@ant-design/icons'
 import '../../Map.scss'
 import { MapContent } from './MapContent'
 
@@ -18,13 +18,10 @@ export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapPro
 
   return (
     <div className={`map-info ${isExpanded ? 'expanded' : 'collapsed'}`}>
-      <Button
-        type="primary"
-        className="expand-button"
-        shape="circle"
-        onClick={toggleExpanded}
-        icon={<ExpandAltOutlined />}
-      />
+      <IconButton color="primary" className="expand-button" onClick={toggleExpanded}>
+        <OpenInFullRoundedIcon fontSize="large" />
+      </IconButton>
+
       <MapContainer center={position.loc} zoom={13} scrollWheelZoom={true}>
         <MapContent positions={positions} plannedRouteStops={plannedRouteStops} />
       </MapContainer>

diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx
@@ -10,7 +10,8 @@ import './DashboardPage.scss'
 import 'src/App.scss'
 import { PageContainer } from '../components/PageContainer'
 import { useTranslation } from 'react-i18next'
-import { Alert, Typography } from 'antd'
+import Typography from '@mui/material/Typography'
+import Alert from '@mui/material/Alert'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 
 // Components
@@ -21,7 +22,6 @@ import WorstLinesChart from './WorstLinesChart/WorstLinesChart'
 import InfoYoutubeModal from '../components/YoutubeModal'
 
 // Declarations
-const { Title } = Typography
 const now = moment()
 
 const DashboardPage = () => {
@@ -32,17 +32,21 @@ const DashboardPage = () => {
 
   return (
     <PageContainer>
-      <Title className="page-title" level={3}>
+      <Typography className="page-title" variant="h4">
         {t('dashboard_page_title')}
         <InfoYoutubeModal
           label="Open video about this page"
           title={t('youtube_modal_info_title')}
           videoUrl="https://www.youtube.com/embed/bXg50_j_hTA?si=4rpSZwMRbMomE4g1"
         />
-      </Title>
-      <Alert message={t('dashboard_page_description')} type="info" />
+      </Typography>
+      <Alert severity="info" variant="outlined" sx={{ bgcolor: '#eaf5fe' }} icon={false}>
+        {t('dashboard_page_description')}
+      </Alert>
       {startDate > endDate ? (
-        <Alert closable showIcon message={t('bug_date_alert')} type="error" />
+        <Alert severity="error" variant="outlined" sx={{ bgcolor: '#feeaea' }}>
+          {t('bug_date_alert')}
+        </Alert>
       ) : null}
       <Grid
         container