Skip to content
This repository has been archived by the owner on Jul 2, 2024. It is now read-only.

Commit

Permalink
DEVPROD-4944: Remove column filters & guide cue from GroupedFileTable (…
Browse files Browse the repository at this point in the history 
…#2289)
  • Loading branch information
@minnakt
minnakt authored Mar 7, 2024
1 parent 88b356c commit d5372c4
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 67 deletions.
1 change: 0 additions & 1 deletion src/constants/cookies.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export const INCLUDE_COMMIT_QUEUE_USER_PATCHES =
"include-commit-queue-user-patches";
export const INCLUDE_HIDDEN_PATCHES = "include-hidden-patches";
export const SEEN_HONEYCOMB_GUIDE_CUE = "seen-honeycomb-guide-cue";
export const SEEN_PARSLEY_FILES_GUIDE_CUE = "seen-parsley-files-guide-cue";
export const SEEN_MIGRATE_GUIDE_CUE = "seen-migrate-guide-cue";
export const SLACK_NOTIFICATION_BANNER = "has-closed-slack-banner";
export const SUBSCRIPTION_METHOD = "subscription-method";
164 changes: 162 additions & 2 deletions ...task/taskTabs/FileTable/GroupedFileTable/__snapshots__/GroupedFileTable.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,168 @@

exports[`Snapshot Tests GroupedFileTable.stories DefaultTable 1`] = `
<div>
<div>
Failed to render component.
<div
class="css-t0zpzm-Container epe837f1"
>
<h6
class="leafygreen-ui-19p3n10"
>
Task 1
</h6>
<div
class="leafygreen-ui-1xn4uvd css-1wf6e6y-StyledTable e1bwwd861"
tabindex="0"
>
<table
class="leafygreen-ui-1soynca"
>
<thead
class="leafygreen-ui-bebmcm"
>
<tr>
<th
class="leafygreen-ui-jcfir4"
scope="col"
>
<div
class="leafygreen-ui-ui0te9"
>
Name
<button
aria-disabled="false"
aria-label="Sort by Name"
class="leafygreen-ui-76dd2i"
data-testid="lg-table-sort-icon-button"
tabindex="0"
>
<div
class="leafygreen-ui-xhlipt"
>
<svg
aria-label="Unsorted Icon"
class="leafygreen-ui-jc2z8v"
fill="none"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.685 1.143c.22-.19.545-.19.765 0l2.482 2.149a.584.584 0 0 1-.383 1.026H5.236v7.364H6.55c.541 0 .792.672.383 1.026l-2.482 2.15a.584.584 0 0 1-.765 0l-2.482-2.15a.584.584 0 0 1 .383-1.026h1.312V4.318H1.586a.584.584 0 0 1-.383-1.026l2.482-2.15ZM8 8a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1ZM9 4a1 1 0 0 0 0 2h5a1 1 0 1 0 0-2H9ZM8 11a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z"
fill="currentColor"
/>
</svg>
</div>
</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr
aria-hidden="false"
class="leafygreen-ui-vi96c4"
data-cy="leafygreen-table-row"
data-selected="false"
id="lg-table-row-0"
>
<td
class="leafygreen-ui-3nxf8o"
style="padding-bottom: 4px; padding-top: 4px;"
>
<div
class="leafygreen-ui-15rig1x"
data-state="entered"
>
<div
class="css-1iffxfz-CellContainer epe837f0"
>
<a
class="lg-ui-0001 css-16hif17-StyledLink leafygreen-ui-1gfngq5"
data-cy="file-link"
href="some_link"
target="_blank"
>
<span
class="leafygreen-ui-1ewnca3"
>
some_file
</span>
</a>
<button
aria-disabled="true"
class="lg-ui-button-0000 leafygreen-ui-1x3ok4"
data-cy="parsley-link"
target="_blank"
type="button"
>
<div
class="leafygreen-ui-v038xi"
/>
<div
class="leafygreen-ui-v95oty"
>
Parsley
</div>
</button>
</div>
</div>
</td>
</tr>
<tr
aria-hidden="false"
class="leafygreen-ui-vi96c4"
data-cy="leafygreen-table-row"
data-selected="false"
id="lg-table-row-1"
>
<td
class="leafygreen-ui-3nxf8o"
style="padding-bottom: 4px; padding-top: 4px;"
>
<div
class="leafygreen-ui-15rig1x"
data-state="entered"
>
<div
class="css-1iffxfz-CellContainer epe837f0"
>
<a
class="lg-ui-0001 css-16hif17-StyledLink leafygreen-ui-1gfngq5"
data-cy="file-link"
href="another_link"
target="_blank"
>
<span
class="leafygreen-ui-1ewnca3"
>
another_file
</span>
</a>
<a
aria-disabled="false"
class="lg-ui-button-0000 leafygreen-ui-q3ln33"
data-cy="parsley-link"
href="parsley_link"
target="_blank"
>
<div
class="leafygreen-ui-v038xi"
/>
<div
class="leafygreen-ui-v95oty"
>
Parsley
</div>
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
`;
70 changes: 7 additions & 63 deletions src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { useMemo, useRef } from "react";
import styled from "@emotion/styled";
import Button from "@leafygreen-ui/button";
import { GuideCue } from "@leafygreen-ui/guide-cue";
import { useLeafyGreenTable, LGColumnDef } from "@leafygreen-ui/table";
import Tooltip from "@leafygreen-ui/tooltip";
import { Subtitle } from "@leafygreen-ui/typography";
import Cookies from "js-cookie";
import { useTaskAnalytics } from "analytics";
import { StyledLink } from "components/styles";
import { BaseTable } from "components/Table/BaseTable";
import { SEEN_PARSLEY_FILES_GUIDE_CUE } from "constants/cookies";
import { size } from "constants/tokens";
import { Unpacked } from "types/utils";
import { GroupedFiles } from "../types";
Expand All @@ -18,10 +15,6 @@ type GroupedFilesFile = Unpacked<GroupedFiles["files"]>;

const columns = (
taskAnalytics: ReturnType<typeof useTaskAnalytics>,
options: {
gudeCueTriggerRef: React.RefObject<HTMLAnchorElement>;
firstParsleyFileIndex: number;
},
): LGColumnDef<GroupedFilesFile>[] => [
{
accessorKey: "name",
Expand Down Expand Up @@ -54,11 +47,6 @@ const columns = (
target="_blank"
disabled={value.row.original.urlParsley === null}
size="small"
ref={
options && options.firstParsleyFileIndex === value.row.index
? options.gudeCueTriggerRef
: null
}
onClick={() => {
taskAnalytics.sendEvent({
name: "Click Task File Parsley Link",
Expand Down Expand Up @@ -91,68 +79,24 @@ const GroupedFileTable: React.FC<GroupedFileTableProps> = ({
}) => {
const tableContainerRef = useRef<HTMLDivElement>(null);
const taskAnalytics = useTaskAnalytics();
const [openGuideCue, setOpenGuideCue] = useState(
Cookies.get(SEEN_PARSLEY_FILES_GUIDE_CUE) !== "true",
);
const firstParsleyFileIndex = useMemo(
() => files.findIndex((file) => file.urlParsley !== null),
[files],
);
const parsleyLinkRef = useRef<HTMLAnchorElement>(null);

const memoizedColumns = useMemo(
() =>
columns(
taskAnalytics,
firstParsleyFileIndex !== -1
? {
gudeCueTriggerRef: parsleyLinkRef,
firstParsleyFileIndex,
}
: {
gudeCueTriggerRef: null,
firstParsleyFileIndex: -1,
},
),
[taskAnalytics, firstParsleyFileIndex],
() => columns(taskAnalytics),
[taskAnalytics],
);
useEffect(() => {
// Scroll to the first file that can be opened in parsley on initial render.
// Since the button may not always be in view, we need to scroll to it.
if (firstParsleyFileIndex !== -1 && openGuideCue) {
parsleyLinkRef.current?.scrollIntoView();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const table = useLeafyGreenTable<GroupedFilesFile>({
containerRef: tableContainerRef,
data: files,
columns: memoizedColumns,
defaultColumn: {
enableColumnFilter: false,
},
});

return (
<Container>
{taskName && <Subtitle>{taskName}</Subtitle>}
{parsleyLinkRef.current !== null && (
<GuideCue
data-cy="migrate-cue"
open={openGuideCue}
setOpen={setOpenGuideCue}
title="New Feature!"
refEl={parsleyLinkRef}
numberOfSteps={1}
currentStep={1}
onPrimaryButtonClick={() => {
Cookies.set(SEEN_PARSLEY_FILES_GUIDE_CUE, "true", {
expires: 365,
});
setOpenGuideCue(false);
}}
>
Open your file in Parsley to view it with Parsley&apos;s rich text
formatting capabilities.
</GuideCue>
)}
<BaseTable table={table} shouldAlternateRowColor />
</Container>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/task/taskTabs/FileTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ const FileTable: React.FC<FileTableProps> = ({ execution, taskId }) => {
},
);
const { files } = data?.task ?? {};

const { groupedFiles = [] } = files ?? {};
const filteredGroupedFiles = filterGroupedFiles(groupedFiles, search);

Expand Down Expand Up @@ -68,6 +67,7 @@ const FilesTableSkeleton = () => (
</>
);
const StyledSearchInput = styled(SearchInput)`
margin-left: ${size.xxs};
margin-bottom: ${size.m};
width: 400px;
`;
Expand Down

0 comments on commit d5372c4

Please sign in to comment.