chore: refactor

Author: echarles

.github/workflows/fix-license-header.yml

@@ -0,0 +1,62 @@
+name: Fix License Headers
+
+on:
+  pull_request_target:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+    
+jobs:
+  header-license-fix:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Checkout the branch from the PR that triggered the job
+        run: gh pr checkout ${{ github.event.pull_request.number }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Fix License Header
+        # pin to include https://github.com/apache/skywalking-eyes/pull/168
+        uses: apache/skywalking-eyes/header@e19b828cea6a6027cceae78f05d81317347d21be
+        with:
+          mode: fix
+
+      - name: List files changed
+        id: files-changed
+        shell: bash -l {0}
+        run: |
+          set -ex
+          export CHANGES=$(git status --porcelain | tee /tmp/modified.log | wc -l)
+          cat /tmp/modified.log
+
+          echo "N_CHANGES=${CHANGES}" >> $GITHUB_OUTPUT
+
+          git diff
+
+      - name: Commit any changes
+        if: steps.files-changed.outputs.N_CHANGES != '0'
+        shell: bash -l {0}
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+          git pull --no-tags
+
+          git add *
+          git commit -m "Automatic application of license header"
+
+          git config push.default upstream
+          git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

src/Viewer.tsx

@@ -3,9 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { ThemeProvider, BaseStyles, Box, UnderlineNav, Pagehead, Heading, Link } from '@primer/react';
 import { JupyterLabAppAdapter } from '@datalayer/jupyter-react';
 import { DatalayerGreenIcon } from '@datalayer/icons-react';
-import { ViewerFormTab } from './tabs/ViewerFormTab';
-import { ViewerExamplesTab } from './tabs/ViewerExamplesTab';
-import { AboutTab } from './tabs/AboutTab';
+import { ViewerForm, ViewerExamples, ViewerAbout } from './views';
 import { requestAPI } from './jupyterlab/handler';
 
 export type JupyterViewerProps = {
@@ -58,9 +56,9 @@ const JupyterViewer = (props: JupyterViewerProps) => {
               </UnderlineNav>
             </Box>
             <Box m={3}>
-              {tab === 1 && <ViewerFormTab />}
-              {tab === 2 && <ViewerExamplesTab />}
-              {tab === 3 && <AboutTab version={version} />}
+              {tab === 1 && <ViewerForm />}
+              {tab === 2 && <ViewerExamples />}
+              {tab === 3 && <ViewerAbout version={version} />}
             </Box>
           </Box>
         </BaseStyles>

src/index.ts

@@ -1,4 +1,3 @@
-export * from "./tabs";
 export * from "./views";
 export * from "./Viewer";
 export * from "./ViewerRoutes";

src/tabs/index.ts

@@ -6,12 +6,12 @@ type Props = {
   version: string;
 }
 
-export const AboutTab = (props: Props): JSX.Element => {
+export const ViewerAbout = (props: Props): JSX.Element => {
   const { version } = props;
   const [egg, setEgg] = useState(false);
   return (
     <>
-      <Pagehead as="h2">🪐 👀 Jupyter Viewer<Label sx={{marginLeft: 1}}>{version}</Label></Pagehead>
+      <Pagehead as="h2">🪐 👀 Jupyter Viewer{ version && <Label sx={{marginLeft: 1}}>{version}</Label>}</Pagehead>
       <Box>
         <Text>A revisited NbViewer as a modern Web application to view Jupyter notebooks.</Text>
       </Box>
@@ -30,4 +30,4 @@ export const AboutTab = (props: Props): JSX.Element => {
   );
 }
 
-export default AboutTab;
+export default ViewerAbout;

src/tabs/AboutTab.tsx renamed to src/views/ViewerAbout.tsx

@@ -1,16 +1,15 @@
 import { useState } from 'react';
 import { Box, ActionMenu, ActionList } from '@primer/react';
 import { NetworkIcon, JupyterBaseIcon, JupiterIcon, ScientistIcon } from '@datalayer/icons-react';
-import { Jupyter } from '@datalayer/jupyter-react/lib/jupyter/Jupyter';
-import { Viewer } from '@datalayer/jupyter-react/lib/components/viewer/Viewer';
+import { JupyterReactTheme, Viewer } from '@datalayer/jupyter-react';
 import { visualisations, astronomies, dataSciences, MenuLine, NotebookExample } from './notebooks/Examples';
 
-export const ViewerExamplesTab = () => {
+export const ViewerExamples = () => {
   const [notebookExample, setNotebookExample] = useState<NotebookExample>(visualisations[0]);
   return (
     <>
       <Box m={3}>
-        <Jupyter startDefaultKernel={false}>
+        <JupyterReactTheme>
           <ActionMenu>
             <ActionMenu.Button leadingVisual={() => <JupyterBaseIcon colored/>}>
               Notebooks
@@ -22,30 +21,33 @@ export const ViewerExamplesTab = () => {
                 </ActionList.GroupHeading>
                 <ActionList.Group>
                   {visualisations.map(visualisation => 
-                    <MenuLine notebookExample={visualisation} icon={<NetworkIcon colored/>} setNotebookExample={setNotebookExample} />)}
+                    <MenuLine notebookExample={visualisation} icon={<NetworkIcon colored/>} setNotebookExample={setNotebookExample} />)
+                  }
                 </ActionList.Group>
                 <ActionList.GroupHeading>
                   Data Science
                 </ActionList.GroupHeading>
                 <ActionList.Group>
                   {dataSciences.map(dataScience => 
-                    <MenuLine notebookExample={dataScience} icon={<ScientistIcon colored/>} setNotebookExample={setNotebookExample} />)}
+                    <MenuLine notebookExample={dataScience} icon={<ScientistIcon colored/>} setNotebookExample={setNotebookExample} />)
+                  }
                 </ActionList.Group>
                 <ActionList.GroupHeading>
                 Astronomy
                 </ActionList.GroupHeading>
                 <ActionList.Group>
                   {astronomies.map(astronomy => 
-                    <MenuLine notebookExample={astronomy} icon={<JupiterIcon colored/>} setNotebookExample={setNotebookExample} />)}
+                    <MenuLine notebookExample={astronomy} icon={<JupiterIcon colored/>} setNotebookExample={setNotebookExample} />)
+                  }
                 </ActionList.Group>
               </ActionList>
             </ActionMenu.Overlay>
           </ActionMenu>
           <Viewer nbformatUrl={notebookExample.url} outputs={false} />
-        </Jupyter>
+        </JupyterReactTheme>
       </Box>
     </>
   )
 }
 
-export default ViewerExamplesTab;
+export default ViewerExamples;

src/tabs/ViewerExamplesTab.tsx renamed to src/views/ViewerExamples.tsx

@@ -4,7 +4,7 @@ import { INotebookContent } from '@jupyterlab/nbformat';
 import { Box, Button, FormControl, TextInput, Spinner, ButtonGroup, Text, Link, Label } from '@primer/react';
 import { Card } from '@datalayer/primer-addons';
 // import { ThreeBarsIcon } from '@primer/octicons-react';
-import { EyesIcon, FourLeafCloverIcon, JupyterIcon } from '@datalayer/icons-react';
+import { FourLeafCloverIcon, JupyterIcon } from '@datalayer/icons-react';
 import { Jupyter } from '@datalayer/jupyter-react/lib/jupyter/Jupyter';
 import { Viewer } from '@datalayer/jupyter-react/lib/components/viewer/Viewer';
 import Masonry from 'react-layout-masonry';
@@ -46,7 +46,7 @@ const cards: CardContent[] = [
   },
 ]
 
-export const ViewerFormTab = () => {
+export const ViewerForm = () => {
   const navigate = useNavigate();
   const [input, setInput] = useState('');
   const [loading, setLoading] = useState(false);
@@ -115,7 +115,7 @@ export const ViewerFormTab = () => {
         </FormControl>
       </Box>
       <Box sx={{display: 'flex', justifyContent: 'center'}}>
-        <Button leadingVisual={EyesIcon} sx={{margin: 1}} onClick={e => setNotebook({ title: '', url: input })} variant="primary">
+        <Button sx={{margin: 1}} onClick={e => setNotebook({ title: '', url: input })} variant="default">
           Go!
         </Button>
         <Button leadingVisual={FourLeafCloverIcon} sx={{margin: 1}} onClick={e => setNotebook(randomNotebook())} variant="default">
@@ -176,4 +176,4 @@ export const ViewerFormTab = () => {
   )
 }
 
-export default ViewerFormTab;
+export default ViewerForm;

src/tabs/ViewerFormTab.tsx renamed to src/views/ViewerForm.tsx

@@ -1 +1,4 @@
 export * from "./ViewerGitHub";
+export * from "./ViewerAbout";
+export * from "./ViewerExamples";
+export * from "./ViewerForm";