Merge pull request #316 from microsoft/dev

Dev

.github/workflows/release.yml

@@ -103,6 +103,8 @@ jobs:
           tags: |
             teamcloud.azurecr.io/teamcloud/api:${{ steps.gitversion.outputs.assemblySemVer }}
             teamcloud.azurecr.io/teamcloud/api:latest
+          build-args: |
+            image_version=${{ steps.gitversion.outputs.assemblySemVer }}
 
       - name: Build and push Orchestrator Image
         uses: docker/build-push-action@v2
@@ -112,6 +114,8 @@ jobs:
           tags: |
             teamcloud.azurecr.io/teamcloud/orchestrator:${{ steps.gitversion.outputs.assemblySemVer }}
             teamcloud.azurecr.io/teamcloud/orchestrator:latest
+          build-args: |
+            image_version=${{ steps.gitversion.outputs.assemblySemVer }}
 
       - name: Build and push Website Image
         uses: docker/build-push-action@v2
@@ -121,6 +125,8 @@ jobs:
           tags: |
             teamcloud.azurecr.io/teamcloud/website:${{ steps.gitversion.outputs.assemblySemVer }}
             teamcloud.azurecr.io/teamcloud/website:latest
+          build-args: |
+            image_version=${{ steps.gitversion.outputs.assemblySemVer }}
 
       # This must be run LAST - AFTER everything is added to release_assets
       - name: Prepare Release Assets

deploy/bicep/main.bicep

@@ -158,7 +158,6 @@ module web 'website.bicep' = {
     reactAppMsalClientId: reactAppMsalClientId
     reactAppMsalScope: reactAppMsalScope
     reactAppTcApiUrl: api.outputs.url
-    reactAppVersion: version
     webAppName: name
     teamcloudImageRepo: teamcloudImageRepo
   }

deploy/bicep/website.bicep

@@ -10,8 +10,6 @@ param reactAppTcApiUrl string
 @description('Scope.')
 param reactAppMsalScope string
 
-param reactAppVersion string = ''
-
 param teamcloudImageRepo string = 'teamcloud'
 
 var name = toLower(webAppName)
@@ -60,10 +58,6 @@ resource web 'Microsoft.Web/sites@2021-02-01' = {
           name: 'REACT_APP_TC_API_URL'
           value: reactAppTcApiUrl
         }
-        {
-          name: 'REACT_APP_VERSION'
-          value: reactAppVersion
-        }
         {
           name: 'WEBSITE_NODE_DEFAULT_VERSION'
           value: '16'

src/TeamCloud.API/Controllers/RootController.cs

@@ -33,7 +33,8 @@ public IActionResult Get()
     {
         var info = new TeamCloudInformation
         {
-            Version = teamCloudOptions.Version
+            ImageVersion = System.Environment.GetEnvironmentVariable("TEAMCLOUD_IMAGE_VERSION"),
+            TemplateVersion = teamCloudOptions.Version
         };
 
         return DataResult<TeamCloudInformation>

src/TeamCloud.API/Data/TeamCloudInformation.cs

@@ -11,5 +11,6 @@ namespace TeamCloud.API.Data;
 [JsonObject(NamingStrategyType = typeof(TeamCloudNamingStrategy))]
 public class TeamCloudInformation
 {
-    public string Version { get; set; }
+    public string ImageVersion { get; set; }
+    public string TemplateVersion { get; set; }
 }

src/TeamCloud.API/Dockerfile

@@ -1,5 +1,8 @@
 FROM mcr.microsoft.com/dotnet/aspnet:6.0
 
+ARG image_version=unknown
+ENV TEAMCLOUD_IMAGE_VERSION=$image_version
+
 ENV PORT 8080
 EXPOSE 8080
 

src/TeamCloud.Orchestrator/Dockerfile

@@ -7,6 +7,9 @@ COPY publish /home/site/wwwroot
 FROM mcr.microsoft.com/azure-functions/dotnet:4-appservice
 # FROM mcr.microsoft.com/azure-functions/dotnet:4
 
+ARG image_version=unknown
+ENV TEAMCLOUD_IMAGE_VERSION=$image_version
+
 ENV AzureWebJobsScriptRoot=/home/site/wwwroot \
     AzureFunctionsJobHost__Logging__Console__IsEnabled=true
 

web/Dockerfile

@@ -18,6 +18,10 @@ RUN mkdir -p /home/LogFiles /opt/startup /home/site/wwwroot \
     iproute2 \
     nano
 
+ARG image_version=unknown
+ENV REACT_APP_VERSION=$image_version
+ENV TEAMCLOUD_IMAGE_VERSION=$image_version
+
 # setup default site
 RUN rm -f /etc/ssh/sshd_config
 COPY deploy/startup /opt/startup

web/src/App.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools'
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { RootView } from './view';
 import './App.css'
 
@@ -18,10 +18,18 @@ const queryClient = new QueryClient({
     }
 })
 
-export const App: React.FC = () => ( 
+export const App: React.FC = () => (
     <QueryClientProvider client={queryClient}>
         <BrowserRouter>
-            <RootView />
+            <Routes>
+                <Route path='/orgs' element={<Navigate to='/' replace />} />
+                <Route path='/orgs/:orgId/projects' element={<Navigate replace to='/orgs/:orgId' />} />
+                <Route path='/orgs/:orgId/settings/overview' element={<Navigate replace to='/orgs/:orgId/settings' />} />
+                <Route path='/orgs/:orgId/projects/:projectId/overview' element={<Navigate replace to='/orgs/:orgId/projects/:projectId' />} />
+                <Route path='/orgs/:orgId/projects/:projectId/settings/overview' element={<Navigate replace to='/orgs/:orgId/projects/:projectId/settings' />} />
+                <Route path='/orgs/:orgId/projects/:projectId/components/:itemId/tasks' element={<Navigate replace to='/orgs/:orgId/projects/:projectId/components/:itemId' />} />
+                <Route path='/*' element={<RootView />} />
+            </Routes>
         </BrowserRouter>
         <ReactQueryDevtools initialIsOpen={false} position='bottom-right' />
     </QueryClientProvider>

web/src/components/ComponentList.tsx

@@ -3,10 +3,10 @@
 
 import React, { useEffect, useState } from 'react';
 import { IColumn, Stack, Text } from '@fluentui/react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Component, ComponentTemplate } from 'teamcloud';
 import { ContentList, ComponentLink, ComponentTemplateLink, UserPersona } from '.';
-import { useDeploymentScopes, useProjectMembers, useProjectComponentTemplates, useProjectComponents } from '../hooks';
+import { useDeploymentScopes, useProjectMembers, useProjectComponentTemplates, useProjectComponents, useUrl } from '../hooks';
 
 import collaboration from '../img/MSC17_collaboration_010_noBG.png'
 import { ComponentIcon } from './ComponentIcon';
@@ -18,7 +18,7 @@ export interface IComponentListProps {
 export const ComponentList: React.FC<IComponentListProps> = (props) => {
 
     const navigate = useNavigate();
-    const { orgId, projectId } = useParams() as { orgId: string, projectId: string };
+    const { orgId, projectId } = useUrl() as { orgId: string, projectId: string };
 
     const [items, setItems] = useState<{ component: Component, template: ComponentTemplate }[]>()
 

web/src/components/ComponentTaskList.tsx

@@ -2,14 +2,12 @@
 // Licensed under the MIT License.
 
 import React, { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { CheckboxVisibility, DetailsList, DetailsListLayoutMode, FontIcon, getTheme, IColumn, IconButton, IContextualMenuProps, IDetailsRowProps, IIconProps, IRenderFunction, Link, SelectionMode, Stack, Text } from '@fluentui/react';
 import { ComponentTask, KnownComponentTaskState } from 'teamcloud';
-import { useOrg, useProject, useProjectComponent, useProjectComponentTasks, useProjectComponentTemplates, useProjectComponentTask } from '../hooks';
+import { useOrg, useProject, useProjectComponent, useProjectComponentTasks, useProjectComponentTemplates, useProjectComponentTask, useCancelProjectComponentTask, useRerunProjectComponentTask, useUrl } from '../hooks';
 import { ComponentTaskConsole } from '.';
 import { isActiveComponentTaskState, isFinalComponentTaskState } from '../Utils';
-import { useCancelProjectComponentTask } from '../hooks/useCancelProjectComponentTask';
-import { useRerunProjectComponentTask } from '../hooks/useRerunProjectComponentTask';
 
 export interface IComponentTaskListProps { }
 
@@ -18,7 +16,7 @@ export const ComponentTaskList: React.FunctionComponent<IComponentTaskListProps>
     const theme = getTheme();
     const navigate = useNavigate();
 
-    const { orgId, projectId, itemId, subitemId } = useParams() as { orgId: string, projectId: string, itemId: string, subitemId: string };
+    const { orgId, projectId, itemId, subitemId } = useUrl() as { orgId: string, projectId: string, itemId: string, subitemId: string };
 
     const { data: org } = useOrg();
     const { data: project } = useProject();

web/src/components/ComponentsCard.tsx

@@ -2,17 +2,17 @@
 // Licensed under the MIT License.
 
 import React, { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Stack, DefaultButton, Text, ICommandBarItemProps, Dialog, DialogType, DialogFooter, PrimaryButton, IColumn, DetailsList, DetailsListLayoutMode, CheckboxVisibility, IDetailsRowProps, IRenderFunction, SelectionMode } from '@fluentui/react';
 import { Component, ComponentTemplate } from 'teamcloud';
-import { useOrg, useDeploymentScopes, useProject, useProjectComponents, useProjectComponentTemplates, useDeleteProjectComponent } from '../hooks';
+import { useOrg, useDeploymentScopes, useProject, useProjectComponents, useProjectComponentTemplates, useDeleteProjectComponent, useUrl } from '../hooks';
 import { DetailCard, ComponentLink, ComponentIcon } from '.';
 
 export const ComponentsCard: React.FC = () => {
 
     const navigate = useNavigate();
 
-    const { orgId, projectId } = useParams() as { orgId: string, projectId: string };
+    const { orgId, projectId } = useUrl() as { orgId: string, projectId: string };
 
     const { data: org } = useOrg();
     const { data: scopes } = useDeploymentScopes();

web/src/components/DeploymentScopeForm.tsx

@@ -3,11 +3,11 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { ComboBox, DefaultButton, IComboBoxOption, PrimaryButton, Stack, TextField } from '@fluentui/react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { FuiForm } from '@rjsf/fluent-ui'
 import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
 import { DeploymentScopeDefinition } from 'teamcloud';
-import { useAdapters, useCreateDeploymentScope } from '../hooks';
+import { useAdapters, useCreateDeploymentScope, useUrl } from '../hooks';
 import { ContentSeparator, TCFieldTemplate } from '.';
 
 export interface IDeploymentScopeFormProps {
@@ -20,7 +20,7 @@ export const DeploymentScopeForm: React.FC<IDeploymentScopeFormProps> = (props)
 
     const { onScopeChange } = props;
     const navigate = useNavigate();
-    const { orgId } = useParams() as { orgId: string };
+    const { orgId } = useUrl() as { orgId: string };
 
     const { data: adapterInformation } = useAdapters();
 

web/src/components/DeploymentScopeList.tsx

@@ -6,10 +6,9 @@ import { useNavigate } from 'react-router-dom';
 import { Checkbox, IColumn, DefaultButton } from '@fluentui/react';
 import { DeploymentScope } from 'teamcloud';
 import { ContentList } from '.';
-import { useOrg, useDeploymentScopes } from '../hooks';
+import { useOrg, useDeploymentScopes, useAuthorizeDeployemntScope } from '../hooks';
 
 import collaboration from '../img/MSC17_collaboration_010_noBG.png'
-import { useAuthorizeDeployemntScope } from '../hooks/useAuthorizeDeploymentScope';
 
 export const DeploymentScopeList: React.FC = () => {
 

web/src/components/HeaderBar.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { Route, Routes, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Stack, getTheme, Link } from '@fluentui/react';
 import { HeaderBreadcrumb, UserInfo } from '.';
 
@@ -26,18 +26,7 @@ export const HeaderBar: React.FC = () => {
                             <Link styles={{ root: { fontWeight: 'bold', paddingLeft: '12px', color: theme.palette.themePrimary, fontSize: theme.fonts.mediumPlus.fontSize } }} onClick={() => navigate('/')}>TeamCloud</Link>
                         </Stack.Item>
                         <Stack.Item styles={{ root: { paddingLeft: '12px' } }}>
-                            <Routes>
-                                <Route path='' element={<HeaderBreadcrumb />} />
-                                <Route path='orgs/:orgId/*' element={<HeaderBreadcrumb />} />
-                                <Route path='orgs/:orgId/settings/:settingId/*' element={<HeaderBreadcrumb />} />
-                                <Route path='orgs/:orgId/projects/:projectId/*' element={<HeaderBreadcrumb />} />
-                                <Route path='orgs/:orgId/projects/:projectId/settings/*' element={<HeaderBreadcrumb />} />
-                                <Route path='orgs/:orgId/projects/:projectId/settings/:settingId/*' element={<HeaderBreadcrumb />} />
-                                <Route path='orgs/:orgId/projects/:projectId/settings/:settingId/:itemId/*' element={<HeaderBreadcrumb />} />
-                                <Route path='orgs/:orgId/projects/:projectId/:navId/*' element={<HeaderBreadcrumb />} />
-                                <Route path='orgs/:orgId/projects/:projectId/:navId/:itemId/*' element={<HeaderBreadcrumb />} />
-                                <Route path='orgs/:orgId/projects/:projectId/:navId/:itemId/tasks/:subitemId/*' element={<HeaderBreadcrumb />} />
-                            </Routes>
+                            <HeaderBreadcrumb />
                         </Stack.Item>
                     </Stack>
                 </Stack.Item>

web/src/components/HeaderBreadcrumb.tsx

@@ -2,22 +2,27 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { Text, Breadcrumb, IBreadcrumbItem } from '@fluentui/react';
 import { endsWithLowerCase, includesLowerCase, matchesLowerCase, matchesRouteParam } from '../Utils';
-import { useOrgs, useProject, useProjectComponent } from '../hooks';
+import { useOrgs, useProject, useProjectComponent, useUrl } from '../hooks';
 
 export const HeaderBreadcrumb: React.FC = () => {
 
     const location = useLocation();
     const navigate = useNavigate();
-    const { orgId, projectId, navId, itemId, settingId } = useParams() as { orgId: string, projectId: string, navId: string, itemId: string, settingId: string };
+
+    const foo = useUrl();
+    const { orgId, projectId, navId, itemId, settingId } = useUrl() as { orgId: string, projectId: string, navId: string, itemId: string, settingId: string };
 
     const { data: orgs } = useOrgs();
     const { data: project } = useProject();
     const { data: component } = useProjectComponent();
 
     const _breadcrumbs = (): IBreadcrumbItem[] => {
+
+        console.debug(foo);
+
         const crumbs: IBreadcrumbItem[] = [];
 
         if (orgId === undefined)

web/src/components/ProjectList.tsx

@@ -2,19 +2,19 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { DetailsListLayoutMode, IColumn, IRenderFunction, IDetailsRowProps, CheckboxVisibility, SelectionMode, Persona, PersonaSize, getTheme, DetailsList, Stack } from '@fluentui/react';
 import { Project } from 'teamcloud';
 import { NoData } from '.';
-import { useProjects } from '../hooks';
+import { useProjects, useUrl } from '../hooks';
 
 import collaboration from '../img/MSC17_collaboration_010_noBG.png'
 
 export const ProjectList: React.FC = () => {
 
     const navigate = useNavigate();
 
-    const { orgId } = useParams() as { orgId: string };
+    const { orgId } = useUrl() as { orgId: string };
 
     const { data: projects } = useProjects();
 

web/src/components/ProjectTemplateForm.tsx

@@ -2,9 +2,10 @@
 // Licensed under the MIT License.
 
 import React, { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { DefaultButton, PrimaryButton, Stack, TextField } from '@fluentui/react';
 import { ProjectTemplateDefinition } from 'teamcloud';
+import { useUrl } from '../hooks';
 
 export interface IProjectTemplateFormProps {
     embedded?: boolean;
@@ -15,7 +16,7 @@ export interface IProjectTemplateFormProps {
 export const ProjectTemplateForm: React.FC<IProjectTemplateFormProps> = (props) => {
 
     const navigate = useNavigate();
-    const { orgId } = useParams() as { orgId: string };
+    const { orgId } = useUrl() as { orgId: string };
 
     // Project Template
     const [templateName, setTemplateName] = useState<string | undefined>(props.embedded ? 'Sample Project Template' : undefined);

web/src/components/ProjectTemplateList.tsx

@@ -2,20 +2,20 @@
 // Licensed under the MIT License.
 
 import React, { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Checkbox, IColumn, IconButton, Label, Modal, Stack, Text } from '@fluentui/react';
 import ReactMarkdown from 'react-markdown';
 import { ProjectTemplate } from 'teamcloud';
 import { ContentList, ContentSeparator } from '.';
-import { useProjectTemplates } from '../hooks';
+import { useProjectTemplates, useUrl } from '../hooks';
 
 import collaboration from '../img/MSC17_collaboration_010_noBG.png'
 
 export const ProjectTemplateList: React.FC = () => {
 
     const navigate = useNavigate();
 
-    const { orgId } = useParams() as { orgId: string };
+    const { orgId } = useUrl() as { orgId: string };
 
     const { data: templates } = useProjectTemplates();
 

web/src/components/ScheduleForm.tsx

@@ -2,10 +2,10 @@
 // Licensed under the MIT License.
 
 import React, { useState, useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { DefaultButton, Dropdown, DropdownMenuItemType, IDropdownOption, PrimaryButton, Stack, Checkbox, Toggle, IComboBoxOption, ComboBox, IComboBox, Text, Label } from '@fluentui/react';
 import { Component, ComponentTaskTemplate, ComponentTemplate, ScheduleDefinition } from 'teamcloud';
-import { useOrg, useProject, useProjectComponentTemplates, useProjectComponents, useProjectMembers, useUser, useCreateProjectSchedule, useProjectSchedule, useUpdateProjectSchedule } from '../hooks';
+import { useOrg, useProject, useProjectComponentTemplates, useProjectComponents, useProjectMembers, useUser, useCreateProjectSchedule, useProjectSchedule, useUpdateProjectSchedule, useUrl } from '../hooks';
 import { DaysOfWeek, DaysOfWeekNames, ProjectMember, shiftToLocal, shiftToUtc } from '../model';
 import { ContentSeparator } from '.';
 import { ErrorBar } from './common';
@@ -14,7 +14,7 @@ export const ScheduleForm: React.FC = () => {
 
     const navigate = useNavigate();
 
-    const { orgId, projectId, itemId } = useParams() as { orgId: string, projectId: string, itemId: string };
+    const { orgId, projectId, itemId } = useUrl() as { orgId: string, projectId: string, itemId: string };
 
     const now = new Date();