chore: replace react-router imports with react-router-dom

Author: Elessar1802

src/Common/Api.ts

@@ -263,4 +263,4 @@ export const abortPreviousRequests = <T>(
  */
 export const getIsRequestAborted = (error) =>
     // The 0 code is common for aborted and blocked requests
-    error && error.code === 0 && error.message.search('abort\|aborted')
+    error && error.code === 0 && error.message.search('abort|aborted')

src/Common/AppStatus/index.ts

@@ -15,4 +15,4 @@
  */
 
 export { default as AppStatus } from './AppStatus'
-export * from './utils'
+export * from './utils'

src/Common/AppStatus/utils.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { TIMELINE_STATUS } from "../../Shared/constants"
+import { TIMELINE_STATUS } from '../../Shared/constants'
 
 export const triggerStatus = (triggerDetailStatus: string): string => {
     const triggerStatus = triggerDetailStatus?.toUpperCase()

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -42,12 +42,14 @@ export default function ClipboardButton({
     const [copied, setCopied] = useState<boolean>(false)
     const [enableTippy, setEnableTippy] = useState<boolean>(false)
 
-    const handleTextCopied = () => {setCopied(true)}
+    const handleTextCopied = () => {
+        setCopied(true)
+    }
     const handleEnableTippy = () => setEnableTippy(true)
     const handleDisableTippy = () => setEnableTippy(false)
     const handleCopyContent = useCallback(
         (e?) => {
-           if(e) stopPropagation(e)
+            if (e) stopPropagation(e)
             copyToClipboard(content, handleTextCopied)
         },
         [content],

src/Common/CodeEditor/CodeEditor.tsx

@@ -73,7 +73,7 @@ function useCodeEditorContext() {
  * Thus as a hack we are using this objects reference to call the latest onChange reference
  */
 const _onChange = {
-    onChange: null
+    onChange: null,
 }
 
 const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.memo(

src/Common/Common.service.ts

@@ -80,7 +80,13 @@ export function setImageTags(request, pipelineId: number, artifactId: number) {
     return post(`${ROUTES.IMAGE_TAGGING}/${pipelineId}/${artifactId}`, request)
 }
 
-const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: number, artifactStatus?: string, disableDefaultSelection?: boolean) => {
+const cdMaterialListModal = (
+    artifacts: any[],
+    offset: number,
+    artifactId?: number,
+    artifactStatus?: string,
+    disableDefaultSelection?: boolean,
+) => {
     if (!artifacts || !artifacts.length) return []
 
     const markFirstSelected = offset === 0
@@ -346,9 +352,7 @@ export function fetchChartTemplateVersions() {
     return get(`${ROUTES.DEPLOYMENT_TEMPLATE_LIST}?appId=-1&envId=-1`)
 }
 
-export const getDefaultConfig = (): Promise<ResponseType> => {
-    return get(`${ROUTES.NOTIFIER}/channel/config`)
-}
+export const getDefaultConfig = (): Promise<ResponseType> => get(`${ROUTES.NOTIFIER}/channel/config`)
 
 export function getEnvironmentListMinPublic(includeAllowedDeploymentTypes?: boolean) {
     return get(
@@ -361,13 +365,12 @@ export function getClusterListMin() {
     return get(URL)
 }
 
-export const getResourceGroupListRaw = (clusterId: string): Promise<ResponseType<ApiResourceType>> => {
-    return get(`${ROUTES.API_RESOURCE}/${ROUTES.GVK}/${clusterId}`)
-}
+export const getResourceGroupListRaw = (clusterId: string): Promise<ResponseType<ApiResourceType>> =>
+    get(`${ROUTES.API_RESOURCE}/${ROUTES.GVK}/${clusterId}`)
 
 export function getNamespaceListMin(clusterIdsCsv: string): Promise<EnvironmentListHelmResponse> {
-  const URL = `${ROUTES.NAMESPACE}/autocomplete?ids=${clusterIdsCsv}`
-  return get(URL)
+    const URL = `${ROUTES.NAMESPACE}/autocomplete?ids=${clusterIdsCsv}`
+    return get(URL)
 }
 export function getWebhookEventsForEventId(eventId: string | number) {
     const URL = `${ROUTES.GIT_HOST_EVENT}/${eventId}`

src/Common/CustomInput/CustomInput.tsx

@@ -135,9 +135,9 @@ export const CustomInput = ({
 
             {getInputError()}
             {helperText && (
-                 <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7">
-                 <Info className="icon-dim-16" />
-                 <div>{helperText}</div>
+                <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7">
+                    <Info className="icon-dim-16" />
+                    <div>{helperText}</div>
                 </div>
             )}
         </div>

src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -34,7 +34,7 @@ export default function DraggableWrapper({
     parentRef,
     boundaryGap = 16,
     childDivProps = {},
-    layoutFixDelta = 0
+    layoutFixDelta = 0,
 }: DraggableWrapperProps) {
     const windowSize = useWindowSize()
     const nodeRef = useRef<HTMLDivElement>(null)

src/Common/EmptyState/GenericEmptyState.tsx

@@ -84,11 +84,7 @@ const GenericEmptyState = ({
             >
                 <div className="flex column dc__gap-8">
                     <h4 className="title fw-6 cn-9 mt-0 mb-0 lh-24 dc__align-center">{title}</h4>
-                    {subTitle && (
-                        <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>
-                            {subTitle}
-                        </p>
-                    )}
+                    {subTitle && <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>{subTitle}</p>}
                 </div>
                 {isButtonAvailable && renderButton()}
                 {children}

src/Common/ErrorPage.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useHistory } from 'react-router'
+import { useHistory } from 'react-router-dom'
 import { ERROR_STATUS_CODE, ERROR_EMPTY_SCREEN, ROUTES } from './Constants'
 import GenericEmptyState from './EmptyState/GenericEmptyState'
 import { ErrorPageType } from './Types'