Merge pull request #819 from swaroopar/feature/fixStyles

enable eslint for CSS modules
eclipse-xpanse · May 25, 2024 · bec033d · bec033d
2 parents 86654eb + 358ce69
commit bec033d
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,13 +39,15 @@
             "plugin:@typescript-eslint/strict-type-checked",
             "plugin:prettier/recommended",
             "plugin:deprecation/recommended",
-            "plugin:react/recommended"
+            "plugin:react/recommended",
+            "plugin:css-modules/recommended"
         ],
         "plugins": [
             "react",
             "@typescript-eslint",
             "@tanstack/query",
-            "require-explicit-generics"
+            "require-explicit-generics",
+            "css-modules"
         ],
         "rules": {
             "react/jsx-uses-react": "error",
@@ -61,7 +63,14 @@
                 {
                     "count": 1
                 }
-            ]
+            ],
+            "css-modules/no-undef-class": [
+                2,
+                {
+                    "camelCase": true
+                }
+            ],
+            "css-modules/no-unused-class": "off"
         },
         "ignorePatterns": [
             "src/xpanse-api/**",
@@ -107,6 +116,7 @@
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-config-react-app": "7.0.1",
+        "eslint-plugin-css-modules": "^2.12.0",
         "eslint-plugin-deprecation": "^2.0.0",
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-react": "^7.34.1",

diff --git a/src/components/content/catalog/services/details/ServiceDetail.tsx b/src/components/content/catalog/services/details/ServiceDetail.tsx
@@ -8,7 +8,7 @@ import { Descriptions, Space, Tag } from 'antd';
 import React from 'react';
 import appStyles from '../../../../../styles/app.module.css';
 import catalogStyles from '../../../../../styles/catalog.module.css';
-import registerStyles from '../../../../../styles/register.module.css';
+import oclDisplayStyles from '../../../../../styles/ocl-display.module.css';
 import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
 import { ApiDoc } from '../../../common/doc/ApiDoc';
 import { AgreementText } from '../../../common/ocl/AgreementText';
@@ -30,7 +30,7 @@ function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDeta
                 </h3>
                 <Space size={[0, 8]} wrap>
                     {serviceDetails.regions.map((region) => (
-                        <Tag key={region.name} className={registerStyles.oclDisplayTag} color='orange'>
+                        <Tag key={region.name} className={oclDisplayStyles.oclDisplayTag} color='orange'>
                             {region.area ? `${region.area}: ${region.name}` : region.name}
                         </Tag>
                     ))}

diff --git a/src/components/content/catalog/services/details/ServiceProvider.tsx b/src/components/content/catalog/services/details/ServiceProvider.tsx
@@ -4,7 +4,7 @@
  */
 
 import { EnvironmentOutlined } from '@ant-design/icons';
-import { Divider, Empty, Image, Tabs } from 'antd';
+import { Empty, Image, Tabs } from 'antd';
 import { Tab } from 'rc-tabs/lib/interface';
 import React, { useMemo } from 'react';
 import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom';
@@ -211,8 +211,6 @@ function ServiceProvider({
                                 updateServiceHostingType={onChangeServiceHostingType}
                             />
                             <ServiceDetail serviceDetails={activeServiceDetail} />
-
-                            <Divider />
                             <ServicePolicies
                                 key={activeServiceDetail.id}
                                 serviceDetails={activeServiceDetail}

diff --git a/src/components/content/common/ocl/DisplayOclData.tsx b/src/components/content/common/ocl/DisplayOclData.tsx
@@ -49,8 +49,6 @@ function DisplayOclData({ ocl }: { ocl: Ocl }): React.JSX.Element | string {
                                         {ocl.name}
                                     </Paragraph>
                                 </Tooltip>
-                                <br />
-                                <br />
                             </div>
                             <div>
                                 <b>Cloud Service Provider</b>

diff --git a/src/components/content/credentials/AddCredential.tsx b/src/components/content/credentials/AddCredential.tsx
@@ -9,6 +9,8 @@ import TextArea from 'antd/es/input/TextArea';
 import { ColumnsType } from 'antd/es/table';
 import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import credentialStyles from '../../../styles/credential.module.css';
+import cspSelectStyles from '../../../styles/csp-select-drop-down.module.css';
+
 import {
     AdminService,
     ApiError,
@@ -360,7 +362,7 @@ function AddCredential({ role, onCancel }: { role: string | undefined; onCancel:
                         <Select loading={getActiveCspsQuery.isLoading} onSelect={handleCspSelect} size={'large'}>
                             {activeCspList.current.map((csp: CredentialVariables.csp) => {
                                 return (
-                                    <Select.Option key={csp} value={csp} className={credentialStyles.cspSelectDropDown}>
+                                    <Select.Option key={csp} value={csp} className={cspSelectStyles.cspSelectDropDown}>
                                         <Image
                                             className={credentialStyles.customSelect}
                                             width={100}

diff --git a/src/components/content/credentials/UpdateCredential.tsx b/src/components/content/credentials/UpdateCredential.tsx
@@ -135,7 +135,7 @@ function UpdateCredential({
             render: (value: string, record) =>
                 record.isMandatory ? (
                     <Tooltip placement='topLeft' title={value}>
-                        <span className={styles.addCredentialFromVariablesValue}>*</span>
+                        <span className={styles.addCredentialFormVariablesValue}>*</span>
                         {value}
                     </Tooltip>
                 ) : (
@@ -235,7 +235,7 @@ function UpdateCredential({
                     msg={tipMessage}
                     onRemove={onRemove}
                 ></CredentialTip>
-                <div className={styles.credentialFromInput}>
+                <div className={styles.credentialFormInput}>
                     <Form.Item label='Csp' name='csp'>
                         <Image
                             width={100}
@@ -264,7 +264,7 @@ function UpdateCredential({
                         ></Table>
                     </Form.Item>
                 </div>
-                <Form.Item className={styles.credentialFromButton}>
+                <Form.Item className={styles.credentialFormButton}>
                     <Button
                         type='primary'
                         loading={updateCredentialRequest.isPending}

diff --git a/src/components/layouts/footer/LayoutFooter.tsx b/src/components/layouts/footer/LayoutFooter.tsx
@@ -5,10 +5,11 @@
 
 import { Layout } from 'antd';
 import React from 'react';
+import appStyles from '../../../styles/app.module.css';
 import { footerText } from '../../utils/constants';
 
 function LayoutFooter(): React.JSX.Element {
-    return <Layout.Footer>{footerText}</Layout.Footer>;
+    return <Layout.Footer className={appStyles.antLayoutFooter}>{footerText}</Layout.Footer>;
 }
 
 export default LayoutFooter;