Rename Cards to Features

Signed-off-by: Erik Engervall <erik.engervall@gmail.com>

plugins/github-release-manager/README.md

@@ -10,7 +10,7 @@ What `GRM` does is manage your **[releases](https://docs.github.com/en/github/ad
 
 `GRM` is built with industry standards in mind and the flow is as follows:
 
-![](./src/cards/info/flow.png)
+![](./src/features/Info/flow.png)
 
 > **GitHub**: The source control system where releases reside in a practical sense. Read more about [GitHub releases](https://docs.github.com/en/github/administering-a-repository/managing-releases-in-a-repository). (Note that this plugin works just as well with GitHub Enterprise.)
 >

plugins/github-release-manager/src/GitHubReleaseManager.tsx

@@ -25,14 +25,14 @@ import {
   ComponentConfigPatch,
   ComponentConfigPromoteRc,
 } from './types/types';
-import { Cards } from './cards/Cards';
+import { Features } from './features/Features';
 import { CenteredCircularProgress } from './components/CenteredCircularProgress';
 import { githubReleaseManagerApiRef } from './api/serviceApiRef';
 import { InfoCardPlus } from './components/InfoCardPlus';
 import { isProjectValid } from './helpers/isProjectValid';
 import { PluginApiClientContext } from './contexts/PluginApiClientContext';
 import { ProjectContext, Project } from './contexts/ProjectContext';
-import { RepoDetailsForm } from './cards/RepoDetailsForm/RepoDetailsForm';
+import { RepoDetailsForm } from './features/RepoDetailsForm/RepoDetailsForm';
 import { useQueryHandler } from './hooks/useQueryHandler';
 import { useStyles } from './styles/styles';
 
@@ -90,7 +90,9 @@ export function GitHubReleaseManager(props: GitHubReleaseManagerProps) {
             <RepoDetailsForm username={usernameResponse.value.username} />
           </InfoCardPlus>
 
-          {isProjectValid(project) && <Cards components={props.components} />}
+          {isProjectValid(project) && (
+            <Features components={props.components} />
+          )}
         </div>
       </ProjectContext.Provider>
     </PluginApiClientContext.Provider>

plugins/github-release-manager/src/components/InfoCardPlus.test.tsx

@@ -24,6 +24,6 @@ describe('InfoCardPlus', () => {
   it('render InfoCardPlus', () => {
     const { getByTestId } = render(<InfoCardPlus />);
 
-    expect(getByTestId(TEST_IDS.info.infoCardPlus)).toBeInTheDocument();
+    expect(getByTestId(TEST_IDS.info.infoFeaturePlus)).toBeInTheDocument();
   });
 });

plugins/github-release-manager/src/components/InfoCardPlus.tsx

@@ -21,7 +21,7 @@ import { makeStyles } from '@material-ui/core';
 import { TEST_IDS } from '../test-helpers/test-ids';
 
 const useStyles = makeStyles(() => ({
-  card: {
+  feature: {
     marginBottom: '3em',
   },
 }));
@@ -32,9 +32,9 @@ export const InfoCardPlus = ({ children }: { children?: React.ReactNode }) => {
   return (
     <div
       style={{ position: 'relative' }}
-      data-testid={TEST_IDS.info.infoCardPlus}
+      data-testid={TEST_IDS.info.infoFeaturePlus}
     >
-      <InfoCard className={classes.card}>{children}</InfoCard>
+      <InfoCard className={classes.feature}>{children}</InfoCard>
     </div>
   );
 };

plugins/github-release-manager/src/features/Features.test.tsx

@@ -31,12 +31,12 @@ jest.mock('../contexts/ProjectContext', () => ({
   }),
 }));
 
-import { Cards } from './Cards';
+import { Features } from './Features';
 
-describe('Cards', () => {
-  it('should omit cards omitted via configuration', async () => {
+describe('Features', () => {
+  it('should omit features omitted via configuration', async () => {
     const { getByTestId } = render(
-      <Cards
+      <Features
         components={{
           info: { omit: false },
           createRc: { omit: true },
@@ -98,6 +98,20 @@ describe('Cards', () => {
           </strong>
           : A GitHub release intended for end users
         </p>
+        <button
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label"
+          >
+            Show stats
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
       </div>
     `);
   });

plugins/github-release-manager/src/features/Features.tsx

@@ -31,7 +31,7 @@ import { useProjectContext } from '../contexts/ProjectContext';
 import { useVersioningStrategyMatchesRepoTags } from '../hooks/useVersioningStrategyMatchesRepoTags';
 import { validateTagName } from '../helpers/tagParts/validateTagName';
 
-export function Cards({
+export function Features({
   components,
 }: {
   components: GitHubReleaseManagerProps['components'];

plugins/github-release-manager/src/features/Info/Info.tsx

@@ -14,19 +14,20 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Link, Typography } from '@material-ui/core';
+import React, { useState } from 'react';
+import { Link, Typography, Button } from '@material-ui/core';
 
-import { Differ } from '../../components/Differ';
-import { InfoCardPlus } from '../../components/InfoCardPlus';
-import { TEST_IDS } from '../../test-helpers/test-ids';
-import { useProjectContext } from '../../contexts/ProjectContext';
-import { useStyles } from '../../styles/styles';
-import flowImage from './flow.png';
 import {
   GetBranchResult,
   GetLatestReleaseResult,
 } from '../../api/PluginApiClient';
+import { Differ } from '../../components/Differ';
+import { InfoCardPlus } from '../../components/InfoCardPlus';
+import { Stats } from '../../components/Stats/Stats';
+import { TEST_IDS } from '../../test-helpers/test-ids';
+import { useProjectContext } from '../../contexts/ProjectContext';
+import { useStyles } from '../../styles/styles';
+import flowImage from './flow.png';
 
 interface InfoCardProps {
   releaseBranch: GetBranchResult | null;
@@ -36,6 +37,7 @@ interface InfoCardProps {
 export const Info = ({ releaseBranch, latestRelease }: InfoCardProps) => {
   const { project } = useProjectContext();
   const classes = useStyles();
+  const [showStats, setShowStats] = useState(false);
 
   return (
     <InfoCardPlus>
@@ -63,6 +65,15 @@ export const Info = ({ releaseBranch, latestRelease }: InfoCardProps) => {
           <strong>Release Version</strong>: A GitHub release intended for end
           users
         </Typography>
+
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => setShowStats(true)}
+        >
+          Show stats
+        </Button>
+        {showStats && <Stats setShowStats={setShowStats} />}
       </div>
 
       <div style={{ marginBottom: '1em' }}>

plugins/github-release-manager/src/test-helpers/test-ids.test.ts

@@ -67,7 +67,7 @@ describe('test-ids', () => {
           },
           "info": Object {
             "info": "grm--info",
-            "infoCardPlus": "grm--info-card-plus",
+            "infoFeaturePlus": "grm--info-feature-plus",
           },
           "patch": Object {
             "body": "grm--patch-body",

plugins/github-release-manager/src/test-helpers/test-ids.ts

@@ -17,7 +17,7 @@
 export const TEST_IDS = {
   info: {
     info: 'grm--info',
-    infoCardPlus: 'grm--info-card-plus',
+    infoFeaturePlus: 'grm--info-feature-plus',
   },
   createRc: {
     cta: 'grm--create-rc--cta',