Merge branch 'main' into Ajay/2140-failed-tests-hook-link

.eslintrc.json

@@ -134,13 +134,7 @@
       {
         "callees": ["classnames", "clsx", "ctl"],
         "config": "tailwind.config.js",
-        "cssFiles": [
-          "**/*.css",
-          "!**/node_modules",
-          "!**/.*",
-          "!**/dist",
-          "!**/build"
-        ],
+        "cssFiles": ["src/**/*.css"],
         "cssFilesRefreshRate": 5000,
         "skipClassAttribute": false,
         "tags": [],

package.json

@@ -141,7 +141,7 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-storybook": "^0.6.13",
-    "eslint-plugin-tailwindcss": "^3.17.3",
+    "eslint-plugin-tailwindcss": "^3.17.4",
     "faker": "^5.5.3",
     "http-proxy-middleware": "^2.0.6",
     "husky": "^7.0.4",

scripts/icons.js

@@ -26,6 +26,7 @@ const enabledIcons = [
   'arrow-down',
   'folder',
   'document',
+  'document-text',
   'branch',
   'exclamation-circle',
   'exclamation-triangle',
@@ -44,6 +45,8 @@ const enabledIcons = [
   'check-circle',
   'question-mark-circle',
   'plus-circle',
+  'eye',
+  'eye-off',
 ]
 
 console.log('Generating Icons import')

src/pages/AccountSettings/tabs/YAML/YamlEditor/YamlEditor.jsx → src/pages/AccountSettings/tabs/YAML/YamlEditor/YamlEditor.tsx

@@ -1,12 +1,11 @@
-import PropTypes from 'prop-types'
 import { forwardRef } from 'react'
 import AceEditor from 'react-ace'
 
 import 'ace-builds/src-noconflict/theme-github'
 import 'ace-builds/src-noconflict/mode-yaml'
 import './codecov-theme.css'
 
-const YamlEditor = forwardRef(({ ...props }, ref) => {
+const YamlEditor = forwardRef<AceEditor>(({ ...props }, ref) => {
   return (
     <AceEditor
       ref={ref}
@@ -25,8 +24,4 @@ const YamlEditor = forwardRef(({ ...props }, ref) => {
 
 YamlEditor.displayName = 'YamlEditor'
 
-YamlEditor.propTypes = {
-  value: PropTypes.string,
-}
-
 export default YamlEditor

src/pages/AccountSettings/tabs/YAML/YamlEditor/codecov-theme.css

@@ -33,3 +33,8 @@
 .ace_scroller[style] {
   left: 4rem !important;
 }
+
+/* this is to better indicate that the user cannot edit and is read-only */
+.useReadOnlyCursor .ace_cursor {
+  opacity: 0.2;
+}

src/pages/RepoPage/SettingsTab/tabs/ConfigurationManager/components/FeatureGroup/FeatureGroup.spec.tsx

@@ -0,0 +1,126 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { MemoryRouter, Route } from 'react-router'
+
+import FeatureGroup from './FeatureGroup'
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <MemoryRouter initialEntries={['/gh/codecov/cool-repo/settings/config']}>
+    <Route path="/:provider/:owner/:repo/settings/config">{children}</Route>
+  </MemoryRouter>
+)
+
+describe('FeatureGroup', () => {
+  it('renders title', async () => {
+    render(<FeatureGroup title="Title" getStartedLink="repo" />, { wrapper })
+
+    const title = await screen.findByText('Title')
+    expect(title).toBeInTheDocument()
+  })
+
+  it('renders get started button', async () => {
+    render(
+      <FeatureGroup
+        title="Title"
+        getStartedLink="repo"
+        showGetStartedLink={true}
+      />,
+      { wrapper }
+    )
+
+    const button = await screen.findByRole('link', { name: 'Get Started' })
+    expect(button).toBeInTheDocument()
+  })
+
+  it('renders children', async () => {
+    render(
+      <FeatureGroup title="Title" getStartedLink="repo">
+        <p>child</p>
+      </FeatureGroup>,
+      { wrapper }
+    )
+
+    const child = await screen.findByText('child')
+    expect(child).toBeInTheDocument()
+  })
+
+  describe('composition with UniversalItems and ProItems', () => {
+    it('renders children', async () => {
+      render(
+        <FeatureGroup title="Title" getStartedLink="repo">
+          <FeatureGroup.UniversalItems>
+            <p>Universal child</p>
+          </FeatureGroup.UniversalItems>
+          <FeatureGroup.ProItems>
+            <p>Pro child</p>
+          </FeatureGroup.ProItems>
+        </FeatureGroup>,
+        { wrapper }
+      )
+
+      const universalChild = await screen.findByText('Universal child')
+      expect(universalChild).toBeInTheDocument()
+
+      const proChild = await screen.findByText('Pro child')
+      expect(proChild).toBeInTheDocument()
+    })
+  })
+})
+
+describe('UniversalItems', () => {
+  it('renders children', async () => {
+    render(
+      <FeatureGroup.UniversalItems>
+        <p>child</p>
+      </FeatureGroup.UniversalItems>,
+      { wrapper }
+    )
+
+    const child = await screen.findByText('child')
+    expect(child).toBeInTheDocument()
+  })
+})
+
+describe('ProItems', () => {
+  it('renders children', async () => {
+    render(
+      <FeatureGroup.ProItems>
+        <p>child</p>
+      </FeatureGroup.ProItems>,
+      { wrapper }
+    )
+
+    const child = await screen.findByText('child')
+    expect(child).toBeInTheDocument()
+  })
+
+  describe('when on team plan', () => {
+    it('renders upgrade to pro CTA', async () => {
+      render(<FeatureGroup.ProItems isTeamPlan={true} />, { wrapper })
+
+      const cta = await screen.findByText('Available with Pro Plan')
+      expect(cta).toBeInTheDocument()
+
+      const upgrade = await screen.findByRole('link', { name: 'upgrade' })
+      expect(upgrade).toBeInTheDocument()
+    })
+  })
+
+  describe('when not on team plan', () => {
+    it('does not render upgrade to pro CTA', async () => {
+      render(
+        <FeatureGroup.ProItems isTeamPlan={false}>
+          <p>child</p>
+        </FeatureGroup.ProItems>,
+        { wrapper }
+      )
+
+      await waitFor(() => screen.findByText('child'))
+
+      const cta = screen.queryByText('Available with Pro Plan')
+      expect(cta).not.toBeInTheDocument()
+
+      const upgrade = screen.queryByRole('link', { name: 'upgrade' })
+      expect(upgrade).not.toBeInTheDocument()
+    })
+  })
+})

src/pages/RepoPage/SettingsTab/tabs/ConfigurationManager/components/FeatureGroup/FeatureGroup.tsx

@@ -0,0 +1,83 @@
+import A from 'ui/A'
+import Button from 'ui/Button'
+import { Card } from 'ui/Card'
+
+interface FeatureGroupProps extends React.PropsWithChildren {
+  title: string
+  getStartedLink: string // navLink key
+  showGetStartedLink?: boolean
+}
+
+function FeatureGroup({
+  title,
+  getStartedLink,
+  showGetStartedLink,
+  children,
+}: FeatureGroupProps) {
+  return (
+    <Card className="pb-5">
+      <Card.Header className="flex">
+        <Card.Title size="xl" className="flex-1">
+          {title}
+        </Card.Title>
+        {showGetStartedLink ? (
+          <Button
+            to={{ pageName: getStartedLink }}
+            disabled={false}
+            variant="primary"
+            hook="configuration-get-started"
+          >
+            Get Started
+          </Button>
+        ) : null}
+      </Card.Header>
+      {children}
+    </Card>
+  )
+}
+
+function UniversalItems({ children }: React.PropsWithChildren) {
+  return (
+    <Card.Content className="mb-0 flex flex-col gap-2">{children}</Card.Content>
+  )
+}
+
+interface ProItemsProps extends React.PropsWithChildren {
+  isTeamPlan?: boolean
+}
+
+function ProItems({ isTeamPlan, children }: ProItemsProps) {
+  if (isTeamPlan) {
+    return (
+      <Card.Footer className="mt-5 flex flex-col gap-2 pb-0">
+        <p className="flex items-baseline gap-1">
+          <span className="font-medium text-ds-gray-quinary">
+            Available with Pro Plan
+          </span>
+          <span className="h-min text-xs">
+            <A
+              to={{ pageName: 'upgradeOrgPlan' }}
+              hook="configuration-upgrade"
+              isExternal={false}
+              variant="medium"
+            >
+              upgrade
+            </A>
+          </span>
+        </p>
+        {children}
+      </Card.Footer>
+    )
+  }
+
+  return (
+    <Card.Content className="mb-0 mt-2 flex flex-col gap-2">
+      {children}
+    </Card.Content>
+  )
+}
+
+export default Object.assign(FeatureGroup, {
+  UniversalItems,
+  ProItems,
+})

src/pages/RepoPage/SettingsTab/tabs/ConfigurationManager/components/FeatureGroup/index.ts

@@ -0,0 +1 @@
+export { default } from './FeatureGroup'