Repo Delete

Author: snyaggarwal

src/components/repos/DeleteRepo.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useTranslation, Trans } from 'react-i18next'
+import TextField from '@mui/material/TextField'
+import DialogContent from '@mui/material/DialogContent'
+import Alert from '@mui/material/Alert'
+import Button from '../common/Button';
+import Dialog from '../common/Dialog'
+import DialogTitle from '../common/DialogTitle'
+
+const DeleteRepo = ({ onSubmit, onClose, open, title, repo }) => {
+  const { t } = useTranslation()
+  const [value, setValue] = React.useState('')
+  const onChange = event => setValue(event.target.value || '')
+  const repoType = repo.type.replace(' Version', '')
+  const repoId = repo.short_code || repo.id
+
+  return (
+    <Dialog open={Boolean(open)} onClose={onClose}>
+      <DialogTitle>
+        <Trans
+          i18nKey='repo.delete.title'
+          values={{resourceType: repoType, resourceId: repoId}}
+        />
+    </DialogTitle>
+      <DialogContent sx={{padding: '16px 0 0 0 !important'}}>
+        <Alert variant="filled" severity="warning" sx={{backgroundColor: '#ed6c02 !important', padding: '6px 16px !important', borderRadius: '4px !important'}}>
+          {t('repo.delete.warning')}
+        </Alert>
+        <p>
+          {t('repo.delete.confirmation_title', {resourceType: repoType})} <b>{repoId}</b>?
+        </p>
+        <p>
+          <Trans
+            i18nKey='repo.delete.message'
+            values={{
+              resourceType: repoType.toLowerCase(),
+              relationship: 'versions, ',
+              associationsLabel: 'concepts and mappings'
+            }}
+            components={[<strong />]}
+          />
+        </p>
+        <p>
+          <Trans
+            i18nKey="repo.delete.confirmation_message"
+            values={{resourceId: repoId}}
+            components={[<strong />]}
+          />
+        </p>
+
+        <TextField
+          sx={{backgroundColor: 'surface.n92'}}
+          fullWidth
+          required
+          value={value}
+          onChange={onChange}
+        />
+        <Button
+          sx={{marginTop: '24px', width: '100%', textTransform: 'uppercase'}}
+          color='error'
+          label={
+            <Trans
+              i18nKey="repo.delete.confirmation_button_label"
+              values={{resourceType: repoType}}
+            />
+          }
+          onClick={onSubmit}
+          disabled={value !== repoId}
+        />
+    </DialogContent>
+    </Dialog>
+  )
+}
+
+export default DeleteRepo;

src/components/repos/RepoHeader.jsx

@@ -15,7 +15,7 @@ import RepoManagementList from './RepoManagementList';
 import FollowActionButton from '../common/FollowActionButton'
 import EntityAttributesDialog from '../common/EntityAttributesDialog'
 
-const RepoHeader = ({repo, owner, versions, onVersionChange, onCreateConceptClick, onCreateMappingClick, essentials, onCreateVersionClick}) => {
+const RepoHeader = ({repo, owner, versions, onVersionChange, onCreateConceptClick, onCreateMappingClick, essentials, onCreateVersionClick, onDeleteRepoClick}) => {
   const { t } = useTranslation()
   const [menu, setMenu] = React.useState(false)
   const [menuAnchorEl, setMenuAnchorEl] = React.useState(false)
@@ -37,6 +37,8 @@ const RepoHeader = ({repo, owner, versions, onVersionChange, onCreateConceptClic
       onCreateMappingClick()
     else if (option === 'createVersion')
       onCreateVersionClick()
+    else if (option === 'delete')
+      onDeleteRepoClick()
   }
 
   const getRepo = () => {

src/components/repos/RepoHome.jsx

@@ -19,6 +19,8 @@ import Error40X from '../errors/Error40X';
 import RepoSummary from './RepoSummary'
 import RepoOverview from './RepoOverview'
 import VersionForm from './VersionForm'
+import DeleteRepo from './DeleteRepo'
+import { OperationsContext } from '../app/LayoutContext';
 
 const RepoHome = () => {
   const { t } = useTranslation()
@@ -43,6 +45,9 @@ const RepoHome = () => {
   const [conceptForm, setConceptForm] = React.useState(false)
   const [mappingForm, setMappingForm] = React.useState(false)
   const [versionForm, setVersionForm] = React.useState(false)
+  const [deleteRepo, setDeleteRepo] = React.useState(false)
+
+  const { setAlert } = React.useContext(OperationsContext);
 
   const getURL = () => ((toParentURI(location.pathname) + '/').replace('//', '/') + versionFromURL + '/').replace('//', '/')
   const fetchRepo = () => {
@@ -142,6 +147,22 @@ const RepoHome = () => {
     setVersionForm(false)
   }
 
+  const onDeleteRepo = () => {
+    APIService.new().overrideURL(dropVersion(repo.url)).delete().then(response => {
+      if(!response || response?.status === 204) {
+        setDeleteRepo(false)
+        setAlert({severity: 'success', message: t('repo.success_delete')})
+        history.push(owner?.url || repo.owner_url)
+      }
+      else if(response?.status === 202 || response?.detail === 'Already Queued') {
+        setDeleteRepo(false)
+        setAlert({severity: 'warning', message: t('repo.delete_accepted')})
+      }
+      else
+        setAlert({severity: 'error', message: response?.data?.detail || t('common.generic_error')})
+    })
+  }
+
   const isConceptURL = tab === 'concepts'
   const isMappingURL = tab === 'mappings'
   const getConceptURLFromMainURL = () => (isConceptURL && params.resource) ? getURL() + 'concepts/' + params.resource + '/' : false
@@ -157,7 +178,16 @@ const RepoHome = () => {
         {
           (repo?.id || loading) &&
             <React.Fragment>
-              <RepoHeader owner={owner} repo={repo} versions={versions} onVersionChange={onVersionChange} onCreateConceptClick={onCreateConceptClick} onCreateMappingClick={onCreateMappingClick} onCreateVersionClick={onCreateVersionClick} />
+              <RepoHeader
+                owner={owner}
+                repo={repo}
+                versions={versions}
+                onVersionChange={onVersionChange}
+                onCreateConceptClick={onCreateConceptClick}
+                onCreateMappingClick={onCreateMappingClick}
+                onCreateVersionClick={onCreateVersionClick}
+                onDeleteRepoClick={() => setDeleteRepo(true)}
+              />
               <div className='padding-0 col-xs-12' style={{width: isSplitView ? '100%' : 'calc(100% - 272px)'}}>
                 <CommonTabs TABS={TABS} value={tab} onChange={onTabChange} />
                 {
@@ -214,6 +244,10 @@ const RepoHome = () => {
           versionForm &&
             <VersionForm resourceType={repo?.type?.toLowerCase()} version={repo} onClose={(postUpsert) => onVersionFormClose(postUpsert)} />
         }
+        {
+        repo?.id &&
+            <DeleteRepo open={deleteRepo} onClose={() => setDeleteRepo(false)} repo={repo} onSubmit={onDeleteRepo}/>
+        }
       </div>
     </div>
   )

src/components/repos/RepoManagementList.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next'
-import { Menu, ListItemButton, ListItemText, ListItemIcon} from '@mui/material'
+import { Menu, ListItemButton, ListItemText, ListItemIcon, Divider} from '@mui/material'
 import AddIcon from '@mui/icons-material/Add';
 import EditIcon from '@mui/icons-material/Edit';
 import VersionIcon from '@mui/icons-material/AccountTreeOutlined';
+import DeleteIcon from '@mui/icons-material/Delete'
 
 const RepoManagementList = ({ anchorEl, open, onClose, onClick, repo, id }) => {
   const { t } = useTranslation()
@@ -39,6 +40,13 @@ const RepoManagementList = ({ anchorEl, open, onClose, onClick, repo, id }) => {
         </ListItemIcon>
         <ListItemText primary={t('repo.create_version')} />
       </ListItemButton>
+      <Divider />
+      <ListItemButton id='delete' onClick={() => onClick('delete')} sx={{padding: '8px 12px', color: 'error.main'}}>
+        <ListItemIcon sx={{minWidth: 'auto', marginRight: '12px', color: 'error.main'}}>
+          <DeleteIcon />
+        </ListItemIcon>
+        <ListItemText primary={t('repo.delete_repo')} />
+      </ListItemButton>
     </Menu>
   )
 }

src/i18n/locales/en/translations.json

@@ -288,7 +288,17 @@
           "helper_text": "Alphanumeric characters, @, hyphens, periods, and underscores are allowed."
         }
       }
-    }
+    },
+    "delete": {
+      "warning": "Unexpected bad things will happen if you don’t read this!",
+      "title": "Delete {{resourceType}}: {{resourceId}}",
+      "message": "This action <0>cannot</0> be undone!. This will delete the entire {{resourceType}} and all of its {{relationship}} {{associationsLabel}} (if any).",
+      "confirmation_title": "Are you sure you want to permanently delete this {{resourceType}}",
+      "confirmation_message": "Please type <0>{{resourceId}}</0> to confirm.",
+      "confirmation_button_label": "I understand the consequences, delete this {{resourceType}}"
+    },
+    "delete_repo": "Delete Repo",
+    "delete_accepted": "Repo Delete Accepted. This may take few minutes."
   },
   "org": {
     "my": "My organizations",