Renamed to OpenCost*

Signed-off-by: Matt Ray <github@mattray.dev>

plugins/opencost/src/components/OpenCostFetchComponent/OpenCostFetchComponent.test.tsx

@@ -15,12 +15,12 @@
  */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { ExampleFetchComponent } from './ExampleFetchComponent';
+import { OpenCostFetchComponent } from './OpenCostFetchComponent';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { setupRequestMockHandlers } from '@backstage/test-utils';
 
-describe('ExampleFetchComponent', () => {
+describe('OpenCostFetchComponent', () => {
   const server = setupServer();
   // Enable sane handlers for network requests
   setupRequestMockHandlers(server);
@@ -34,7 +34,7 @@ describe('ExampleFetchComponent', () => {
     );
   });
   it('should render', async () => {
-    await render(<ExampleFetchComponent />);
+    await render(<OpenCostFetchComponent />);
     expect(await screen.findByTestId('progress')).toBeInTheDocument();
   });
 });

plugins/opencost/src/components/OpenCostFetchComponent/OpenCostFetchComponent.tsx

@@ -93,7 +93,7 @@ export const DenseTable = ({ users }: DenseTableProps) => {
   );
 };
 
-export const ExampleFetchComponent = () => {
+export const OpenCostFetchComponent = () => {
   const { fetch } = useApi(fetchApiRef);
   const { value, loading, error } = useAsync(async (): Promise<User[]> => {
     const response = await fetch('https://randomuser.me/api/?results=20');

plugins/opencost/src/components/OpenCostFetchComponent/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { ExampleFetchComponent } from './ExampleFetchComponent';
+export { OpenCostFetchComponent } from './OpenCostFetchComponent';

plugins/opencost/src/components/OpenCostPage/OpenCostPage.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { ExampleComponent } from './ExampleComponent';
+import { OpenCostPage } from './OpenCostPage';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { screen } from '@testing-library/react';
@@ -23,7 +23,7 @@ import {
   renderInTestApp,
 } from '@backstage/test-utils';
 
-describe('ExampleComponent', () => {
+describe('OpenCostPage', () => {
   const server = setupServer();
   // Enable sane handlers for network requests
   setupRequestMockHandlers(server);
@@ -36,7 +36,7 @@ describe('ExampleComponent', () => {
   });
 
   it('should render', async () => {
-    await renderInTestApp(<ExampleComponent />);
+    await renderInTestApp(<OpenCostPage />);
     expect(screen.getByText('Welcome to OpenCost!')).toBeInTheDocument();
   });
 });

plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx

@@ -16,37 +16,33 @@
 import React from 'react';
 import { Typography, Grid } from '@material-ui/core';
 import {
-  InfoCard,
   Header,
   Page,
   Content,
   ContentHeader,
-  HeaderLabel,
-  SupportButton,
 } from '@backstage/core-components';
-import { ExampleFetchComponent } from '../ExampleFetchComponent';
+import { OpenCostFetchComponent } from '../OpenCostFetchComponent';
 
-export const ExampleComponent = () => (
+export const OpenCostPage = () => (
   <Page themeId="tool">
-    <Header title="Welcome to OpenCost!" subtitle="Optional subtitle">
-      <img src={require('../../images/logo.png')} alt="OpenCost" />
-      <HeaderLabel label="Owner" value="Team X" />
-      <HeaderLabel label="Lifecycle" value="Alpha" />
+    <Header
+      title="OpenCost"
+      subtitle="Open source Kubernetes cloud cost monitoring"
+    >
+      <a href="https://opencost.io">
+        <img
+          width={68}
+          height={64}
+          src={require('../../images/pig.png')}
+          alt="OpenCost"
+        />
+      </a>
     </Header>
     <Content>
-      <ContentHeader title="Plugin title">
-        <SupportButton>A description of your plugin goes here.</SupportButton>
-      </ContentHeader>
+      <ContentHeader title="Namespaces " />
       <Grid container spacing={3} direction="column">
         <Grid item>
-          <InfoCard title="Information card">
-            <Typography variant="body1">
-              All content should be wrapped in a card like this.
-            </Typography>
-          </InfoCard>
-        </Grid>
-        <Grid item>
-          <ExampleFetchComponent />
+          <OpenCostFetchComponent />
         </Grid>
       </Grid>
     </Content>

plugins/opencost/src/components/OpenCostPage/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { ExampleComponent } from './ExampleComponent';
+export { OpenCostPage } from './OpenCostPage';

plugins/opencost/src/plugin.ts

@@ -31,7 +31,7 @@ export const OpenCostPage = openCostPlugin.provide(
   createRoutableExtension({
     name: 'OpenCostPage',
     component: () =>
-      import('./components/ExampleComponent').then(m => m.ExampleComponent),
+      import('./components/OpenCostPage').then(m => m.OpenCostPage),
     mountPoint: rootRouteRef,
   }),
 );