UI : Addressing 0.9.0 Feedback Part 1 (#3269)

* UI : Addressing 0.9.0 Feedback Part 1

* Fix #3268 Blank page when clicked on owner in services
This commit is contained in:
Sachin Chaurasiya 2022-03-08 20:01:44 +05:30 committed by GitHub
parent 400a19752b
commit 37d93316ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 59 additions and 41 deletions

View File

@ -480,7 +480,7 @@ const DashboardDetails = ({
/> />
) : ( ) : (
<span className="tw-no-description"> <span className="tw-no-description">
No description added No description
</span> </span>
)} )}
</div> </div>

View File

@ -286,7 +286,7 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
/> />
) : ( ) : (
<span className="tw-no-description"> <span className="tw-no-description">
No description added No description
</span> </span>
)} )}
</td> </td>

View File

@ -609,11 +609,15 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
</div> </div>
)} )}
{activeTab === 4 && ( {activeTab === 4 && (
<div> <div
className="tw-py-4 tw-px-7 tw-grid tw-grid-cols-3 entity-feed-list"
id="tablequeries">
<div />
<TableQueries <TableQueries
isLoading={isQueriesLoading} isLoading={isQueriesLoading}
queries={tableQueries} queries={tableQueries}
/> />
<div />
</div> </div>
)} )}
{activeTab === 5 && ( {activeTab === 5 && (

View File

@ -230,9 +230,7 @@ const EntityInfoDrawer = ({
{entityDetail.description?.trim() ? ( {entityDetail.description?.trim() ? (
<RichTextEditorPreviewer markdown={entityDetail.description} /> <RichTextEditorPreviewer markdown={entityDetail.description} />
) : ( ) : (
<p className="tw-text-xs tw-text-grey-muted"> <p className="tw-text-xs tw-text-grey-muted">No description</p>
No description added
</p>
)} )}
</div> </div>
</section> </section>

View File

@ -558,7 +558,7 @@ const EntityTable = ({
/> />
) : ( ) : (
<span className="tw-no-description"> <span className="tw-no-description">
No description added{' '} No description{' '}
</span> </span>
)} )}
</div> </div>

View File

@ -426,7 +426,7 @@ const PipelineDetails = ({
/> />
) : ( ) : (
<span className="tw-no-description"> <span className="tw-no-description">
No description added{' '} No description{' '}
</span> </span>
)} )}
</div> </div>

View File

@ -288,7 +288,7 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
/> />
) : ( ) : (
<span className="tw-no-description"> <span className="tw-no-description">
No description added No description
</span> </span>
)} )}
</div> </div>

View File

@ -94,7 +94,7 @@ const QueryCard: FC<QueryCardProp> = ({ className, query }) => {
variant="text"> variant="text">
{showCopiedText ? ( {showCopiedText ? (
<span className="tw-mr-1 tw-text-success tw-bg-success-lite tw-px-1 tw-rounded-md"> <span className="tw-mr-1 tw-text-success tw-bg-success-lite tw-px-1 tw-rounded-md">
Copied! Copied to the clipboard
</span> </span>
) : null} ) : null}
<SVGIcons alt="copy" icon={Icons.COPY} width="16px" /> <SVGIcons alt="copy" icon={Icons.COPY} width="16px" />
@ -119,9 +119,13 @@ const TableQueries: FC<TableQueriesProp> = ({ queries, className }) => {
return ( return (
<div className={className}> <div className={className}>
<div className="tw-my-6"> <div className="tw-my-6">
{queries?.map((query, index) => ( {queries ? (
<QueryCard key={index} query={query} /> queries.map((query, index) => <QueryCard key={index} query={query} />)
))} ) : (
<div className="tw-mt-4 tw-ml-4 tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8">
<span>No queries data available.</span>
</div>
)}
</div> </div>
</div> </div>
); );

View File

@ -23,7 +23,7 @@ const mockItem = {
email: 'string@email.com', email: 'string@email.com',
isActiveUser: true, isActiveUser: true,
profilePhoto: '', profilePhoto: '',
teamCount: 2, teamCount: 'Cloud_Infra',
}; };
const mockRemove = jest.fn(); const mockRemove = jest.fn();

View File

@ -22,7 +22,7 @@ type Item = {
email: string; email: string;
isActiveUser: boolean; isActiveUser: boolean;
profilePhoto: string; profilePhoto: string;
teamCount: number; teamCount: string;
}; };
type Props = { type Props = {

View File

@ -81,10 +81,7 @@ const UserList: FunctionComponent<Props> = ({
default: default:
setUsers( setUsers(
userList.filter( userList.filter(
(user) => (user) => !user.isBot && isIncludes(user.displayName || user.name)
!user.isAdmin &&
!user.isBot &&
isIncludes(user.displayName || user.name)
) )
); );
@ -93,7 +90,7 @@ const UserList: FunctionComponent<Props> = ({
}; };
const setAllTabList = () => { const setAllTabList = () => {
setUsers(userList.filter((user) => !user.isAdmin && !user.isBot)); setUsers(userList.filter((user) => !user.isBot));
setAdmins(userList.filter((user) => user.isAdmin)); setAdmins(userList.filter((user) => user.isAdmin));
setBots(userList.filter((user) => user.isBot)); setBots(userList.filter((user) => user.isBot));
}; };
@ -310,11 +307,19 @@ const UserList: FunctionComponent<Props> = ({
email: user.email || '', email: user.email || '',
isActiveUser: !user.deleted, isActiveUser: !user.deleted,
profilePhoto: user.profile?.images?.image || '', profilePhoto: user.profile?.images?.image || '',
teamCount: user.teams?.length || 0, teamCount:
user.teams
?.map((team) => team.displayName ?? team.name)
?.join(', ') ?? '',
}; };
return ( return (
<UserDataCard item={User} key={index} onClick={selectUser} /> <div
className="tw-cursor-pointer"
key={index}
onClick={() => selectUser(User.id)}>
<UserDataCard item={User} onClick={selectUser} />
</div>
); );
})} })}
</div> </div>

View File

@ -67,7 +67,7 @@ const TableDataCardBody: FunctionComponent<Props> = ({
markdown={description} markdown={description}
/> />
) : ( ) : (
<span className="tw-no-description">No description added</span> <span className="tw-no-description">No description</span>
)} )}
</div> </div>
{Boolean(tags?.length) && ( {Boolean(tags?.length) && (

View File

@ -290,7 +290,7 @@ const SchemaTable: FunctionComponent<Props> = ({
/> />
) : ( ) : (
<span className="tw-no-description"> <span className="tw-no-description">
No description added No description
</span> </span>
)} )}
</div> </div>

View File

@ -514,7 +514,7 @@ const RolesPage = () => {
if (!rules.length) { if (!rules.length) {
return ( return (
<div className="tw-text-center tw-py-5"> <div className="tw-text-center tw-py-5">
<p className="tw-text-base">No Rules Added.</p> <p className="tw-text-base">No rules.</p>
</div> </div>
); );
} }
@ -818,14 +818,16 @@ const RolesPage = () => {
<NonAdminAction <NonAdminAction
position="bottom" position="bottom"
title={TITLE_FOR_NON_ADMIN_ACTION}> title={TITLE_FOR_NON_ADMIN_ACTION}>
<button <Button
className="link-text tw-underline" size="small"
theme="primary"
variant="outlined"
onClick={() => { onClick={() => {
setErrorData(undefined); setErrorData(undefined);
setIsAddingRole(true); setIsAddingRole(true);
}}> }}>
Click here Click here
</button> </Button>
{' to add new Role'} {' to add new Role'}
</NonAdminAction> </NonAdminAction>
</p> </p>

View File

@ -140,12 +140,12 @@ describe('Test RolesPage component', () => {
const { container } = render(<RolesPage />, { const { container } = render(<RolesPage />, {
wrapper: MemoryRouter, wrapper: MemoryRouter,
}); });
// checking No Rules Added. directly as there is no data available on 1st instance // checking No rules. directly as there is no data available on 1st instance
const usersButton = await findByTestId(container, 'users'); const usersButton = await findByTestId(container, 'users');
const teamsButton = await findByTestId(container, 'teams'); const teamsButton = await findByTestId(container, 'teams');
expect(await findByText(container, /No Rules Added./i)).toBeInTheDocument(); expect(await findByText(container, /No rules./i)).toBeInTheDocument();
fireEvent.click(usersButton); fireEvent.click(usersButton);

View File

@ -588,7 +588,7 @@ const DatabaseDetails: FunctionComponent = () => {
/> />
) : ( ) : (
<span className="tw-no-description"> <span className="tw-no-description">
No description added No description
</span> </span>
)} )}
</td> </td>

View File

@ -237,7 +237,7 @@ const ServicePage: FunctionComponent = () => {
key: 'Owner', key: 'Owner',
value: value:
serviceDetails?.owner?.type === 'team' serviceDetails?.owner?.type === 'team'
? getTeamDetailsPath(serviceDetails?.owner?.type || '') ? getTeamDetailsPath(serviceDetails?.owner?.name || '')
: serviceDetails?.owner?.name || '', : serviceDetails?.owner?.name || '',
placeholderText: serviceDetails?.owner?.displayName || '', placeholderText: serviceDetails?.owner?.displayName || '',
isLink: serviceDetails?.owner?.type === 'team', isLink: serviceDetails?.owner?.type === 'team',
@ -1061,7 +1061,7 @@ const ServicePage: FunctionComponent = () => {
/> />
) : ( ) : (
<span className="tw-no-description"> <span className="tw-no-description">
No description added No description
</span> </span>
)} )}
</td> </td>

View File

@ -556,7 +556,7 @@ const ServicesPage = () => {
/> />
) : ( ) : (
<span className="tw-no-description"> <span className="tw-no-description">
No description added No description
</span> </span>
)} )}
</div> </div>
@ -623,12 +623,14 @@ const ServicesPage = () => {
<NonAdminAction <NonAdminAction
position="bottom" position="bottom"
title={TITLE_FOR_NON_ADMIN_ACTION}> title={TITLE_FOR_NON_ADMIN_ACTION}>
<button <Button
className="link-text tw-underline"
data-testid="add-service-button" data-testid="add-service-button"
size="small"
theme="primary"
variant="outlined"
onClick={handleAddService}> onClick={handleAddService}>
Click here Click here
</button> </Button>
</NonAdminAction>{' '} </NonAdminAction>{' '}
to add new {servicesDisplayName[serviceName]} to add new {servicesDisplayName[serviceName]}
</p> </p>

View File

@ -387,7 +387,7 @@ const TagsPage = () => {
/> />
) : ( ) : (
<span className="tw-no-description"> <span className="tw-no-description">
No description added No description
</span> </span>
)} )}
</div> </div>

View File

@ -569,13 +569,16 @@ const TeamsPage = () => {
<NonAdminAction <NonAdminAction
position="bottom" position="bottom"
title={TITLE_FOR_NON_ADMIN_ACTION}> title={TITLE_FOR_NON_ADMIN_ACTION}>
<button <Button
className={classNames('link-text tw-underline', { className={classNames({
'tw-opacity-40': !isAdminUser && !isAuthDisabled, 'tw-opacity-40': !isAdminUser && !isAuthDisabled,
})} })}
size="small"
theme="primary"
variant="outlined"
onClick={() => setIsAddingTeam(true)}> onClick={() => setIsAddingTeam(true)}>
Click here Click here
</button> </Button>
</NonAdminAction> </NonAdminAction>
{' to add new Team'} {' to add new Team'}
</div> </div>