Add "Edit" page to Repository tab

www/.eslintrc.yml

@@ -1,14 +1,15 @@
-parser: "@babel/eslint-parser"
-extends: pluralsh
+parser: "@typescript-eslint/parser"
+extends:
+  - pluralsh
 rules:
-  import/prefer-default-export: 'off'
-  react/no-unstable-nested-components: 'off'
+  import/prefer-default-export: "off"
+  react/no-unstable-nested-components: "off"
   react-hooks/rules-of-hooks: "error"
   react-hooks/exhaustive-deps: "warn"
   no-unused-vars: "error"
 overrides:
   - files:
-    - "*.test.ts"
-    - "*.test.tsx"
+      - "*.test.ts"
+      - "*.test.tsx"
     env:
       jest: true

www/.yarnrc.yml

@@ -1,2 +1,7 @@
-yarnPath: .yarn/releases/yarn-3.2.1.cjs
 nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+
+yarnPath: .yarn/releases/yarn-3.2.1.cjs

www/package.json

@@ -56,7 +56,7 @@
     "moment": "2.29.4",
     "phoenix": "1.6.11",
     "pluralsh-absinthe-socket-apollo-link": "0.2.0",
-    "pluralsh-design-system": "1.118.0",
+    "pluralsh-design-system": "1.123.0",
     "prop-types": "15.8.1",
     "query-string": "7.1.1",
     "react": "18.2.0",
@@ -102,6 +102,8 @@
     "@babel/preset-env": "7.18.6",
     "@babel/preset-react": "7.18.6",
     "@pluralsh/stylelint-config": "1.0.0",
+    "@typescript-eslint/eslint-plugin": "5.30.6",
+    "@typescript-eslint/parser": "5.30.6",
     "eslint": "8.19.0",
     "eslint-config-pluralsh": "3.1.0",
     "postcss-import": "8.2.0",

www/src/components/Plural.js

@@ -13,7 +13,7 @@ import Repository from './repository/Repository'
 import RepositoryArtifacts from './repository/RepositoryArtifacts'
 import RepositoryDeployments from './repository/RepositoryDeployments'
 import RepositoryDescription from './repository/RepositoryDescription'
-import RepositoryEdit from './repository/RepositoryEdit'
+import RepositoryEdit from './repository/RepositoryEdit.tsx'
 import RepositoryPackages from './repository/RepositoryPackages'
 import RepositoryPackagesDocker from './repository/RepositoryPackagesDocker'
 import RepositoryPackagesHelm from './repository/RepositoryPackagesHelm'

www/src/components/marketplace/MarketplaceRepositories.js

@@ -77,7 +77,7 @@ function RepoCardList({ repositories, repoProps, maxWidth, stretchLastRow = fals
               imageUrl={repository.darkIcon || repository.icon}
               publisher={repository.publisher?.name?.toUpperCase()}
               description={repository.description}
-              tags={repository.tags.map(({ name }) => name)}
+              tags={repository.tags.map(({ tag }) => tag)}
               priv={repository.private}
               installed={!!repository.installation}
               {...repoProps}
@@ -142,7 +142,7 @@ function MarketplaceRepositories({ installed, ...props }) {
     .filter(repository => {
       if (!tags.length) return true
 
-      const repositoryTags = repository.tags.map(({ name }) => name.toLowerCase())
+      const repositoryTags = repository.tags.map(({ tag }) => tag.toLowerCase())
 
       return tags.some(tag => repositoryTags.includes(tag))
     })

www/src/components/marketplace/MarketplaceSidebar.js

@@ -29,7 +29,7 @@ function MarketplaceSidebarCheckbox({ toggled, onClick, label }) {
 }
 
 const searchOptions = {
-  keys: ['name'],
+  keys: ['tag'],
 }
 
 function MarketplaceSidebar(props) {
@@ -117,7 +117,7 @@ function MarketplaceSidebar(props) {
   }
 
   function renderTags() {
-    const sortedTags = tags.slice().sort((a, b) => a.name.localeCompare(b.name))
+    const sortedTags = tags.slice().sort((a, b) => a.tag.localeCompare(b.tag))
     const fuse = new Fuse(sortedTags, searchOptions)
     const resultTags = search ? fuse.search(search).map(({ item }) => item) : sortedTags.filter((x, i) => i < nDisplayedTags)
 
@@ -142,12 +142,12 @@ function MarketplaceSidebar(props) {
             />
           ) : null}
         />
-        {resultTags.map(({ name, count }) => (
+        {resultTags.map(({ tag, count }) => (
           <MarketplaceSidebarCheckbox
-            key={name}
-            toggled={isToggled('tag', name)}
-            onClick={() => handleToggle('tag', name)}
-            label={`${name} (${count})`}
+            key={tag}
+            toggled={isToggled('tag', tag)}
+            onClick={() => handleToggle('tag', tag)}
+            label={`${tag} (${count})`}
           />
         ))}
         {((nDisplayedTags < tags.length) || hasMoreTags) && !search && (

www/src/components/marketplace/queries.js

@@ -16,7 +16,7 @@ export const MARKETPLACE_QUERY = gql`
             ...InstallationFragment
           }
           tags {
-            name: tag
+            tag
           }
         }
       }
@@ -44,7 +44,7 @@ export const TAGS_QUERY = gql`
       }
       edges {
         node {
-          name: tag
+          tag
           count
         }
       }