make myServices table can be selectable.

Author: Alice1319

package-lock.json

@@ -15,6 +15,7 @@
         "rc-tabs": "^15.5.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-responsive": "^10.0.1",
         "react-router-dom": "^7.2.0",
         "react-timer-hook": "^3.0.8",
         "yaml": "^2.6.1",

package.json

@@ -18,6 +18,7 @@ import {
     PoweroffOutlined,
     RedoOutlined,
     RiseOutlined,
+    SettingOutlined,
     SyncOutlined,
 } from '@ant-design/icons';
 import { useQueryClient } from '@tanstack/react-query';
@@ -34,9 +35,10 @@ import {
     TablePaginationConfig,
     Tooltip,
 } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { ColumnsType, ColumnType } from 'antd/es/table';
 import { ColumnFilterItem, FilterValue, SorterResult } from 'antd/es/table/interface';
 import React, { useEffect, useMemo, useState } from 'react';
+import { useMediaQuery } from 'react-responsive';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { v4 } from 'uuid';
 import myServicesStyles from '../../../../styles/my-services.module.css';
@@ -104,6 +106,9 @@ import {
     isDisableServiceConfigBtn,
     isDisableServicePortingBtn,
     isDisableStartBtn,
+    Option,
+    showForMediumScreenColumn,
+    showForSmallScreenColumn,
     updateBillingModeFilters,
     updateCategoryFilters,
     updateCspFilters,
@@ -120,6 +125,7 @@ import useGetOrderableServiceDetailsByServiceIdQuery from './query/useGetOrderab
 import useListDeployedServicesDetailsQuery, {
     getListDeployedServicesDetailsQueryKey,
 } from './query/useListDeployedServicesDetailsQuery';
+import { SelectMyServicesColumns } from './SelectMyServicesColumns.tsx';
 import { TooltipWhenDetailsDisabled } from './TooltipWhenDetailsDisabled.tsx';
 
 function MyServices(): React.JSX.Element {
@@ -226,6 +232,10 @@ function MyServices(): React.JSX.Element {
     const [isLocksModalOpen, setIsLocksModalOpen] = useState<boolean>(false);
 
     const [uniqueRequestId, setUniqueRequestId] = useState<string>(v4());
+    const [isColumnSelectorVisible, setIsColumnSelectorVisible] = useState(false);
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+    const isLargeScreen = useMediaQuery({ minWidth: 1200 });
+    const isMediumScreen = useMediaQuery({ minWidth: 768, maxWidth: 1199 });
 
     const serviceDestroyQuery = useDestroyRequestSubmitQuery();
     const servicePurgeQuery = usePurgeRequestSubmitQuery();
@@ -1027,6 +1037,8 @@ function MyServices(): React.JSX.Element {
         },
     ];
 
+    const [selectedColumns, setSelectedColumns] = useState<ColumnsType<DeployedService>>(columns);
+
     const closeDestroyResultAlert = (isClose: boolean) => {
         if (isClose) {
             setActiveRecord(undefined);
@@ -1327,6 +1339,59 @@ function MyServices(): React.JSX.Element {
         });
     };
 
+    const handleColumnsSelectAll = () => {
+        setCheckedValues(columnOptions.map((option) => option.value));
+    };
+
+    const handleColumnsSelectNone = () => {
+        setCheckedValues([]);
+    };
+
+    const columnOptions: Option[] = columns.map((column) => ({
+        label: column.title as string,
+        value: (column as ColumnType<DeployedService>).dataIndex as string,
+    }));
+
+    const handleColumnChange = (checkedValues: string[]) => {
+        setCheckedValues(checkedValues);
+    };
+
+    const handleColumnSelectorOpen = () => {
+        setIsColumnSelectorVisible(true);
+    };
+
+    const handleColumnSelectorSubmit = () => {
+        setIsColumnSelectorVisible(false);
+        if (checkedValues.length > 0) {
+            const selectedColumns = columns.filter((column) =>
+                checkedValues.includes((column as ColumnType<DeployedService>).dataIndex as string)
+            );
+            setSelectedColumns(selectedColumns);
+        }
+    };
+
+    const handleColumnSelectorClose = () => {
+        setIsColumnSelectorVisible(false);
+    };
+
+    useEffect(() => {
+        let defaultColumns;
+
+        if (isLargeScreen) {
+            defaultColumns = columns;
+        } else if (isMediumScreen) {
+            defaultColumns = columns.filter((col) =>
+                showForMediumScreenColumn.includes((col as ColumnType<DeployedService>).dataIndex as string)
+            );
+        } else {
+            defaultColumns = columns.filter((col) =>
+                showForSmallScreenColumn.includes((col as ColumnType<DeployedService>).dataIndex as string)
+            );
+        }
+        setSelectedColumns(defaultColumns);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isLargeScreen, isMediumScreen]);
+
     return (
         <div className={tableStyles.genericTableContainer}>
             {isDestroyRequestSubmitted && activeRecord ? (
@@ -1535,6 +1600,23 @@ function MyServices(): React.JSX.Element {
                 </Modal>
             ) : null}
 
+            <Modal
+                title={'Select Columns'}
+                open={isColumnSelectorVisible}
+                onCancel={handleColumnSelectorClose}
+                onOk={handleColumnSelectorSubmit}
+                width={800}
+                destroyOnClose={true}
+            >
+                <SelectMyServicesColumns
+                    checkedValues={checkedValues}
+                    columnOptions={columnOptions}
+                    handleColumnChange={handleColumnChange}
+                    handleColumnsSelectAll={handleColumnsSelectAll}
+                    handleColumnsSelectNone={handleColumnsSelectNone}
+                />
+            </Modal>
+
             <div>
                 <Button
                     disabled={activeRecord !== undefined}
@@ -1546,6 +1628,10 @@ function MyServices(): React.JSX.Element {
                 >
                     refresh
                 </Button>
+                &nbsp;&nbsp;&nbsp;
+                <Button type='primary' icon={<SettingOutlined />} onClick={handleColumnSelectorOpen}>
+                    Select Columns
+                </Button>
             </div>
             {listDeployedServicesQuery.isError ? (
                 <>
@@ -1562,7 +1648,7 @@ function MyServices(): React.JSX.Element {
             <Row>
                 <div className={myServicesStyles.serviceInstanceList}>
                     <Table
-                        columns={columns}
+                        columns={selectedColumns}
                         dataSource={serviceVoList}
                         loading={listDeployedServicesQuery.isPending || listDeployedServicesQuery.isRefetching}
                         rowKey={'id'}

src/components/content/deployedServices/myServices/MyServices.tsx

@@ -0,0 +1,54 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Col, Row } from 'antd';
+import React from 'react';
+import myServicesStyles from '../../../../styles/my-services.module.css';
+import { Option } from './myServiceProps.tsx';
+
+export const SelectMyServicesColumns = ({
+    checkedValues,
+    columnOptions,
+    handleColumnChange,
+    handleColumnsSelectAll,
+    handleColumnsSelectNone,
+}: {
+    checkedValues: string[];
+    columnOptions: Option[];
+    handleColumnChange: (checkedValues: string[]) => void;
+    handleColumnsSelectAll: () => void;
+    handleColumnsSelectNone: () => void;
+}): React.JSX.Element => {
+    return (
+        <div>
+            <div className={myServicesStyles.selectColumnsButton}>
+                <Button type='primary' onClick={handleColumnsSelectAll}>
+                    <CheckCircleOutlined />
+                    Select All
+                </Button>
+                &nbsp;&nbsp;
+                <Button type='default' onClick={handleColumnsSelectNone}>
+                    <CloseCircleOutlined /> Cancel
+                </Button>
+            </div>
+            <div className={myServicesStyles.columnsContainer}>
+                <Checkbox.Group
+                    className={myServicesStyles.selectColumns}
+                    onChange={handleColumnChange}
+                    value={checkedValues}
+                >
+                    <Row>
+                        {columnOptions.map((option, index) => (
+                            <Col span={8} key={index}>
+                                <Checkbox value={option.value}>{option.label}</Checkbox>
+                            </Col>
+                        ))}
+                    </Row>
+                </Checkbox.Group>
+            </div>
+        </div>
+    );
+};

src/components/content/deployedServices/myServices/SelectMyServicesColumns.tsx

@@ -401,3 +401,26 @@ export const isDisableRecreateBtn = (
     }
     return false;
 };
+
+export interface Option {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+export const showForMediumScreenColumn = [
+    'serviceId',
+    'name',
+    'version',
+    'serviceHostingType',
+    'billingMode',
+    'region',
+    'csp',
+    'flavor',
+    'createdTime',
+    'serviceDeploymentState',
+    'serviceState',
+    'operation',
+];
+
+export const showForSmallScreenColumn = ['serviceId', 'name', 'serviceDeploymentState', 'serviceState', 'operation'];

src/components/content/deployedServices/myServices/myServiceProps.tsx

@@ -114,3 +114,15 @@
     align-items: center;
     font-size: 12px;
 }
+
+.select-columns {
+    width: 100%;
+}
+
+.select-column-button {
+    margin-bottom: 100px;
+}
+
+.columns-container {
+    margin-top: 10px;
+}