Merge branch 'main' into use-repos-tier-plan

src/pages/PullRequestPage/subroute/FilesChangedTab/FilesChanged/FilesChanged.jsx

@@ -1,146 +1,104 @@
-import Table from 'old_ui/Table'
-import A from 'ui/A'
+import isNil from 'lodash/isNil'
+
+import { CommitStateEnum } from 'shared/utils/commit'
+import { ComparisonReturnType } from 'shared/utils/comparison'
 import Spinner from 'ui/Spinner'
-import TotalsNumber from 'ui/TotalsNumber'
 
 import { useImpactedFilesTable } from './hooks'
-import NameColumn from './NameColumn'
-
-import FileDiff from '../FileDiff'
-
-const columns = [
-  {
-    id: 'name',
-    header: 'Name',
-    accessorKey: 'name',
-    width: 'w-8/12 min-w-min',
-    cell: ({ row, getValue }) => <NameColumn row={row} getValue={getValue} />,
-    justifyStart: true,
-  },
-  {
-    id: 'missesCount',
-    header: 'Missed lines',
-    accessorKey: 'missesCount',
-    width: 'w-56 min-w-min',
-    cell: (info) => info.getValue(),
-  },
-  {
-    id: 'head',
-    header: <span className="w-full text-right font-mono">HEAD %</span>,
-    accessorKey: 'head',
-    width: 'w-36 min-w-min',
-    cell: (info) => info.getValue(),
-  },
-  {
-    id: 'patch',
-    header: <span className="w-full text-right text-sm">Patch %</span>,
-    accessorKey: 'patch',
-    width: 'w-36 min-w-min',
-    cell: (info) => info.getValue(),
-  },
-  {
-    id: 'change',
-    header: <span className="w-full text-right">Change</span>,
-    accessorKey: 'change',
-    width: 'w-36 min-w-min',
-    cell: (info) => info.getValue(),
-  },
-]
-
-function createTable({ tableData, pullId }) {
-  return tableData?.length > 0
-    ? tableData?.map((row) => {
-        const {
-          headCoverage,
-          patchCoverage,
-          missesCount,
-          changeCoverage,
-          hasHeadOrPatchCoverage,
-          headName,
-          isCriticalFile,
-        } = row
-
-        return {
-          name: (
-            <div className="flex gap-4">
-              <A
-                to={{
-                  pageName: 'pullFileView',
-                  options: { pullId, tree: headName },
-                }}
-              >
-                {headName}
-              </A>
-              {isCriticalFile && (
-                <span className="self-center rounded border border-ds-gray-tertiary p-1 text-xs text-ds-gray-senary">
-                  Critical File
-                </span>
-              )}
-            </div>
-          ),
-          missesCount: (
-            <div className="flex w-full justify-end">{missesCount}</div>
-          ),
-          head: (
-            <div className="flex w-full justify-end">
-              <TotalsNumber value={headCoverage} plain />
-            </div>
-          ),
-          patch: (
-            <div className="flex w-full justify-end">
-              <TotalsNumber value={patchCoverage} />
-            </div>
-          ),
-          change: hasHeadOrPatchCoverage ? (
-            <TotalsNumber
-              value={changeCoverage}
-              showChange
-              data-testid="change-value"
-            />
-          ) : (
-            <span className="ml-4 text-sm text-ds-gray-quinary">No data</span>
-          ),
-        }
-      })
-    : []
-}
+import Table from './Table'
 
 const Loader = () => (
   <div className="flex items-center justify-center py-16">
     <Spinner />
   </div>
 )
 
-const renderSubComponent = ({ row }) => {
-  const nameColumn = row.getValue('name')
-  const [fileNames] = nameColumn?.props?.children
-  const path = fileNames?.props?.children
+function hasImpactedFiles(impactedFiles) {
+  return impactedFiles && impactedFiles?.length > 0
+}
 
-  // TODO: this component has a nested table and needs to be reworked,
-  // as it is used inside the Table component, which leads to an accessibility issue
-  return <FileDiff path={path} />
+function hasReportWithoutChanges({
+  pullHeadCoverage,
+  pullBaseCoverage,
+  pullPatchCoverage,
+}) {
+  return (
+    !isNil(pullHeadCoverage) &&
+    !isNil(pullBaseCoverage) &&
+    !isNil(pullPatchCoverage)
+  )
 }
 
-function ImpactedFiles() {
-  const { data, handleSort, isLoading } = useImpactedFilesTable()
+function FilesChangedTab() {
+  const { data, isLoading } = useImpactedFilesTable()
+  const isFirstPull =
+    data?.compareWithBaseType === ComparisonReturnType.FIRST_PULL_REQUEST
+
+  if (isLoading) {
+    return <Loader />
+  }
+
+  if (isFirstPull) {
+    return (
+      <p className="mt-4">
+        No comparison made since it&apos;s your first commit with Codecov.
+      </p>
+    )
+  }
+
+  if (data?.headState === CommitStateEnum.ERROR) {
+    return (
+      <div className="flex flex-col gap-2">
+        <p>
+          Cannot display changed files because most recent commit is in an error
+          state.
+        </p>
+      </div>
+    )
+  }
+
+  if (hasImpactedFiles(data?.impactedFiles)) {
+    return (
+      <div className="flex flex-col gap-2">
+        <Table />
+      </div>
+    )
+  }
 
-  const tableContent = createTable({
-    tableData: data?.impactedFiles,
-    pullId: data?.pullId,
-  })
+  if (
+    hasReportWithoutChanges({
+      pullHeadCoverage: data?.pullHeadCoverage,
+      pullBaseCoverage: data?.pullBaseCoverage,
+      pullPatchCoverage: data?.pullPatchCoverage,
+    })
+  ) {
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="mt-4 flex flex-col gap-3">
+          <p>
+            Everything is accounted for! No changes detected that need to be
+            reviewed.
+          </p>
+          <p className="font-medium">What changes does Codecov check for?</p>
+          <ul className="ml-6 list-disc">
+            <li>
+              Lines, not adjusted in diff, that have changed coverage data.
+            </li>
+            <li>Files that introduced coverage data that had none before.</li>
+            <li>
+              Files that have missing coverage data that once were tracked.
+            </li>
+          </ul>
+        </div>
+      </div>
+    )
+  }
 
   return (
-    <>
-      <Table
-        data={tableContent}
-        columns={columns}
-        onSort={handleSort}
-        defaultSort={[{ id: 'missesCount', desc: true }]}
-        renderSubComponent={renderSubComponent}
-      />
-      {isLoading && <Loader />}
-    </>
+    <div className="flex flex-col gap-2">
+      <p className="mt-4">No Files covered by tests were changed</p>
+    </div>
   )
 }
 
-export default ImpactedFiles
+export default FilesChangedTab