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.

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

Build empty state for remote tables #5652

Merged
merged 4 commits into from
May 31, 2024
Merged

Conversation

thomtrp
Copy link
Contributor

@thomtrp thomtrp commented May 29, 2024

Remote tables could be in an empty state because:

  • either we do not have data, which is normal
  • either the connexion is broken (issue with the server, table requires updates...)

Apollo throws errors but these will quickly disappear and do not provide any tips to the user on how handle those.

This PR adds a new empty state placeholder for remote objects, that will be display when the record list is empty. It will provide a link to the settings page.

Capture d’écran 2024-05-30 à 11 49 33

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

PR Summary

  • Introduced an empty state placeholder for remote tables in RecordTable.tsx
  • Added recordTableId parameter to useLoadRecordIndexTable.ts and useRecordTableRecordGqlFields.ts
  • Modified RecordTableBody.tsx to accept tableRowIds as a prop
  • Added RecordTableEmptyState.tsx component for user-friendly empty state messages

Icon={IconSettings}
title="Go to Settings"
variant={'secondary'}
onClick={() => () => navigate('/settings/integrations')}
Copy link
Contributor

Choose a reason for hiding this comment

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

Remove the extra arrow function to avoid unnecessary nesting: onClick={() => navigate('/settings/integrations')}.

@thomtrp thomtrp force-pushed the tt-remote-table-empty-state branch from bc6ca62 to 5f886e3 Compare May 29, 2024 15:33
const { tableRowIdsState } = useRecordTableStates(recordTableId);
const tableRowIds = useRecoilValue(tableRowIdsState);

const { loading } = useLoadRecordIndexTable(
Copy link
Member

Choose a reason for hiding this comment

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

RecordIndex is the parent page which loading either the RecordTable or the RecordBoard. We should not call a recordIndex hook within the table, the dependency is in the wrong way

Copy link
Member

@charlesBochet charlesBochet left a comment

Choose a reason for hiding this comment

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

I am not sure to understand the changes here:

  • why pass tableRowIds to RecordTableBody instead of using recoil state?
  • why drilling recordTableId? wasn't it working before

The dependency is also in the wrong way between recordIndexTable and RecordTable (it's actually kind of anti-pattern in the code I remember)

@thomtrp thomtrp force-pushed the tt-remote-table-empty-state branch from 5f886e3 to 9464b1d Compare May 30, 2024 09:50
isRemote: boolean;
};

export const RecordTableEmptyState = ({
Copy link
Member

Choose a reason for hiding this comment

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

let's add stories here!

@thomtrp thomtrp force-pushed the tt-remote-table-empty-state branch from 541e42b to ca2e6e9 Compare May 31, 2024 09:10
@thomtrp thomtrp merged commit fe941c6 into main May 31, 2024
13 checks passed
@thomtrp thomtrp deleted the tt-remote-table-empty-state branch May 31, 2024 09:24
Weiko pushed a commit that referenced this pull request May 31, 2024
Remote tables could be in an empty state because:
- either we do not have data, which is normal
- either the connexion is broken (issue with the server, table requires
updates...)

Apollo throws errors but these will quickly disappear and do not provide
any tips to the user on how handle those.

This PR adds a new empty state placeholder for remote objects, that will
be display when the record list is empty. It will provide a link to the
settings page.

<img width="1512" alt="Capture d’écran 2024-05-30 à 11 49 33"
src="https://github.com/twentyhq/twenty/assets/22936103/fc2dd3cc-e90b-4033-b023-83ac9ff2a70b">
arnavsaxena17 pushed a commit to arnavsaxena17/twenty that referenced this pull request Oct 6, 2024
Remote tables could be in an empty state because:
- either we do not have data, which is normal
- either the connexion is broken (issue with the server, table requires
updates...)

Apollo throws errors but these will quickly disappear and do not provide
any tips to the user on how handle those.

This PR adds a new empty state placeholder for remote objects, that will
be display when the record list is empty. It will provide a link to the
settings page.

<img width="1512" alt="Capture d’écran 2024-05-30 à 11 49 33"
src="https://github.com/twentyhq/twenty/assets/22936103/fc2dd3cc-e90b-4033-b023-83ac9ff2a70b">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants