15856: Adds new component to show a conditional warning icon.

This component takes a list of regular expressions, if any of them matches
the passed text, the icon is displayed with a custom tooltip message.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <ldipentima@veritasgenetics.com>

diff --git a/src/components/warning/warning.tsx b/src/components/warning/warning.tsx
new file mode 100644 (file)
index 0000000..1a8f445
--- /dev/null
+++ b/src/components/warning/warning.tsx
@@ -0,0 +1,29 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { WarningIcon } from "~/components/icon/icon";
+import { Tooltip } from "@material-ui/core";
+
+interface WarningComponentProps {
+    text: string;
+    rules: RegExp[];
+    message: string;
+}
+
+export const WarningComponent = ({ text, rules, message }: WarningComponentProps) =>
+    rules.find(aRule => text.match(aRule) !== null)
+    ? message
+        ? <Tooltip title={message}><WarningIcon /></Tooltip>
+        : <WarningIcon />
+    : null;
+
+interface IllegalNamingWarningProps {
+    name: string;
+}
+
+export const IllegalNamingWarning = ({ name }: IllegalNamingWarningProps) =>
+    <WarningComponent
+        text={name} rules={[/\//, /^\.{1,2}$/]}
+        message="Names being '.', '..' or including '/' cause issues with WebDAV, please edit it to something different." />;
\ No newline at end of file