Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A4A Referrals: convert the actions field into proper actions #94250

Merged
merged 9 commits into from
Sep 11, 2024
Merged

A4A Referrals: convert the actions field into proper actions #94250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1fc00d0
Transform actions field into proper actions
oandregal Sep 5, 2024
c48b921
Remove unused styles
oandregal Sep 5, 2024
608712e
Do not hide the actions column
oandregal Sep 9, 2024
d964217
Remove click row behavior
oandregal Sep 9, 2024
2e23e62
Make client the primary field
oandregal Sep 9, 2024
a7e05a1
Remove styles that affect list
oandregal Sep 9, 2024
84b00ab
Do not add actions in list view
oandregal Sep 9, 2024
a08c26a
Custom styles for client
oandregal Sep 9, 2024
487199f
Remove comment
oandregal Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion client/a8c-for-agencies/sections/referrals/primary/referrals-overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,12 @@ export default function ReferralsOverview( {
const translate = useTranslate();
const dispatch = useDispatch();

const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( initialDataViewsState );
const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( {
...initialDataViewsState,
layout: {
primaryField: 'client',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This provides some styles (bolder, etc.), renders the field in a special place for list layout (comparing before/after, the field is rendered vertical aligned while before it was ). It also makes it not hidable in list layout and soon in table as well (see).

},
} );
const [ requiredNoticeClose, setRequiredNoticeClosed ] = useState( false );

const { value: referralEmail, setValue: setReferralEmail } = useUrlQueryParam(
Expand Down
95 changes: 29 additions & 66 deletions client/a8c-for-agencies/sections/referrals/referrals-list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button, Gridicon } from '@automattic/components';
import { useDesktopBreakpoint } from '@automattic/viewport-react';
import { filterSortAndPaginate } from '@wordpress/dataviews';
import { chevronRight } from '@wordpress/icons';
import { useTranslate } from 'i18n-calypso';
import { useMemo, useCallback, ReactNode, useEffect } from 'react';
import { DATAVIEWS_LIST } from 'calypso/a8c-for-agencies/components/items-dashboard/constants';
Expand All @@ -11,7 +11,7 @@ import { recordTracksEvent } from 'calypso/state/analytics/actions';
import { Referral, ReferralInvoice } from '../types';
import CommissionsColumn from './commissions-column';
import SubscriptionStatus from './subscription-status';
import type { Field } from '@wordpress/dataviews';
import type { Field, Action } from '@wordpress/dataviews';

import './style.scss';

Expand Down Expand Up @@ -48,62 +48,24 @@ export default function ReferralList( {
() =>
dataViewsState.selectedItem || ! isDesktop
? [
// Show the client column as a button on mobile
{
id: 'client',
label: translate( 'Client' ).toUpperCase(),
getValue: () => '-',
render: ( { item }: { item: Referral } ): ReactNode => (
<Button
className="view-details-button client-email-button"
data-client-id={ item.client.id }
onClick={ () => openSitePreviewPane( item ) }
borderless
>
{ item.client.email }
</Button>
<span className="a4a-referrals-client">{ item.client.email }</span>
),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to make it look the same as before, so added this class to target it. Is this the proper naming structure?

width: '100%',
enableHiding: false,
enableSorting: false,
},
// Only show the actions column only on mobile
...( ! dataViewsState.selectedItem
? [
{
id: 'actions',
label: '',
render: ( { item }: { item: Referral } ) => (
<div>
<Button
className="view-details-button"
onClick={ () => openSitePreviewPane( item ) }
borderless
>
<Gridicon icon="chevron-right" />
</Button>
</div>
),
enableHiding: false,
enableSorting: false,
},
]
: [] ),
]
: [
{
id: 'client',
label: translate( 'Client' ).toUpperCase(),
getValue: () => '-',
render: ( { item }: { item: Referral } ): ReactNode => (
<Button
className="view-details-button"
data-client-id={ item.client.id }
onClick={ () => openSitePreviewPane( item ) }
borderless
>
{ item.client.email }
</Button>
<span className="a4a-referrals-client">{ item.client.email }</span>
),
enableHiding: false,
enableSorting: false,
Expand Down Expand Up @@ -154,25 +116,8 @@ export default function ReferralList( {
enableHiding: false,
enableSorting: false,
},
{
id: 'actions',
label: translate( 'Actions' ).toUpperCase(),
render: ( { item }: { item: Referral } ) => (
<div>
<Button
className="view-details-button action-button"
onClick={ () => openSitePreviewPane( item ) }
borderless
>
<Gridicon icon="chevron-right" />
</Button>
</div>
),
enableHiding: false,
enableSorting: false,
},
],
[ dataViewsState.selectedItem, isDesktop, openSitePreviewPane, referralInvoices, translate ]
[ dataViewsState.selectedItem, isDesktop, referralInvoices, translate ]
);

useEffect( () => {
Expand Down Expand Up @@ -220,7 +165,25 @@ export default function ReferralList( {
};
}, [ dataViewsState ] );

const { data: items, paginationInfo } = useMemo( () => {
const actions: Action< Referral >[] = useMemo( () => {
if ( dataViewsState.type === 'table' ) {
return [
{
id: 'view-details',
label: translate( 'View Details' ),
isPrimary: true,
icon: chevronRight,
callback( items ) {
openSitePreviewPane( items[ 0 ] );
},
},
];
}

return [];
}, [ openSitePreviewPane, translate, dataViewsState.type ] );

const { data: items, paginationInfo: pagination } = useMemo( () => {
return filterSortAndPaginate( referrals, dataViewsState, fields );
}, [ referrals, dataViewsState, fields ] );

Expand All @@ -236,12 +199,12 @@ export default function ReferralList( {
openSitePreviewPane( referral );
}
},
pagination: paginationInfo,
pagination,
enableSearch: false,
fields: fields,
actions: [],
setDataViewsState: setDataViewsState,
dataViewsState: dataViewsState,
fields,
actions,
setDataViewsState,
dataViewsState,
defaultLayouts: { table: {} },
} }
/>
Expand Down
14 changes: 3 additions & 11 deletions client/a8c-for-agencies/sections/referrals/referrals-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.theme-a8c-for-agencies .button.client-email-button {
max-width: 215px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;

@include break-medium {
max-width: unset;

}
.a4a-referrals-client {
font-size: 0.875rem;
color: var(--color-accent-80);
}
4 changes: 0 additions & 4 deletions client/a8c-for-agencies/sections/sites/sites-dataviews/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,6 @@
color: var(--color-jetpack-50);
}

.dataviews-view-table__actions-column {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if this style (and the other two in a8c-for-agencies & components/dataviews) is affecting any other screen.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not as far as I've reviewed: A4A Sites, A4A Sites Import Modal, A4A Referrals Details, A4A Team, Dotcom Sites.

Also, DataViews doesn't render the actions column if no actions are declared. Not sure why this rule was necessary.

display: none;
}

thead {
th.sites-dataviews__site {
background: var(--color-light-backdrop);
Expand Down
13 changes: 0 additions & 13 deletions client/a8c-for-agencies/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -600,21 +600,8 @@ html {
padding-inline-start: 16px;
}
}

th[data-field-id="actions"] {
text-align: right;
padding-inline-end: 16px;
}
}

.dataviews-view-list li {
cursor: pointer;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is already taken care of in dataviews.

}

.dataviews-view-list li .components-h-stack {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure what this was for, but it was creating some issues with vertical alignment and spacing in the list view when actions were visible.

display: block;
width: 100%;
}
}

.full-width-layout-with-table {
Expand Down
4 changes: 0 additions & 4 deletions client/components/dataviews/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,10 +108,6 @@
color: var(--studio-jetpack-green-50);
}

.dataviews-view-table__actions-column {
display: none;
}

thead .dataviews-view-table__row th {
span,
button {
Expand Down
4 changes: 0 additions & 4 deletions client/hosting/sites/components/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,6 @@
padding: 0;
}
}
th[data-field-id="actions"] {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DataViews no longer includes data-field-id since 4.0.0 (see)

padding-inline-end: 16px;
text-align: end;
}
@media (min-width: $break-large) {
background: inherit;

Expand Down
4 changes: 0 additions & 4 deletions client/jetpack-cloud/sections/agency-dashboard/sites-overview/sites-dataviews/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,6 @@
color: var(--studio-jetpack-green-50);
}

.dataviews-view-table__actions-column {
display: none;
}

thead {
th.sites-dataviews__site {
background: var(--studio-white);
Expand Down
Loading