Monaco editor refactoring (#4225)

* monaco editor refactoring

Signed-off-by: Roman <ixrock@gmail.com>

* clean up / responding to comments

Signed-off-by: Roman <ixrock@gmail.com>

* move custom monaco themes to own folder

Signed-off-by: Roman <ixrock@gmail.com>

* fix lint

Signed-off-by: Roman <ixrock@gmail.com>

* removed unused rules from webpack's config (renderer)

Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman authored and GitHub committed 2021-11-03 17:19:17 +02:00
1 parent 0ae4dfbeab
commit 368e2d9a00
44 files changed
+817 -520

No files matched your search

@@ -44,8 +44,4 @@
}
}
}
.validation {
height: 400px;
}
}
@@ -25,16 +25,13 @@ import React from "react";
import { Link } from "react-router-dom";
import { observer } from "mobx-react";
import { CustomResourceDefinition } from "../../../common/k8s-api/endpoints/crd.api";
import { cssNames } from "../../utils";
import { ThemeStore } from "../../theme.store";
import { Badge } from "../badge";
import { DrawerItem, DrawerTitle } from "../drawer";
import type { KubeObjectDetailsProps } from "../kube-object-details";
import { Table, TableCell, TableHead, TableRow } from "../table";
import { Input } from "../input";
import { KubeObjectMeta } from "../kube-object-meta";
import MonacoEditor from "react-monaco-editor";
import { UserStore } from "../../../common/user-store";
import { MonacoEditor } from "../monaco-editor";
import logger from "../../../common/logger";
interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
@@ -127,43 +124,41 @@ export class CRDDetails extends React.Component<Props> {
</TableRow>
</Table>
{printerColumns.length > 0 &&
<>
<DrawerTitle title="Additional Printer Columns"/>
<Table selectable className="printer-columns box grow">
<TableHead>
<TableCell className="name">Name</TableCell>
<TableCell className="type">Type</TableCell>
<TableCell className="json-path">JSON Path</TableCell>
</TableHead>
{
printerColumns.map((column, index) => {
const { name, type, jsonPath } = column;
<>
<DrawerTitle title="Additional Printer Columns"/>
<Table selectable className="printer-columns box grow">
<TableHead>
<TableCell className="name">Name</TableCell>
<TableCell className="type">Type</TableCell>
<TableCell className="json-path">JSON Path</TableCell>
</TableHead>
{
printerColumns.map((column, index) => {
const { name, type, jsonPath } = column;
return (
<TableRow key={index}>
<TableCell className="name">{name}</TableCell>
<TableCell className="type">{type}</TableCell>
<TableCell className="json-path">
<Badge label={jsonPath}/>
</TableCell>
</TableRow>
);
})
}
</Table>
</>
return (
<TableRow key={index}>
<TableCell className="name">{name}</TableCell>
<TableCell className="type">{type}</TableCell>
<TableCell className="json-path">
<Badge label={jsonPath}/>
</TableCell>
</TableRow>
);
})
}
</Table>
</>
}
{validation &&
<>
<DrawerTitle title="Validation"/>
<MonacoEditor
options={{ readOnly: true, ...UserStore.getInstance().getEditorOptions() }}
className={cssNames("MonacoEditor", "validation")}
theme={ThemeStore.getInstance().activeTheme.monacoTheme}
language="yaml"
value={validation}
/>
</>
<>
<DrawerTitle title="Validation"/>
<MonacoEditor
readOnly
value={validation}
style={{ height: 400 }}
/>
</>
}
</div>
);