Merge pull request #1520 from github/koesie10/react-components-common

Move common React components to separate directory

extensions/ql-vscode/src/view/common/HorizontalSpace.tsx

@@ -1,9 +1,7 @@
 import styled from 'styled-components';
 
-const HorizontalSpace = styled.div<{ size: 1 | 2 | 3 }>`
+export const HorizontalSpace = styled.div<{ size: 1 | 2 | 3 }>`
   flex: 0 0 auto;
   display: inline-block;
   width: ${props => 0.2 * props.size}em;
 `;
-
-export default HorizontalSpace;

extensions/ql-vscode/src/view/common/SectionTitle.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const SectionTitle = styled.h2`
+export const SectionTitle = styled.h2`
   font-size: medium;
   font-weight: 500;
   padding: 0 0.5em 0 0;
@@ -8,5 +8,3 @@ const SectionTitle = styled.h2`
   display: inline-block;
   vertical-align: middle;
 `;
-
-export default SectionTitle;

extensions/ql-vscode/src/view/common/VerticalSpace.tsx

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
-const VerticalSpace = styled.div<{ size: 1 | 2 | 3 }>`
+export const VerticalSpace = styled.div<{ size: 1 | 2 | 3 }>`
   flex: 0 0 auto;
   height: ${props => 0.5 * props.size}em;
 `;
-
-export default VerticalSpace;

extensions/ql-vscode/src/view/common/ViewTitle.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const ViewTitle = styled.h1`
+export const ViewTitle = styled.h1`
   font-size: 2em;
   margin-bottom: 0.5em;
   font-weight: 500;
@@ -9,5 +9,3 @@ const ViewTitle = styled.h1`
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-
-export default ViewTitle;

extensions/ql-vscode/src/view/common/index.ts

@@ -0,0 +1,4 @@
+export * from './HorizontalSpace';
+export * from './SectionTitle';
+export * from './VerticalSpace';
+export * from './ViewTitle';

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

@@ -5,9 +5,8 @@ import * as React from 'react';
 import { ChangeEvent, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { CodeFlow, AnalysisMessage, ResultSeverity } from '../../remote-queries/shared/analysis-result';
+import { SectionTitle, VerticalSpace } from '../common';
 import FileCodeSnippet from './FileCodeSnippet';
-import SectionTitle from './SectionTitle';
-import VerticalSpace from './VerticalSpace';
 
 const StyledCloseButton = styled.button`
   position: absolute;

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { CodeSnippet, FileLink, HighlightedRegion, AnalysisMessage, ResultSeverity } from '../../remote-queries/shared/analysis-result';
-import VerticalSpace from './VerticalSpace';
 import { createRemoteFileRef } from '../../pure/location-link-utils';
 import { parseHighlightedLine, shouldHighlightLine } from '../../pure/sarif-utils';
 import { VSCodeLink } from '@vscode/webview-ui-toolkit/react';
+import { VerticalSpace } from '../common';
 
 const borderColor = 'var(--vscode-editor-snippetFinalTabstopHighlightBorder)';
 const warningColor = '#966C23';

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

@@ -6,10 +6,7 @@ import { AnalysisSummary, RemoteQueryResult } from '../../remote-queries/shared/
 import { MAX_RAW_RESULTS } from '../../remote-queries/shared/result-limits';
 import { vscode } from '../vscode-api';
 import { VSCodeBadge, VSCodeButton } from '@vscode/webview-ui-toolkit/react';
-import SectionTitle from './SectionTitle';
-import VerticalSpace from './VerticalSpace';
-import HorizontalSpace from './HorizontalSpace';
-import ViewTitle from './ViewTitle';
+import { HorizontalSpace, SectionTitle, VerticalSpace, ViewTitle } from '../common';
 import DownloadButton from './DownloadButton';
 import { AnalysisResults, getAnalysisResultCount } from '../../remote-queries/shared/analysis-result';
 import DownloadSpinner from './DownloadSpinner';

extensions/ql-vscode/src/view/variant-analysis/QueryDetails.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import ViewTitle from '../remote-queries/ViewTitle';
+import { ViewTitle } from '../common';
 import { LinkIconButton } from './LinkIconButton';
 
 export type QueryDetailsProps = {