fix: service connection key value alignment (#11439)

* fix: service connection key value alignment

* update custom data base icon
This commit is contained in:
Sachin Chaurasiya 2023-05-05 20:02:14 +05:30 committed by GitHub
parent df257c54e2
commit 20effbe82a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 34 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -16,7 +16,7 @@
// @ts-nocheck // @ts-nocheck
import { InfoCircleOutlined } from '@ant-design/icons'; import { InfoCircleOutlined } from '@ant-design/icons';
import { Card, Tooltip } from 'antd'; import { Card, Col, Row, Space, Tooltip } from 'antd';
import { StorageServiceType } from 'generated/entity/services/storageService'; import { StorageServiceType } from 'generated/entity/services/storageService';
import { get, isEmpty, isNull, isObject } from 'lodash'; import { get, isEmpty, isNull, isObject } from 'lodash';
import React, { ReactNode, useEffect, useState } from 'react'; import React, { ReactNode, useEffect, useState } from 'react';
@ -169,25 +169,32 @@ const ServiceConnectionDetails = ({
: {}; : {};
return ( return (
<div className="tw-w-1/2 tw-flex tw-nowrap tw-mb-3" key={key}> <Col span={12}>
<div className="tw-flex"> <Row>
<p className="tw-text-gray-500 tw-m-0">{title || key}:</p> <Col span={8}>
<Tooltip position="bottom" title={description} trigger="hover"> <Space size={0}>
<InfoCircleOutlined <p className="text-grey-muted m-0">{key || title}:</p>
className="tw-mx-1" <Tooltip
style={{ color: '#C4C4C4' }} position="bottom"
title={description}
trigger="hover">
<InfoCircleOutlined
className="tw-mx-1"
style={{ color: '#C4C4C4' }}
/>
</Tooltip>
</Space>
</Col>
<Col span={16}>
<input
readOnly
className="w-full tw-outline-none"
type={format !== 'password' ? 'text' : 'password'}
value={value}
/> />
</Tooltip> </Col>
</div> </Row>
<div className="tw-mx-3 tw-flex-1"> </Col>
<input
readOnly
className="tw-w-full tw-outline-none"
type={format !== 'password' ? 'text' : 'password'}
value={value}
/>
</div>
</div>
); );
} else { } else {
return null; return null;
@ -243,7 +250,7 @@ const ServiceConnectionDetails = ({
<div <div
className="d-flex flex-wrap p-xss" className="d-flex flex-wrap p-xss"
data-testid="service-connection-details"> data-testid="service-connection-details">
{data} <Row gutter={[8, 8]}>{data}</Row>
</div> </div>
</Card> </Card>
); );