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">
No description added
No description
</span>
)}
</div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -94,7 +94,7 @@ const QueryCard: FC<QueryCardProp> = ({ className, query }) => {
variant="text">
{showCopiedText ? (
<span className="tw-mr-1 tw-text-success tw-bg-success-lite tw-px-1 tw-rounded-md">
Copied!
Copied to the clipboard
</span>
) : null}
<SVGIcons alt="copy" icon={Icons.COPY} width="16px" />
@ -119,9 +119,13 @@ const TableQueries: FC<TableQueriesProp> = ({ queries, className }) => {
return (
<div className={className}>
<div className="tw-my-6">
{queries?.map((query, index) => (
<QueryCard key={index} query={query} />
))}
{queries ? (
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>
);

View File

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

View File

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

View File

@ -81,10 +81,7 @@ const UserList: FunctionComponent<Props> = ({
default:
setUsers(
userList.filter(
(user) =>
!user.isAdmin &&
!user.isBot &&
isIncludes(user.displayName || user.name)
(user) => !user.isBot && isIncludes(user.displayName || user.name)
)
);
@ -93,7 +90,7 @@ const UserList: FunctionComponent<Props> = ({
};
const setAllTabList = () => {
setUsers(userList.filter((user) => !user.isAdmin && !user.isBot));
setUsers(userList.filter((user) => !user.isBot));
setAdmins(userList.filter((user) => user.isAdmin));
setBots(userList.filter((user) => user.isBot));
};
@ -310,11 +307,19 @@ const UserList: FunctionComponent<Props> = ({
email: user.email || '',
isActiveUser: !user.deleted,
profilePhoto: user.profile?.images?.image || '',
teamCount: user.teams?.length || 0,
teamCount:
user.teams
?.map((team) => team.displayName ?? team.name)
?.join(', ') ?? '',
};
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>

View File

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

View File

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

View File

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

View File

@ -140,12 +140,12 @@ describe('Test RolesPage component', () => {
const { container } = render(<RolesPage />, {
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 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);

View File

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

View File

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

View File

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

View File

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

View File

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