Refactor RawResultsTable component

The `RawResultsTable` was using inline styles, while we should prefer
to use styled components. This refactors it to use styled components and
also improves some other miscelleanous things (extracting the props to
a separate type and moving the `Cell` above the `Row` since the latter
uses the former).

Author: koesie10

extensions/ql-vscode/src/view/remote-queries/RawResultsTable.tsx

@@ -1,49 +1,48 @@
 import * as React from 'react';
+import { useState } from 'react';
+import styled from 'styled-components';
 import { VSCodeLink } from '@vscode/webview-ui-toolkit/react';
 import { CellValue, RawResultSet, ResultSetSchema } from '../../pure/bqrs-cli-types';
 import { tryGetRemoteLocation } from '../../pure/bqrs-utils';
-import { useState } from 'react';
 import TextButton from './TextButton';
 import { convertNonPrintableChars } from '../../text-utils';
 
-const borderColor = 'var(--vscode-editor-snippetFinalTabstopHighlightBorder)';
-
 const numOfResultsInContractedMode = 5;
 
-const Row = ({
-  row,
-  fileLinkPrefix,
-  sourceLocationPrefix
-}: {
-  row: CellValue[],
-  fileLinkPrefix: string,
-  sourceLocationPrefix: string
-}) => (
-  <>
-    {row.map((cell, cellIndex) => (
-      <div key={cellIndex} style={{
-        borderColor: borderColor,
-        borderStyle: 'solid',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: '0.4rem',
-        wordBreak: 'break-word'
-      }}>
-        <Cell value={cell} fileLinkPrefix={fileLinkPrefix} sourceLocationPrefix={sourceLocationPrefix} />
-      </div>
-    ))}
-  </>
-);
+const StyledRow = styled.div`
+  border-color: var(--vscode-editor-snippetFinalTabstopHighlightBorder);
+  border-style: solid;
+  justify-content: center;
+  align-items: center;
+  padding: 0.4rem;
+  word-break: break-word;
+`;
+
+type TableContainerProps = {
+  columnCount: number;
+}
+
+const TableContainer = styled.div<TableContainerProps>`
+  display: grid;
+  // Create n equal size columns. We use minmax(0, 1fr) because the
+  // minimum width of 1fr is auto, not 0.
+  // https://css-tricks.com/equal-width-columns-in-css-grid-are-kinda-weird/
+  grid-template-columns: repeat(${props => props.columnCount}, minmax(0, 1fr));
+  max-width: 45rem;
+  padding: 0.4rem;
+`;
+
+type CellProps = {
+  value: CellValue;
+  fileLinkPrefix: string;
+  sourceLocationPrefix: string;
+}
 
 const Cell = ({
   value,
   fileLinkPrefix,
   sourceLocationPrefix
-}: {
-  value: CellValue,
-  fileLinkPrefix: string
-  sourceLocationPrefix: string
-}) => {
+}: CellProps) => {
   switch (typeof value) {
     case 'string':
     case 'number':
@@ -61,44 +60,64 @@ const Cell = ({
   }
 };
 
+type RowProps = {
+  row: CellValue[];
+  fileLinkPrefix: string;
+  sourceLocationPrefix: string;
+}
+
+const Row = ({
+  row,
+  fileLinkPrefix,
+  sourceLocationPrefix
+}: RowProps) => (
+  <>
+    {row.map((cell, cellIndex) => (
+      <StyledRow key={cellIndex}>
+        <Cell
+          value={cell}
+          fileLinkPrefix={fileLinkPrefix}
+          sourceLocationPrefix={sourceLocationPrefix}
+        />
+      </StyledRow>
+    ))}
+  </>
+);
+
+type RawResultsTableProps = {
+  schema: ResultSetSchema;
+  results: RawResultSet;
+  fileLinkPrefix: string;
+  sourceLocationPrefix: string;
+}
+
 const RawResultsTable = ({
   schema,
   results,
   fileLinkPrefix,
   sourceLocationPrefix
-}: {
-  schema: ResultSetSchema,
-  results: RawResultSet,
-  fileLinkPrefix: string,
-  sourceLocationPrefix: string
-}) => {
+}: RawResultsTableProps) => {
   const [tableExpanded, setTableExpanded] = useState(false);
   const numOfResultsToShow = tableExpanded ? results.rows.length : numOfResultsInContractedMode;
   const showButton = results.rows.length > numOfResultsInContractedMode;
 
-  // Create n equal size columns. We use minmax(0, 1fr) because the
-  // minimum width of 1fr is auto, not 0.
-  // https://css-tricks.com/equal-width-columns-in-css-grid-are-kinda-weird/
-  const gridTemplateColumns = `repeat(${schema.columns.length}, minmax(0, 1fr))`;
-
   return (
     <>
-      <div style={{
-        display: 'grid',
-        gridTemplateColumns: gridTemplateColumns,
-        maxWidth: '45rem',
-        padding: '0.4rem'
-      }}>
+      <TableContainer columnCount={schema.columns.length}>
         {results.rows.slice(0, numOfResultsToShow).map((row, rowIndex) => (
-          <Row key={rowIndex} row={row} fileLinkPrefix={fileLinkPrefix} sourceLocationPrefix={sourceLocationPrefix} />
+          <Row
+            key={rowIndex}
+            row={row}
+            fileLinkPrefix={fileLinkPrefix}
+            sourceLocationPrefix={sourceLocationPrefix}
+          />
         ))}
-      </div>
-      {
-        showButton &&
-        <TextButton size='x-small' onClick={() => setTableExpanded(!tableExpanded)}>
+      </TableContainer>
+      {showButton && (
+        <TextButton size="x-small" onClick={() => setTableExpanded(!tableExpanded)}>
           {tableExpanded ? (<span>View less</span>) : (<span>View all</span>)}
         </TextButton>
-      }
+      )}
     </>
   );
 };