add dedicated grpc api widget

Signed-off-by: Kiss Miklos <miklos@roadie.io>

plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionWidget.tsx

@@ -17,6 +17,7 @@ import React from 'react';
 import { AsyncApiDefinitionWidget } from '../AsyncApiDefinitionWidget';
 import { GraphQlDefinitionWidget } from '../GraphQlDefinitionWidget';
 import { OpenApiDefinitionWidget } from '../OpenApiDefinitionWidget';
+import { GrpcApiDefinitionWidget } from '../GrpcApiDefinitionWidget';
 
 export type ApiDefinitionWidget = {
   type: string;
@@ -51,5 +52,12 @@ export function defaultDefinitionWidgets(): ApiDefinitionWidget[] {
         <GraphQlDefinitionWidget definition={definition} />
       ),
     },
+    {
+      type: 'grpc',
+      title: 'gRPC',
+      component: definition => (
+        <GrpcApiDefinitionWidget definition={definition} />
+      ),
+    },
   ];
 }

plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.test.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { renderInTestApp } from '@backstage/test-utils';
+import React from 'react';
+import { GrpcApiDefinitionWidget } from './GrpcApiDefinitionWidget';
+
+describe('<GrpcApiDefinitionWidget />', () => {
+  it('renders plain text', async () => {
+    const { getAllByText } = await renderInTestApp(
+      <GrpcApiDefinitionWidget definition="Hello World" />,
+    );
+
+    expect(
+      getAllByText((_text, element) => element?.textContent === 'Hello World')
+        .length,
+    ).toBeGreaterThan(0);
+  });
+});

plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { CodeSnippet } from '@backstage/core-components';
+import { useTheme } from '@material-ui/core/styles';
+import { BackstageTheme } from '@backstage/theme';
+
+export type GrpcApiDefinitionWidgetProps = {
+  definition: any;
+};
+
+export const GrpcApiDefinitionWidget = (
+  props: GrpcApiDefinitionWidgetProps,
+) => {
+  const theme = useTheme<BackstageTheme>();
+  return (
+    <CodeSnippet
+      customStyle={{ backgroundColor: theme.palette.background.default }}
+      text={props.definition}
+      language="protobuf"
+      showCopyCodeButton
+    />
+  );
+};

plugins/api-docs/src/components/GrpcApiDefinitionWidget/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { GrpcApiDefinitionWidget } from './GrpcApiDefinitionWidget';
+export type { GrpcApiDefinitionWidgetProps } from './GrpcApiDefinitionWidget';