Skip to content

Conversation

@lilyli9
Copy link
Contributor

@lilyli9 lilyli9 commented Feb 24, 2023

This adds more detail to the delete datadoc cell confirmation page to help users check which cell will be deleted. The confirmation page new details include the type of cell (text/query/chart), the name of the cell if it exists, and a query cell preview for query datadoc cells. This cell preview is uneditable, and shows a scroll bar for longer queries.

Screen Shot 2023-02-24 at 11 46 36 AM
Screen Shot 2023-02-24 at 11 46 24 AM
Screen Shot 2023-02-24 at 11 46 47 AM

Currently the cell preview has a known issue where queries less than 10 lines will overlap with the query line count, depicted in the below screenshot. We were unable to fix this overlap, but otherwise the cell preview works as expected.

Screen Shot 2023-02-24 at 11 47 23 AM

* feat: update delete cell confirmation popup

* fix: Remove extra space if cell doesn't have a name

* fix: Extract DataDocDeletePreview as a separate component

Co-authored-by: Dave Bauman <[email protected]>
}
};
if (shouldConfirm) {
let cellName = '';
Copy link
Collaborator

Choose a reason for hiding this comment

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

this part is same as

cellName = ` ${cell.meta.title ?? ''}`

Copy link
Contributor Author

@lilyli9 lilyli9 Feb 24, 2023

Choose a reason for hiding this comment

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

Structured this part in this way to avoid the below linting error.

Property 'title' does not exist on type 'IDataQueryCellMeta | IDataCellMetaBase | IDataChartCellMeta'.
  Property 'title' does not exist on type 'IDataCellMetaBase'.

export const DataDocDeletePreview: React.FunctionComponent<IProps> = ({
cell,
}) => {
const [query, setQuery] = useState<string>();
Copy link
Collaborator

Choose a reason for hiding this comment

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

why do you need query as a state? vs

const query = cell.context as string

cell: IDataCell;
}

export const DataDocDeletePreview: React.FunctionComponent<IProps> = ({
Copy link
Collaborator

Choose a reason for hiding this comment

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

probably don't need another component for this

Copy link
Contributor Author

@lilyli9 lilyli9 Feb 24, 2023

Choose a reason for hiding this comment

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

Responding to this and the previous comment, the separate component was added because without it CodeMirror wouldn't show the query contents when the delete confirmation first loaded. The fix we found was to force it to rerender by changing the state variable with useEffect, which isn't possible without a separate component.

@lilyli9 lilyli9 requested a review from czgu February 24, 2023 20:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants