progress

Author: gallayl

e2e/dogfooding.spec.ts

@@ -10,14 +10,16 @@ test('DOG FOODING TIME - Create a service that uses the StackCraft GitHub reposi
   const stackName = `e2e-dog-fooding-time-${uuid}`
   const displayName = `E2E DOG FOODING Stack - ${browserName} - ${uuid}`
   const description = `
-  ### 🐶🦴 E2E - IT'S DOG FOODING TIME 🐶🦴
-  This stack is used to test the dogfooding of the StackCraft application.
-  It is used to test the following features:
+### 🐶🦴 E2E - IT'S DOG FOODING TIME 🐶🦴
+
+This stack is used to test the dogfooding of the StackCraft application.
+It is used to test the following features:
   - Creating a stack
   - Creating a service that uses the StackCraft GitHub repository
   - Cloning, installing, building and running the service
 
-  ### Test Steps
+### Test Steps
+
   1. Create a stack
   2. Create a service that uses the StackCraft GitHub repository
   3. Clone, install, build and run the service

frontend/src/components/entity-forms/github-repo-form.tsx

@@ -1,5 +1,5 @@
 import { createComponent, Shade } from '@furystack/shades'
-import { Button, Form, Icon, icons, Input, MarkdownInput } from '@furystack/shades-common-components'
+import { Button, Form, Icon, icons, Input, MarkdownEditor } from '@furystack/shades-common-components'
 import type { GitHubRepository } from 'common'
 
 import { StackCraftNestedRouteLink } from '../app-routes.js'
@@ -57,7 +57,7 @@ export const GitHubRepoForm = Shade<GitHubRepoFormProps>({
           required
           value={props.initial?.displayName ?? ''}
         />
-        <MarkdownInput name="description" labelTitle="Description" value={props.initial?.description ?? ''} rows={4} />
+        <MarkdownEditor name="description" labelTitle="Description" value={props.initial?.description ?? ''} rows={4} />
         <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
           {props.cancelHref ? (
             <StackCraftNestedRouteLink href={props.cancelHref as '/'}>

frontend/src/components/entity-forms/prerequisite-form.tsx

@@ -1,5 +1,5 @@
 import { createComponent, Shade } from '@furystack/shades'
-import { Button, Form, Icon, icons, Input, MarkdownInput, Select } from '@furystack/shades-common-components'
+import { Button, Form, Icon, icons, Input, MarkdownEditor, Select } from '@furystack/shades-common-components'
 import type { Prerequisite, PrerequisiteConfig, PrerequisiteType } from 'common'
 
 type PrerequisiteFormPayload = {
@@ -186,7 +186,7 @@ export const PrerequisiteForm = Shade<PrerequisiteFormProps>({
           />
         )}
 
-        <MarkdownInput
+        <MarkdownEditor
           name="installationHelp"
           labelTitle="Installation Help"
           value={props.initial?.installationHelp ?? ''}

frontend/src/components/entity-forms/service-form.tsx

@@ -7,7 +7,7 @@ import {
   Icon,
   icons,
   Input,
-  MarkdownInput,
+  MarkdownEditor,
   Paper,
   Select,
 } from '@furystack/shades-common-components'
@@ -119,7 +119,7 @@ export const ServiceForm = Shade<ServiceFormProps>({
             required
             value={props.initial?.displayName ?? ''}
           />
-          <MarkdownInput
+          <MarkdownEditor
             name="description"
             labelTitle="Description"
             value={props.initial?.description ?? ''}

frontend/src/components/entity-forms/stack-form.tsx

@@ -1,5 +1,5 @@
 import { createComponent, Shade } from '@furystack/shades'
-import { Button, Form, Icon, icons, Input, MarkdownInput } from '@furystack/shades-common-components'
+import { Button, Form, Icon, icons, Input, MarkdownEditor } from '@furystack/shades-common-components'
 import type { StackView } from 'common'
 
 import { StackCraftNestedRouteLink } from '../app-routes.js'
@@ -60,7 +60,7 @@ export const StackForm = Shade<StackFormProps>({
           required
           value={props.initial?.displayName ?? ''}
         />
-        <MarkdownInput name="description" labelTitle="Description" value={props.initial?.description ?? ''} rows={4} />
+        <MarkdownEditor name="description" labelTitle="Description" value={props.initial?.description ?? ''} rows={4} />
 
         <h4 style={{ margin: '0', opacity: '0.7' }}>Configuration</h4>
         <Input

frontend/src/components/layout.tsx

@@ -80,28 +80,28 @@ const AuthenticatedLayout = Shade({
     const syncProtocol = serviceUrl.protocol === 'https:' ? 'wss:' : 'ws:'
     const syncWsUrl = `${syncProtocol}//${serviceUrl.host}/api/ws`
 
-    const authenticatedInjector = useDisposable('authenticatedInjector', () => {
-      const child = injector.createChild()
-      child.setExplicitInstance(new EntitySyncService({ wsUrl: syncWsUrl }), EntitySyncService)
-      return child
+    useDisposable('entitySyncService', () => {
+      const service = new EntitySyncService({ wsUrl: syncWsUrl })
+      injector.setExplicitInstance(service, EntitySyncService)
+      return service
     })
 
     return (
       <PageLayout
         appBar={{
           variant: 'permanent',
-          component: <Header title="StackCraft" injector={authenticatedInjector} />,
+          component: <Header title="StackCraft" />,
         }}
         drawer={{
           left: {
             variant: 'collapsible',
             width: '220px',
-            component: <Sidebar injector={authenticatedInjector} />,
+            component: <Sidebar />,
             collapseOnBreakpoint: 'md',
           },
         }}
       >
-        <Body injector={authenticatedInjector} style={{ width: '100%', height: '100%', overflow: 'auto' }} />
+        <Body style={{ width: '100%', height: '100%', overflow: 'auto' }} />
       </PageLayout>
     )
   },

frontend/src/components/service-table.tsx

@@ -11,6 +11,7 @@ import {
   DataGrid,
   Icon,
   icons,
+  MarkdownDisplay,
   SelectionCell,
 } from '@furystack/shades-common-components'
 import type { PrerequisiteCheckStatus, ServiceView } from 'common'
@@ -105,7 +106,7 @@ export const ServiceTable = Shade<ServiceTableProps>({
                 <strong>{entry.displayName}</strong>
                 {entry.description ? (
                   <div style={{ fontSize: cssVariableTheme.typography.fontSize.sm, opacity: '0.6', marginTop: '2px' }}>
-                    {entry.description}
+                    <MarkdownDisplay content={entry.description} />
                   </div>
                 ) : null}
                 {summary ? (

frontend/src/pages/dashboard/index.tsx

@@ -92,15 +92,15 @@ export const Dashboard = Shade<DashboardProps>({
                   <Icon icon={icons.chevronRight} size="small" />
                 </div>
                 {stack.description ? (
-                  <p
+                  <div
                     style={{
-                      margin: '8px 0 0',
+                      marginTop: '8px',
                       fontSize: cssVariableTheme.typography.fontSize.md,
                       color: cssVariableTheme.text.secondary,
                     }}
                   >
-                    {stack.description}
-                  </p>
+                    <MarkdownDisplay content={stack.description} />
+                  </div>
                 ) : null}
               </Paper>
             </StackCraftNestedRouteLink>

frontend/src/pages/import-export/export-stack.tsx

@@ -43,15 +43,6 @@ export const ExportStack = Shade<ExportStackProps>({
           icon="📤"
           title="Export Stack"
           description="Copy the JSON below and share it with other developers to quickly set up the same stack."
-          actions={
-            <Button
-              variant="outlined"
-              onclick={() => history.back()}
-              startIcon={<Icon icon={icons.chevronLeft} size="small" />}
-            >
-              Back
-            </Button>
-          }
         />
         <Paper>
           {isLoading ? (

frontend/src/pages/repositories/edit-repository.tsx

@@ -14,7 +14,7 @@ import {
 } from '@furystack/shades-common-components'
 import type { GitHubRepository } from 'common'
 import { GitHubRepository as GitHubRepositoryModel } from 'common'
-import { StackCraftNestedRouteLink, stackCraftNavigate } from '../../components/app-routes.js'
+import { stackCraftNavigate } from '../../components/app-routes.js'
 import { GitHubRepoForm } from '../../components/entity-forms/github-repo-form.js'
 import { GitHubReposApiClient } from '../../services/api-clients/github-repos-api-client.js'
 
@@ -44,17 +44,7 @@ export const EditRepository = Shade<EditRepositoryProps>({
     if (repoState.status === 'error') {
       return (
         <PageContainer>
-          <PageHeader
-            title="Error loading repository"
-            description={repoState.error}
-            actions={
-              <StackCraftNestedRouteLink href="/stacks/:stackName/repositories" params={{ stackName: props.stackName }}>
-                <Button variant="outlined" startIcon={<Icon icon={icons.chevronLeft} size="small" />}>
-                  Back
-                </Button>
-              </StackCraftNestedRouteLink>
-            }
-          />
+          <PageHeader title="Error loading repository" description={repoState.error} />
         </PageContainer>
       )
     }
@@ -63,16 +53,7 @@ export const EditRepository = Shade<EditRepositoryProps>({
     if (!repo) {
       return (
         <PageContainer>
-          <PageHeader
-            title="Repository not found"
-            actions={
-              <StackCraftNestedRouteLink href="/stacks/:stackName/repositories" params={{ stackName: props.stackName }}>
-                <Button variant="outlined" startIcon={<Icon icon={icons.chevronLeft} size="small" />}>
-                  Back
-                </Button>
-              </StackCraftNestedRouteLink>
-            }
-          />
+          <PageHeader title="Repository not found" />
         </PageContainer>
       )
     }
@@ -136,22 +117,16 @@ export const EditRepository = Shade<EditRepositoryProps>({
         <PageHeader
           title={`Edit: ${repo.displayName}`}
           actions={
-            <div style={{ display: 'flex', gap: '8px' }}>
-              <StackCraftNestedRouteLink href="/stacks/:stackName/repositories" params={{ stackName: repo.stackName }}>
-                <Button variant="outlined" startIcon={<Icon icon={icons.chevronLeft} size="small" />}>
-                  Back
-                </Button>
-              </StackCraftNestedRouteLink>
-              <Button
-                variant="outlined"
-                color="error"
-                loading={isDeleting}
-                onclick={() => setIsConfirmingDelete(true)}
-                startIcon={<Icon icon={icons.trash} size="small" />}
-              >
-                Delete
-              </Button>
-            </div>
+            <Button
+              variant="outlined"
+              size="small"
+              color="error"
+              loading={isDeleting}
+              onclick={() => setIsConfirmingDelete(true)}
+              startIcon={<Icon icon={icons.trash} size="small" />}
+            >
+              Delete
+            </Button>
           }
         />
         <Paper>