Adding CSS to Failure Instance Panel (#1063)

* Adding Failure Instance Panel CSS

Author: Annika Kouhia

src/DetailsView/Styles/detailsview.scss

@@ -221,15 +221,54 @@ div.insights-file-issue-details-dialog-container {
     }
     .add-failure-instruction {
         font-weight: 500;
-        margin-bottom: 20px;
-        margin-top: 20px;
+        margin: 20px 0px 20px 0px;
     }
     .header-text {
         margin-top: 30px;
         font-size: 21px;
     }
-}
+    .footer {
+        padding: 16px 16px 16px 0px;
+    }
+    .learn-more {
+        color: $communication-primary;
+        text-decoration: none;
+        display: inline-block;
+        margin-bottom: 24px;
+    }
+    .failure-instance-snippet-title {
+        margin: 24px 0px 8px 0px;
+        color: $primary-text;
+    }
 
+    .failure-instance-snippet-empty-body {
+        margin: 8px 0px 24px 0px;
+        color: $secondary-text;
+    }
+    .failure-instance-snippet-filled-body {
+        margin: 8px 0px 24px 0px;
+        padding: 12px 16px 12px 16px;
+        max-height: 200px;
+        color: $primary-text;
+        background-color: $neutral-4;
+        overflow-y: scroll;
+        word-wrap: break-word;
+    }
+    .failure-instance-snippet-error {
+        margin: 9px 0px 50px 9px;
+        color: $secondary-text;
+        display: flex;
+        flex-direction: row;
+    }
+    .failure-instance-snippet-error-icon {
+        color: $negative-outcome;
+        padding: 3px 8px;
+    }
+}
+.failure-instance-selector-note {
+    color: $secondary-text;
+    margin: 8px 0px 8px 0px;
+}
 .preview-features-panel {
     .preview-feature-toggle-list {
         margin-top: 2vh;
@@ -623,9 +662,18 @@ div.insights-file-issue-details-dialog-container {
             .assessment-instance-label.not-applicable {
                 font-size: 10px;
             }
-            .assessment-instance-textContent {
+            .all-content {
+                display: flex;
+                flex-direction: row;
+                vertical-align: center;
                 font-size: 14px;
                 line-height: 24px;
+            }
+            .instance-header {
+                color: $primary-text;
+                white-space: pre;
+            }
+            .assessment-instance-textContent {
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;

src/DetailsView/components/assessment-instance-details-column.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 
 export interface AssessmentInstanceDetailsColumnProps {
     labelText?: string;
+    headerText?: string;
     textContent: string;
     background: string;
     tooltipId: string;
@@ -15,6 +16,7 @@ export interface AssessmentInstanceDetailsColumnProps {
 export class AssessmentInstanceDetailsColumn extends React.Component<AssessmentInstanceDetailsColumnProps> {
     public render(): JSX.Element {
         const showLabel = !!this.props.labelText;
+        const showHeader = !!this.props.headerText;
         const textContent = this.props.textContent;
 
         const classNames = css('assessment-instance-label', this.props.customClassName);
@@ -28,7 +30,10 @@ export class AssessmentInstanceDetailsColumn extends React.Component<AssessmentI
                 ) : null}
                 <div>
                     <TooltipHost content={textContent} calloutProps={{ gapSpace: 0 }}>
-                        <div className="assessment-instance-textContent">{textContent}</div>
+                        <div className="all-content">
+                            {showHeader ? <strong className="instance-header">{this.props.headerText} </strong> : null}
+                            <div className="assessment-instance-textContent">{textContent}</div>
+                        </div>
                     </TooltipHost>
                 </div>
             </div>

src/DetailsView/components/assessment-table-column-config-handler.tsx

@@ -108,11 +108,13 @@ export class AssessmentTableColumnConfigHandler {
     }
 
     private onRenderCapturedInstanceDetailsColumn(item: CapturedInstanceRowData): JSX.Element {
+        const headerText = item.instance.description ? 'Comment:' : 'Path:';
+        const textContent = item.instance.description ? item.instance.description : item.instance.selector;
         return (
             <AssessmentInstanceDetailsColumn
                 background={'#767676'}
-                labelText={'N/A'}
-                textContent={item.instance.description}
+                textContent={textContent}
+                headerText={headerText}
                 tooltipId={item.instance.id}
                 customClassName="not-applicable"
             />

src/DetailsView/components/failure-instance-panel-control.tsx

@@ -3,8 +3,9 @@
 import { clone, isEqual } from 'lodash';
 import { ActionButton } from 'office-ui-fabric-react/lib/Button';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { ILabelStyles } from 'office-ui-fabric-react/lib/Label';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { ITextFieldStyles, TextField } from 'office-ui-fabric-react/lib/TextField';
 import * as React from 'react';
 
 import { AssessmentsProvider } from 'assessments/types/assessments-provider';
@@ -121,8 +122,9 @@ export class FailureInstancePanelControl extends React.Component<FailureInstance
                 this.props.actionType === CapturedInstanceActionType.CREATE
                     ? FailureInstancePanelControl.addFailureInstanceLabel
                     : 'Edit failure instance',
-            hasCloseButton: false,
-            closeButtonAriaLabel: null,
+            hasCloseButton: true,
+            closeButtonAriaLabel: 'Close failure instance panel',
+            onRenderFooterContent: this.getActionCancelButtons,
         };
 
         return (
@@ -135,29 +137,41 @@ export class FailureInstancePanelControl extends React.Component<FailureInstance
                 />
                 <TextField
                     className="observed-failure-textfield"
-                    label="Comments"
+                    label="Comment"
+                    styles={getStyles}
                     multiline={true}
-                    rows={8}
+                    rows={4}
                     value={this.state.currentInstance.failureDescription}
                     onChange={this.onFailureDescriptionChange}
                     resizable={false}
                 />
+            </GenericPanel>
+        );
+    }
+
+    private getActionCancelButtons = (): JSX.Element => {
+        let primaryButtonText = 'Save';
+        let primaryButtonOnClick = this.onSaveEditedFailureInstance;
+
+        if (this.props.actionType === CapturedInstanceActionType.CREATE) {
+            primaryButtonText = 'Add failed instance';
+            primaryButtonOnClick = this.onAddFailureInstance;
+        }
+
+        return (
+            <div className="footer">
                 <ActionAndCancelButtonsComponent
                     isHidden={false}
                     primaryButtonDisabled={
                         this.state.currentInstance.failureDescription === null && this.state.currentInstance.path === null
                     }
-                    primaryButtonText={this.props.actionType === CapturedInstanceActionType.CREATE ? 'Add' : 'Save'}
-                    primaryButtonOnClick={
-                        this.props.actionType === CapturedInstanceActionType.CREATE
-                            ? this.onAddFailureInstance
-                            : this.onSaveEditedFailureInstance
-                    }
+                    primaryButtonText={primaryButtonText}
+                    primaryButtonOnClick={primaryButtonOnClick}
                     cancelButtonOnClick={this.closeFailureInstancePanel}
                 />
-            </GenericPanel>
+            </div>
         );
-    }
+    };
 
     private getFailureInstancePanelDetails = (): JSX.Element => {
         return (
@@ -224,3 +238,21 @@ export class FailureInstancePanelControl extends React.Component<FailureInstance
         this.setState({ isPanelOpen: false });
     };
 }
+
+function getStyles(): Partial<ITextFieldStyles> {
+    return {
+        subComponentStyles: {
+            label: getLabelStyles,
+        },
+    };
+}
+
+function getLabelStyles(): ILabelStyles {
+    return {
+        root: [
+            {
+                paddingBottom: 8,
+            },
+        ],
+    };
+}

src/DetailsView/components/failure-instance-panel-details.tsx

@@ -1,7 +1,9 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { ILabelStyles } from 'office-ui-fabric-react/lib/Label';
+import { ITextFieldStyles, TextField } from 'office-ui-fabric-react/lib/TextField';
 import * as React from 'react';
 import { NamedSFC } from '../../common/react/named-sfc';
 
@@ -13,27 +15,65 @@ export type FailureInstancePanelDetailsProps = {
 };
 
 export const FailureInstancePanelDetails = NamedSFC<FailureInstancePanelDetailsProps>('FailureInstancePanelDetails', props => {
+    const getSnippetInfo = (): JSX.Element => {
+        if (!props.snippet) {
+            return (
+                <div className="failure-instance-snippet-empty-body">Code snippet will auto-populate based on the CSS selector input.</div>
+            );
+        } else if (props.snippet.startsWith('No code snippet is map')) {
+            return (
+                <div className="failure-instance-snippet-error">
+                    <Icon iconName="statusErrorFull" className="failure-instance-snippet-error-icon" />
+                    <div>{props.snippet}</div>
+                </div>
+            );
+        } else {
+            return <div className="failure-instance-snippet-filled-body">{props.snippet}</div>;
+        }
+    };
     return (
         <div>
-            <a className="learn-more"> Learn more about adding failure instances </a>
+            <a href="#" className="learn-more">
+                Learn more about adding failure instances
+            </a>
             <TextField
-                className="selector-failure-textfield"
                 label="CSS Selector"
+                styles={getStyles}
                 multiline={true}
-                rows={8}
+                rows={4}
                 value={props.path}
                 onChange={props.onSelectorChange}
                 resizable={false}
-                defaultValue="CSS selector"
+                placeholder="CSS Selector"
             />
-            <div>Note: If the CSS selector maps to multiple snippets, the first will be selected.</div>
-            <div>
-                <DefaultButton text="Validate CSS selector" onClick={props.onValidateSelector} disabled={props.path === ''} />
+            <div className="failure-instance-selector-note">
+                Note: If the CSS selector maps to multiple snippets, the first will be selected
             </div>
             <div>
-                <label>Code Snippet</label>
-                <div>{props.snippet}</div>
+                <DefaultButton text="Validate CSS selector" onClick={props.onValidateSelector} disabled={props.path === null} />
+            </div>
+            <div aria-live="polite" aria-atomic="true">
+                <div className="failure-instance-snippet-title">Code Snippet</div>
+                {getSnippetInfo()}
             </div>
         </div>
     );
 });
+
+function getStyles(): Partial<ITextFieldStyles> {
+    return {
+        subComponentStyles: {
+            label: getLabelStyles,
+        },
+    };
+}
+
+function getLabelStyles(): ILabelStyles {
+    return {
+        root: [
+            {
+                paddingBottom: 8,
+            },
+        ],
+    };
+}

src/DetailsView/components/generic-panel.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { css } from '@uifabric/utilities';
-import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
+import { css, IRenderFunction } from '@uifabric/utilities';
+import { IPanelProps, Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
 import * as React from 'react';
 
 export interface GenericPanelProps {
@@ -11,6 +11,7 @@ export interface GenericPanelProps {
     className?: string;
     closeButtonAriaLabel: string;
     hasCloseButton: boolean;
+    onRenderFooterContent?: IRenderFunction<IPanelProps>;
 }
 
 export class GenericPanel extends React.Component<GenericPanelProps> {
@@ -27,6 +28,7 @@ export class GenericPanel extends React.Component<GenericPanelProps> {
                 hasCloseButton={this.props.hasCloseButton}
                 headerText={this.props.title}
                 headerClassName="header-text"
+                onRenderFooter={this.props.onRenderFooterContent}
             >
                 {this.props.children}
             </Panel>