Initial Move from Azure DevOps to GitHub

src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less

@@ -0,0 +1,57 @@
+@import "../../../../less/Common/Constants";
+
+@ErrorDisplayImageHeight: 14px;
+
+.warningErrorContainer {
+    padding: 24px 34px 0px 34px;
+
+    .warningErrorContent {
+        background-color: @BaseLow;
+        padding: @DefaultSpace;
+        display: inline-flex;
+    
+        Img {
+            width: @WarningErrorIconSize;
+            height: @WarningErrorIconSize;
+            margin-left: @SmallSpace;
+        }
+    
+        .warningErrorDetailsLinkContainer {
+            padding-left: @MediumSpace;
+            margin: auto 0px auto 0px;
+    
+            .formErrors {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: @FormErrorWidth;
+                padding-top: 2px;
+                color: @BaseHigh;
+                display: block;
+            }
+    
+            .errorLink {
+                cursor: pointer;
+            }
+        }
+
+        .paneErrorIcon {
+            margin-top: 2px;
+        }
+
+        .paneWarningIcon {
+            margin-top: @DefaultSpace;
+        }
+
+        .settingErrorMsg {
+            padding-top: @DefaultSpace;
+        }
+    }
+}
+
+.scaleWarningContainer {
+    padding: 24px 20px 0px 20px;
+
+    .warningErrorContent {
+        width: 100%;
+    }
+}

src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts

@@ -0,0 +1,30 @@
+import template from "./error-display-component.html";
+
+/**
+ * Helper class for ko component registration
+ * This component displays an error as designed in:
+ * https://microsoft.sharepoint.com/teams/DPX/Modern/DocDB/_layouts/15/WopiFrame.aspx?sourcedoc={66864d4a-f925-4cbe-9eb4-79f8d191a115}&action=edit&wd=target%28DocumentDB%20emulator%2Eone%7CE617D0A7-F77C-4968-B75A-1451049F4FEA%2FError%20notification%7CAA1E4BC9-4D72-472C-B40C-2437FA217226%2F%29
+ * TODO: support "More details"
+ */
+export class ErrorDisplayComponent {
+  constructor() {
+    return {
+      viewModel: ErrorDisplayViewModel,
+      template
+    };
+  }
+}
+
+/**
+ * Parameters for this component
+ */
+interface ErrorDisplayParams {
+  errorMsg: ko.Observable<string>; // Primary message
+}
+
+class ErrorDisplayViewModel {
+  private params: ErrorDisplayParams;
+  public constructor(params: ErrorDisplayParams) {
+    this.params = params;
+  }
+}

src/Explorer/Controls/ErrorDisplayComponent/error-display-component.html

@@ -0,0 +1,6 @@
+<div class="warningErrorContainer" data-bind="visible: !!params.errorMsg()">
+  <div class="warningErrorContent">
+    <span><img src="/error_red.svg" alt="Error"/></span>
+    <span class="settingErrorMsg warningErrorDetailsLinkContainer" data-bind="text: params.errorMsg()"></span>
+  </div>
+</div>