Merge pull request #128 from DennisPeriquet/clean_dev1

Add a CreateJira button and enhance the README for local development

.gitignore

@@ -22,3 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .idea/
+.next/

components/self-service/new-content-done.tsx

@@ -112,16 +112,55 @@ export default function NewContentDone() {
     return YAML.stringify(result);
   };
 
+  // safeEncodeURIComponent wraps the library function, and additionally encodes
+  // square brackets.  Square brackets are NOT unsafe per RFC1738, but Google and
+  // others mishandle them.
+  const safeEncodeURIComponent = (value) => {
+    return encodeURIComponent(value)
+      .replace('[', '%5B')
+      .replace(']', '%5D')
+      .replace('{', '%7B')
+      .replace('}', '%7D')
+  }
+
+  // Create jira summary.
+  const jiraSummary = `[BuildAuto] Add OCP component - ${distgit_ns}/${distgitName}`
+  const jiraSummaryEncoded = safeEncodeURIComponent(jiraSummary);
+
+  // Combine YAMLs as Jira description
+  const jiraDescription = `${generateYaml()}\n\n${generateHBYaml()}`;
+  const jiraDescriptionEncoded = safeEncodeURIComponent(jiraDescription);
+
+  const releaseWork = safeEncodeURIComponent("Release work")
+
+  const ARTProjectID = "12323120"
+  const ARTStoryTypeID = 17
+
+  // Build the Jira URL
+  let jiraUrl = `https://issues.redhat.com/secure/CreateIssueDetails!init.jspa?priority=10200`
+  jiraUrl += `&pid=${ARTProjectID}`
+  jiraUrl += `&issuetype=${ARTStoryTypeID}`
+  jiraUrl += `&summary=${jiraSummaryEncoded}`
+  jiraUrl += `&description=${jiraDescriptionEncoded}`
+  jiraUrl += `&component=${releaseWork}`
+
+  const handleCreateJira = () => {
+
+    // Open the Jira creation page in a new tab with pre-filled data
+    window.open(jiraUrl, '_blank');
+  };
+
   return (<Box
     component="div"
     sx={{
       '& > :not(style)': { m: 2},
     }}
   >
     <Box>
-      <Typography>Please<Button variant="text" target="_blank" href="https://issues.redhat.com/secure/CreateIssue!default.jspa">create a Jira ticket</Button>for the <strong>ART</strong> project and send it to <strong>@release-artists</strong> on <strong>#forum-ocp-art</strong> on Slack, with the following content:</Typography>
+      <Typography  sx={{ mb: 3 }}>About to make a Jira in the <strong>ART</strong> project using the <strong>Summary</strong> and <strong>Description</strong> below:</Typography>
+      <hr />
       <Typography component="h6" sx={{ mt: 2 }}><b>Summary</b></Typography>
-      <Typography>[BuildAuto] Add OCP component - {distgit_ns}/{distgitName}</Typography>
+      <Typography>{jiraSummary}</Typography>
       <Typography component="h6" sx={{ mt: 2 }}><b>Description</b></Typography>
       <pre>
         {generateYaml()}
@@ -130,9 +169,25 @@ export default function NewContentDone() {
       <pre>
         {generateHBYaml()}
       </pre>
-
+      <hr />
+      <Typography sx={{ mt: 3 }}>
+        Follow these steps:
+      </Typography>
+      <ul>
+        <li>If the above looks good, login to Jira <a href="https://issues.redhat.com/" target="_blank" rel="noopener noreferrer">here</a> (a separate tab will open) then click the "Create Jira" button below</li>
+        <li>In the "Create Issue" page, set the "Reporter" field as your UserId and click the "Create" button at the bottom</li>
+        <li>Send the Jira number to the <strong>ART</strong> project</li>
+        <li>Inform <strong>@release-artists</strong> on <strong>#forum-ocp-art</strong> on Slack</li>
+      </ul>
     </Box>
     <Box sx={{ py: 2 }}>
+      <Button
+        variant="contained"
+        onClick={handleCreateJira}
+        sx={{ mt: 1, mr: 1 }}
+      >
+        Create Jira
+      </Button>
       <Button
         variant="contained"
         onClick={handleReset}

components/self-service/new-content-form.tsx

@@ -384,7 +384,7 @@ export default function NewContentForm({ onSubmit, defaultValues }: { onSubmit?:
                 {...field}
               >
                 {usageTypeHelperText.map(([usageType, helperText]) => (
-                  <FormControlLabel control={<Radio value={usageType} />} label={
+                  <FormControlLabel key={usageType} control={<Radio value={usageType} />} label={
                     <Box sx={{ display: 'flex', alignItems: 'center' }}>
                       <Typography>{usageType}</Typography>
                       <Tooltip title={helperText}>

components/self-service/new-content-state.tsx

@@ -82,24 +82,56 @@ function reducer(state: NewContentState, action: Action): NewContentState {
 export const NewContentContext = createContext<NewContentContext | undefined>(undefined);
 
 export function NewContentStateProvider({ children }: { children: ReactNode }) {
-  const initialValues: Inputs = {
-    componentType: "image",
-    imageType: "other",
-    // imageName: "openshift/ose-foo-bar",
-    // deliveryRepo: "openshift4/ose-foo-bar-rhel9",
-    // dockerfilePath: "/Dockerfile",
-    arches: new Set(["all"]),
-    hasOperatorLabel: false,
-    deliveryRepoApplicationCategories: new Set(),
-    deliveryRepoContentStructure: "singlestream",
-    // distgit: "foo",
-    // productManager: "someone",
-    // sourceRepo: "https://github.com/openshift/foo.git",
-    // bugComponent: "fake-component",
-    // owners: "[email protected], [email protected]",
-    // rpmPackageName: "openshift-foo",
-    // specfilePath: "/openshift-foo.spec",
-  };
+
+  // Set this to true when you want to run through the workflows without entering values manually.
+  const debugMode = false
+
+  let initialValues: Inputs
+
+  if (debugMode) {
+
+    // Setting some reasonable defaults to help get through the workflows faster for debugging.
+    initialValues = {
+      componentType: "image",
+      imageType: "other",
+      imageName: "openshift/ose-foo-bar",
+      deliveryRepo: "openshift4/ose-foo-bar-rhel9",
+      dockerfilePath: "/Dockerfile",
+      arches: new Set(["all"]),
+      hasOperatorLabel: false,
+      deliveryRepoApplicationCategories: new Set(["Accounting"]),
+      deliveryRepoContentStructure: "singlestream",
+      distgit: "foo",
+      productManager: "someone",
+      sourceRepo: "https://github.com/openshift/foo.git",
+      bugComponent: "fake-component",
+      owners: "[email protected], [email protected]",
+      rpmPackageName: "openshift-foo",
+      specfilePath: "/openshift-foo.spec",
+      deliveryRepoDisplayName: "sampleDisplayName",
+      deliveryRepoSummary: "sampleSummary",
+      deliveryRepoDescription: "sampleDescription",
+      deliveryRepoReleaseCategory: "sampleReleaseCategory",
+      deliveryRepoHostLevelAccess: "Privileged",
+      deliveryRepoImageUsageType: "Component image",
+      deliveryRepoImageOwner: "[email protected]",
+      deliveryRepoProductManager: "Fake Product Manager",
+      deliveryRepoProgramManager: "Fake Program Manager",
+      deliveryRepoQeOwner: "[email protected]",
+      deliveryRepoDocOwner: "[email protected]",
+      deliveryRepoErrataWriter: "[email protected]",
+      prodSecReviewJira: "PRODSEC-9991"
+    }
+  } else {
+    initialValues = {
+      componentType: "image",
+      imageType: "other",
+      arches: new Set(["all"]),
+      hasOperatorLabel: false,
+      deliveryRepoApplicationCategories: new Set(),
+      deliveryRepoContentStructure: "singlestream",
+    }
+  }
   const [{ activeStep, inputs }, dispatch] = useReducer(reducer, {
     activeStep: 0,
     inputs: initialValues,

container/README.md

@@ -4,6 +4,16 @@ Clone the repo and run `next dev`. The website will be hosted on `localhost:3000
 Run `next dev -p <port number>` if you want to host the website on a particular port, but make sure that [art-dashboard-backend](https://github.com/openshift-eng/art-dashboard-server)
 is already up and running. Or the dashboard page will not load.
 
+To get local working version using the production backend:
+
+* `git clone https://github.com/openshift-eng/art-dashboard-ui.git; cd art-dashboard-ui`
+* Modify [api_calls.js](components/api_calls/api_calls.js) and change `server_endpoint = "http://localhost:8080"` to `server_endpoint = "https://art-dash-server-art-dashboard-server.apps.artc2023.pc3z.p1.openshiftapps.com"`
+* `npm install`
+* `npx next build`
+* `npx next dev -p 3009`
+* Log onto the Redhat VPN
+* Browse to http://127.0.0.1:3009
+
 See Notes if you encounter errors while running the commands above
 
 # Production
@@ -25,4 +35,4 @@ _(Adding webhooks to automatically start the builds are in the works. Update thi
 defined in the former will take priority over the latter. In production, when `next build && next start` is run
 values from `.env.production` will take priority over `.env`.
 - If you want to test with some env variables in your local development environment. Create a file `.env.local`. Variables
-defined in that file will take precedence over all other env files. But make sure to not check it into git by accident.
+defined in that file will take precedence over all other env files. But make sure to not check it into git by accident.