web ui bug fixes and tweaks +resetdemo

microsoft · Sep 7, 2021 · 6770db1 · 6770db1
1 parent 7d6a16e
commit 6770db1
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 29 deletions.
diff --git a/web/src/components/ComponentForm.tsx b/web/src/components/ComponentForm.tsx
@@ -145,7 +145,6 @@ export const ComponentForm: React.FC = () => {
 
 
     const _onItemInvoked = (template: ComponentTemplate): void => {
-        console.log(template.inputJsonSchema)
         setTemplate(template);
     };
 

diff --git a/web/src/components/ComponentTaskConsole.tsx b/web/src/components/ComponentTaskConsole.tsx
@@ -47,7 +47,7 @@ export const ComponentTaskConsole: React.FunctionComponent<IComponentTaskConsole
 
     useEffect(() => {
         if (output && selectedLine && listRef.current) {
-            console.log(`+ setScroll`);
+            // console.log(`+ setScroll`);
             listRef.current.scrollToIndex(selectedLine, i => 20, ScrollToMode.center);
         }
     }, [output, selectedLine, listRef]);

diff --git a/web/src/components/ComponentTaskList.tsx b/web/src/components/ComponentTaskList.tsx
@@ -5,8 +5,8 @@ import React, { useEffect } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import { CheckboxVisibility, DetailsList, DetailsListLayoutMode, FontIcon, getTheme, IColumn, IDetailsRowProps, IRenderFunction, Link, SelectionMode, Stack, Text } from '@fluentui/react';
 import { ComponentTask } from 'teamcloud';
-import { ComponentTaskConsole } from '.';
 import { useOrg, useProject, useProjectComponent, useProjectComponentTasks, useProjectComponentTemplates, useProjectComponentTask } from '../hooks';
+import { ComponentTaskConsole } from '.';
 
 export interface IComponentTaskListProps { }
 

diff --git a/web/src/components/ComponentTaskMenu.tsx b/web/src/components/ComponentTaskMenu.tsx
@@ -4,8 +4,7 @@
 import React, { useState, useEffect } from 'react';
 import { DefaultButton, Dialog, DialogFooter, DialogType, getTheme, PrimaryButton, Separator, Stack } from '@fluentui/react';
 import { ComponentTaskTemplate } from 'teamcloud';
-import { useCreateProjectComponentTask, useOrg, useProjectComponent, useProjectComponentTemplates } from '../hooks';
-import { useDeleteProjectComponent } from '../hooks/useDeleteProjectComponent';
+import { useCreateProjectComponentTask, useOrg, useProjectComponent, useProjectComponentTemplates, useDeleteProjectComponent } from '../hooks';
 
 export interface IComponentTaskMenuProps { }
 
@@ -45,7 +44,7 @@ export const ComponentTaskMenu: React.FunctionComponent<IComponentTaskMenuProps>
 
     const onClickDeleteButton = async () => {
         if (org && component) {
-            if (dialogHidden){
+            if (dialogHidden) {
                 showDialog();
             } else {
                 await deleteComponent(component);
@@ -63,29 +62,36 @@ export const ComponentTaskMenu: React.FunctionComponent<IComponentTaskMenuProps>
         title: 'Delete Component',
         subText: `Do you want to delete component ${component?.displayName}?`
     };
-      
+
     return (
         <>
             <Stack horizontal tokens={{ childrenGap: '6px' }}>
-                { taskTemplates && component?.deleted === undefined ? taskTemplates.map((tt, i) => (
+                {taskTemplates && component?.deleted === undefined ? taskTemplates.map((tt, i) => (
                     <>
                         <Stack.Item
                             key={tt.id}>
                             <DefaultButton
+                                key={tt.id}
                                 theme={theme}
                                 text={tt.displayName ?? ''}
                                 alt={tt.description ?? ''}
                                 onClick={() => onClickTaskButton(tt)} />
                         </Stack.Item>
-                        { (i === (taskTemplates.length - 1)) ? <Stack.Item key='Seperator'><Separator vertical /></Stack.Item> : <></> }
+                        {(i === (taskTemplates.length - 1)) ? <Stack.Item key='Seperator'><Separator vertical /></Stack.Item> : <></>}
                     </>
                 )) : []}
                 <Stack.Item
                     key='delete'>
-                    <DefaultButton
+                    <PrimaryButton
                         theme={theme}
                         text='Delete'
                         hidden={!(org && component)}
+                        styles={{
+                            root: { backgroundColor: theme.palette.red, border: '1px solid transparent' },
+                            rootHovered: { backgroundColor: theme.palette.redDark, border: '1px solid transparent' },
+                            rootPressed: { backgroundColor: theme.palette.redDark, border: '1px solid transparent' },
+                            label: { fontWeight: 700 }
+                        }}
                         disabled={component === undefined || component.deleted !== undefined}
                         onClick={() => onClickDeleteButton()} />
                     <Dialog
@@ -94,11 +100,16 @@ export const ComponentTaskMenu: React.FunctionComponent<IComponentTaskMenuProps>
                         dialogContentProps={dialogContentProps}
                         modalProps={{ isBlocking: true }}>
                         <DialogFooter>
-                            <PrimaryButton onClick={onClickDeleteButton} text="Delete" />
+                            <PrimaryButton styles={{
+                                root: { backgroundColor: theme.palette.red, border: '1px solid transparent' },
+                                rootHovered: { backgroundColor: theme.palette.redDark, border: '1px solid transparent' },
+                                rootPressed: { backgroundColor: theme.palette.redDark, border: '1px solid transparent' },
+                                label: { fontWeight: 700 }
+                            }} onClick={onClickDeleteButton} text="Delete" />
                             <DefaultButton onClick={hideDialog} text="Cancel" />
                         </DialogFooter>
                     </Dialog>
-                </Stack.Item>  
+                </Stack.Item>
             </Stack>
 
         </>

diff --git a/web/src/components/ComponentsCard.tsx b/web/src/components/ComponentsCard.tsx
@@ -5,11 +5,8 @@ import React, { useEffect, useState } from 'react';
 import { useHistory, useParams } 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 { DetailCard, ComponentLink } from '.';
-import { useOrg, useDeploymentScopes, useProject, useProjectComponents, useProjectComponentTemplates } from '../hooks';
-
-import { useDeleteProjectComponent } from '../hooks/useDeleteProjectComponent';
-import { ComponentIcon } from './ComponentIcon';
+import { useOrg, useDeploymentScopes, useProject, useProjectComponents, useProjectComponentTemplates, useDeleteProjectComponent } from '../hooks';
+import { DetailCard, ComponentLink, ComponentIcon } from '.';
 
 export const ComponentsCard: React.FC = () => {
 
@@ -33,7 +30,7 @@ export const ComponentsCard: React.FC = () => {
 
     useEffect(() => {
         if (components && templates && (items === undefined || items.length !== components.length)) {
-            console.log(JSON.stringify(components));
+            // console.log(JSON.stringify(components));
             setItems(components.map(c => ({ component: c, template: templates.find(t => t.id === c.templateId)! })));
         }
     }, [components, templates, items]);

diff --git a/web/src/components/DeploymentScopeForm.tsx b/web/src/components/DeploymentScopeForm.tsx
@@ -49,7 +49,7 @@ export const DeploymentScopeForm: React.FC<IDeploymentScopeFormProps> = (props)
 
     const _changeForm = async (e: IChangeEvent<any>) => {
         console.log("Form errors: " + e.errors.length);
-        console.log(JSON.stringify(e.formData))
+        // console.log(JSON.stringify(e.formData))
         setScopeTypeData(e.errors.length === 0 ? JSON.stringify(e.formData) : undefined);
     };
 
@@ -60,16 +60,16 @@ export const DeploymentScopeForm: React.FC<IDeploymentScopeFormProps> = (props)
 
     useEffect(() => {
         if (scopeTypeOptions === undefined) {
-            console.log('+ scopeTypeOptions');
+            // console.log('+ scopeTypeOptions');
             var options = adapterInformation?.map(info => ({ key: info.type?.toString(), text: info.displayName })) as IComboBoxOption[];
             setScopeType(options?.find(option => option !== undefined)?.key as string);
             setScopeTypeOptions(options);
         }
         if (scopeType && adapterInformation) {
             var scopeTypeInfo = adapterInformation?.find(info => info && info.type === scopeType)
             // console.log("ScopeTypeInfo = " + JSON.stringify(scopeTypeInfo));
-            console.log(JSON.stringify(JSON.parse(scopeTypeInfo!.inputDataSchema!)));
-            console.log(JSON.stringify(JSON.parse(scopeTypeInfo!.inputDataForm!)));
+            // console.log(JSON.stringify(JSON.parse(scopeTypeInfo!.inputDataSchema!)));
+            // console.log(JSON.stringify(JSON.parse(scopeTypeInfo!.inputDataForm!)));
             setScopeTypeSchema(scopeTypeInfo?.inputDataSchema || undefined);
             setScopeTypeForm(scopeTypeInfo?.inputDataForm || undefined);
         } else {

diff --git a/web/src/components/DeploymentScopeList.tsx b/web/src/components/DeploymentScopeList.tsx
@@ -30,7 +30,7 @@ export const DeploymentScopeList: React.FC = () => {
     ];
 
     const _onItemAuthorize = async (scope: DeploymentScope): Promise<void> => {
-        console.log(JSON.stringify(scope));
+        // console.log(JSON.stringify(scope));
         let response = await api.authorizeDeploymentScope(scope.id, scope.organization, { body: scope });
         if (response && response.data && response.data.authorizeUrl) {
             window.open(response.data.authorizeUrl, "_blank");

diff --git a/web/src/components/UserForm.tsx b/web/src/components/UserForm.tsx
@@ -6,9 +6,8 @@ import { PrimaryButton, DefaultButton, Stack, TextField, Dropdown, Spinner, Icon
 import { AlternateIdentity, User, UserRole } from 'teamcloud';
 import { GraphUser } from '../model'
 import { api } from '../API'
-import { UserPersona } from '.';
+import { UserPersona, Lightbox } from '.';
 import { prettyPrintCamlCaseString } from '../Utils';
-import { Lightbox } from './common';
 import { useProjects } from '../hooks';
 import { useQueryClient } from 'react-query';
 
@@ -58,7 +57,7 @@ export const UserForm: React.FC<IUserFormProps> = (props) => {
 
     useEffect(() => {
         if (props.user) {
-            console.log("Updating form user: " + JSON.stringify(props.user));
+            // console.log("Updating form user: " + JSON.stringify(props.user));
             setFormUser({ ...props.user });
         } else {
             setFormUser(undefined);
@@ -88,7 +87,7 @@ export const UserForm: React.FC<IUserFormProps> = (props) => {
 
                 setFormEnabled(false);
 
-                const { code } = await api.updateOrganizationUserMe(formUser!.organization, {
+                await api.updateOrganizationUserMe(formUser!.organization, {
                     body: formUser,
                     onResponse: (raw, flat) => {
                         if (raw.status >= 400)
@@ -102,7 +101,7 @@ export const UserForm: React.FC<IUserFormProps> = (props) => {
 
             } catch (error) {
 
-                setErrorMessage(error);
+                setErrorMessage(`${error}`);
 
             } finally {
 

diff --git a/web/src/components/index.ts b/web/src/components/index.ts
@@ -5,6 +5,7 @@ export * from './common'
 export * from './nav'
 export * from './AuditList'
 export * from './ComponentForm'
+export * from './ComponentIcon'
 export * from './ComponentLink'
 export * from './ComponentList'
 export * from './ComponentOverview'

diff --git a/web/src/hooks/index.ts b/web/src/hooks/index.ts
@@ -14,6 +14,7 @@ export * from './useCreateProjectComponent'
 export * from './useCreateProjectComponentTask'
 export * from './useCreateProjectSchedule'
 export * from './useCreateProjectTemplate'
+export * from './useDeleteProjectComponent'
 export * from './useDeploymentScopes'
 export * from './useGraphUser'
 export * from './useInterval'

diff --git a/web/src/index.css b/web/src/index.css
@@ -62,7 +62,7 @@ pre.failure {
   color: lightskyblue;
 }
 
-.deployment-state-icon-provisioning {
+.deployment-state-icon-processing {
   font-size: 26px;
   color: lightskyblue;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -145,7 +145,6 @@ export const ComponentForm: React.FC = () => { @@
         const _onItemInvoked = (template: ComponentTemplate): void => {
-            console.log(template.inputJsonSchema)
             setTemplate(template);
         };
@@ Expand Down @@