Skip to content

Commit 2e6cabf

Browse files
swarooparswaroopar
committed
introduce CSS modules for all styles
1 parent c30cc98 commit 2e6cabf

File tree

145 files changed

+1148
-1503
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

145 files changed

+1148
-1503
lines changed

‎.github/workflows/ui-release.yml

+1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ jobs:
6363
working-directory: ./
6464
run: tsc
6565

66+
# This step also builds the application. Please check package.json for more details.
6667
- name: Release application
6768
working-directory: ./
6869
run: npx release-it ${{github.event.inputs.ReleaseType}} --ci

‎DEPENDENCIES

+180-814
Large diffs are not rendered by default.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"scripts": {
2424
"start": "vite --port 3000",
2525
"build": "vite build",
26-
"serve": "vite preview",
26+
"serve": "vite preview --port 3000",
2727
"start-with-zitadel-testbed": "env-cmd -f .env.zitadel-testbed vite --port 3000",
2828
"build-with-zitadel-testbed": "env-cmd -f .env.zitadel-testbed vite build",
2929
"test": "jest",
@@ -166,6 +166,7 @@
166166
"git update-index -q --refresh"
167167
],
168168
"after:bump": [
169+
"npm run update-service-worker-file",
169170
"npm run build",
170171
"zip -r -q xpanse-ui-${version}.zip build"
171172
]

‎public/OidcServiceWorker.js

+15-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import {
3030
servicesPageRoute,
3131
workflowsPageRoute,
3232
} from './components/utils/constants';
33-
import './styles/app.css';
33+
import './styles/app.module.css';
3434

3535
const queryClient = new QueryClient();
3636

‎src/components/content/catalog/services/details/ServiceDetail.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
import { CloudUploadOutlined, InfoCircleOutlined } from '@ant-design/icons';
77
import { Descriptions, Space, Tag } from 'antd';
88
import React from 'react';
9+
import appStyles from '../../../../../styles/app.module.css';
10+
import catalogStyles from '../../../../../styles/catalog.module.css';
11+
import registerStyles from '../../../../../styles/register.module.css';
912
import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
1013
import { ApiDoc } from '../../../common/doc/ApiDoc';
1114
import { AgreementText } from '../../../common/ocl/AgreementText';
@@ -20,20 +23,20 @@ import { ShowIcon } from './ShowIcon';
2023
function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDetailVo }): React.JSX.Element {
2124
return (
2225
<>
23-
<div className={'catalog-detail-class'}>
24-
<h3 className={'catalog-details-h3'}>
26+
<div className={catalogStyles.catalogDetailClass}>
27+
<h3 className={catalogStyles.catalogDetailsH3}>
2528
<CloudUploadOutlined />
2629
&nbsp;Available Regions
2730
</h3>
2831
<Space size={[0, 8]} wrap>
2932
{serviceDetails.regions.map((region) => (
30-
<Tag key={region.name} className={'ocl-display-tag'} color='orange'>
33+
<Tag key={region.name} className={registerStyles.oclDisplayTag} color='orange'>
3134
{region.area ? `${region.area}: ${region.name}` : region.name}
3235
</Tag>
3336
))}
3437
</Space>
3538
</div>
36-
<h3 className={'catalog-details-h3'}>
39+
<h3 className={catalogStyles.catalogDetailsH3}>
3740
<InfoCircleOutlined />
3841
&nbsp;Basic Information
3942
</h3>
@@ -66,7 +69,7 @@ function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDeta
6669
<BillingText billing={serviceDetails.billing} />
6770
</Descriptions.Item>
6871
<Descriptions.Item label={'Service API'}>
69-
<ApiDoc id={serviceDetails.id} styleClass={'service-api-doc-link'} />
72+
<ApiDoc id={serviceDetails.id} styleClass={appStyles.serviceApiDocLink} />
7073
</Descriptions.Item>
7174
<Descriptions.Item label='Contact Details'>
7275
<ContactDetailsText

‎src/components/content/catalog/services/details/ServiceProvider.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import { Divider, Empty, Image, Tabs } from 'antd';
88
import { Tab } from 'rc-tabs/lib/interface';
99
import React, { useMemo } from 'react';
1010
import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom';
11-
import { CloudServiceProvider, DeployedService, ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
11+
import catalogStyles from '../../../../../styles/catalog.module.css';
12+
import { CloudServiceProvider, ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
1213
import {
1314
catalogPageRoute,
1415
serviceCspQuery,
@@ -40,7 +41,7 @@ function ServiceProvider({
4041
categoryOclData: Map<string, ServiceTemplateDetailVo[]>;
4142
selectedServiceNameInTree: string;
4243
selectedServiceVersionInTree: string;
43-
category: DeployedService.category;
44+
category: ServiceTemplateDetailVo.category;
4445
isViewDisabled: boolean;
4546
setIsViewDisabled: (isViewDisabled: boolean) => void;
4647
}): React.JSX.Element {
@@ -185,9 +186,9 @@ function ServiceProvider({
185186
items={items}
186187
onChange={onChangeCsp}
187188
activeKey={serviceCspInQuery}
188-
className={'ant-tabs-tab-btn'}
189+
className={catalogStyles.antTabsTabBtn}
189190
/>
190-
<div className={'update-unregister-btn-class'}>
191+
<div className={catalogStyles.updateUnregisterBtnClass}>
191192
<UpdateService
192193
id={activeServiceDetail.id}
193194
category={category}
@@ -199,7 +200,7 @@ function ServiceProvider({
199200
setIsViewDisabled={setIsViewDisabled}
200201
/>
201202
</div>
202-
<h3 className={'catalog-details-h3'}>
203+
<h3 className={catalogStyles.catalogDetailsH3}>
203204
<EnvironmentOutlined />
204205
&nbsp;Service Hosting Options
205206
</h3>

‎src/components/content/catalog/services/details/ServiceProviderSkeleton.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55

66
import { Skeleton } from 'antd';
77
import React from 'react';
8+
import catalogStyles from '../../../../../styles/catalog.module.css';
89

910
export function ServiceProviderSkeleton(): React.JSX.Element {
1011
return (
1112
<Skeleton
12-
className={'catalog-csp-details-skeleton'}
13+
className={catalogStyles.catalogCspDetailsSkeleton}
1314
active={true}
1415
loading={true}
1516
paragraph={{ rows: 2, width: ['20%', '20%'] }}

‎src/components/content/catalog/services/details/ServiceRegistrationStatus.tsx

+12-3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
77
import { Tag } from 'antd';
88
import React from 'react';
9+
import catalogStyles from '../../../../../styles/catalog.module.css';
910
import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
1011
import serviceRegistrationState = ServiceTemplateDetailVo.serviceRegistrationState;
1112

@@ -17,19 +18,27 @@ export function ServiceRegistrationStatus({
1718
switch (serviceStatus) {
1819
case serviceRegistrationState.APPROVED:
1920
return (
20-
<Tag icon={<CheckCircleOutlined />} color='success' className={'catalog-service-status-size'}>
21+
<Tag icon={<CheckCircleOutlined />} color='success' className={catalogStyles.catalogServiceStatusSize}>
2122
{serviceStatus.valueOf()}
2223
</Tag>
2324
);
2425
case ServiceTemplateDetailVo.serviceRegistrationState.APPROVAL_PENDING:
2526
return (
26-
<Tag icon={<ExclamationCircleOutlined />} color='orange' className={'catalog-service-status-size'}>
27+
<Tag
28+
icon={<ExclamationCircleOutlined />}
29+
color='orange'
30+
className={catalogStyles.catalogServiceStatusSize}
31+
>
2732
{serviceStatus.valueOf()}
2833
</Tag>
2934
);
3035
default:
3136
return (
32-
<Tag icon={<ExclamationCircleOutlined />} color='warning' className={'catalog-service-status-size'}>
37+
<Tag
38+
icon={<ExclamationCircleOutlined />}
39+
color='warning'
40+
className={catalogStyles.catalogServiceStatusSize}
41+
>
3342
{serviceStatus as string}
3443
</Tag>
3544
);

‎src/components/content/catalog/services/details/ShowIcon.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@
55

66
import { Tooltip, Typography } from 'antd';
77
import React from 'react';
8+
import catalogStyles from '../../../../../styles/catalog.module.css';
89
import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
910

1011
export function ShowIcon({ serviceDetails }: { serviceDetails: ServiceTemplateDetailVo }): React.JSX.Element {
1112
const { Paragraph } = Typography;
1213
return (
13-
<div className={'catalog-service-icon'}>
14+
<div className={catalogStyles.catalogServiceIcon}>
1415
<img width={20} height={20} src={serviceDetails.icon} alt='Service Icon' referrerPolicy='no-referrer' />
1516
&nbsp;
1617
<Tooltip placement='topLeft' title={serviceDetails.name}>
17-
<Paragraph ellipsis={true} className={'catalog-service-name'}>
18+
<Paragraph ellipsis={true} className={catalogStyles.catalogServiceName}>
1819
{serviceDetails.name}
1920
</Paragraph>
2021
</Tooltip>

‎src/components/content/catalog/services/menu/CatalogMainMenu.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55

66
import React from 'react';
77
import { useLocation } from 'react-router-dom';
8-
import { DeployedService } from '../../../../../xpanse-api/generated';
8+
import { ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
99
import CategoryCatalog from '../tree/CategoryCatalog';
1010

1111
export default function CatalogMainPage(): React.JSX.Element {
1212
const location = useLocation();
1313
const category = getCategory();
1414

15-
function getCategory(): DeployedService.category | undefined {
15+
function getCategory(): ServiceTemplateDetailVo.category | undefined {
1616
if (location.hash.split('#').length > 1) {
17-
return location.hash.split('#')[1] as DeployedService.category;
17+
return location.hash.split('#')[1] as ServiceTemplateDetailVo.category;
1818
}
1919
return undefined;
2020
}

‎src/components/content/catalog/services/policies/AddOrUpdateServicePolicy.tsx

+14-13
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { UploadOutlined } from '@ant-design/icons';
77
import { Alert, Button, Card, Form, Radio, RadioChangeEvent, Select, Upload, UploadFile } from 'antd';
88
import { RcFile } from 'antd/es/upload';
99
import React, { useRef, useState } from 'react';
10-
import '../../../../../styles/service_policies.css';
10+
import servicePolicyStyles from '../../../../../styles/service-policies.module.css';
11+
import submitAlertStyles from '../../../../../styles/submit-alert.module.css';
1112
import {
1213
ServicePolicy,
1314
ServicePolicyCreateRequest,
@@ -118,7 +119,7 @@ export const AddOrUpdateServicePolicy = ({
118119
setRegoFileUploadStatus('error');
119120
if (e instanceof Error) {
120121
return (
121-
<div className={'service-policy-submit-alert-tip'}>
122+
<div className={submitAlertStyles.submitAlertTip}>
122123
{' '}
123124
<Alert
124125
message={e.message}
@@ -133,7 +134,7 @@ export const AddOrUpdateServicePolicy = ({
133134
);
134135
} else {
135136
return (
136-
<div className={'service-policy-submit-alert-tip'}>
137+
<div className={submitAlertStyles.submitAlertTip}>
137138
{' '}
138139
<Alert
139140
message={'unhandled error occurred'}
@@ -209,7 +210,7 @@ export const AddOrUpdateServicePolicy = ({
209210
updatePoliciesManagementServiceRequest.isPending ||
210211
updatePoliciesManagementServiceRequest.isSuccess
211212
}
212-
className={'service-policy-edit-form-class'}
213+
className={servicePolicyStyles.servicePolicyEditFormClass}
213214
initialValues={{
214215
remember: true,
215216
enabled:
@@ -245,14 +246,14 @@ export const AddOrUpdateServicePolicy = ({
245246
size={'large'}
246247
onChange={handleFlavorSelect}
247248
placeholder={'Please select'}
248-
className={'service-policies-select-option-flavor'}
249+
className={servicePolicyStyles.servicePoliciesSelectOptionFlavor}
249250
value={[]}
250251
>
251252
{flavorList.current.map((flavor: string) => (
252253
<Select.Option
253254
key={flavor}
254255
value={flavor}
255-
className={'service-policies-select-option-flavor'}
256+
className={servicePolicyStyles.servicePoliciesSelectOptionFlavor}
256257
>
257258
{flavor}
258259
</Select.Option>
@@ -265,7 +266,7 @@ export const AddOrUpdateServicePolicy = ({
265266
rules={[{ required: true, message: 'Please upload policy file!' }]}
266267
>
267268
<div>
268-
<div className={'service-policy-upload-file-remove-buttons'}>
269+
<div className={servicePolicyStyles.servicePolicyUploadFileRemoveButtons}>
269270
<Upload
270271
name={'Policy Content File'}
271272
multiple={false}
@@ -294,9 +295,9 @@ export const AddOrUpdateServicePolicy = ({
294295
<br />
295296
<div>
296297
{policyContent.current ? (
297-
<Card className={'service-policy-content-upload-preview'}>
298+
<Card className={servicePolicyStyles.servicePolicyContentUploadPreview}>
298299
<pre>
299-
<div className={'service-policy-content-read-only-preview'}>
300+
<div className={servicePolicyStyles.servicePolicyContentReadOnlyPreview}>
300301
{policyContent.current}
301302
</div>
302303
</pre>
@@ -308,21 +309,21 @@ export const AddOrUpdateServicePolicy = ({
308309
</div>
309310
</Form.Item>
310311
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
311-
<div className={'service-policy-submit-reset-container'}>
312-
<div className={'service-policy-submit-class'}>
312+
<div className={servicePolicyStyles.servicePolicySubmitResetContainer}>
313+
<div className={servicePolicyStyles.servicePolicySubmitClass}>
313314
<Button type='primary' htmlType='submit'>
314315
Submit
315316
</Button>
316317
</div>
317318
{currentServicePolicy === undefined ? (
318-
<div className={'service-policy-reset-class'}>
319+
<div className={servicePolicyStyles.servicePolicyResetClass}>
319320
{' '}
320321
<Button htmlType='button' onClick={onReset}>
321322
Reset
322323
</Button>
323324
</div>
324325
) : (
325-
<div className={'service-policy-reset-class'}>
326+
<div className={servicePolicyStyles.servicePolicyResetClass}>
326327
{' '}
327328
<Button htmlType='button' onClick={onCancelUploadFile}>
328329
Cancel

0 commit comments

Comments
 (0)