feat: wired up get template by id and install template endpoints

example/gatsby-config.js

@@ -269,6 +269,11 @@ module.exports = {
  secure: false,
  changeOrigin: true,
  })
- )
+ );
+ app.use("/v1/templates", createProxyMiddleware({
+ target: "https://stage.adobeioruntime.net/api/v1/web/adp-template-registry-deepeshtest/template-registry-api/",
+ secure: false,
+ changeOrigin: true,
+ }))
  },
 };

example/src/pages/credential/GetCredentialExternal.js

@@ -6,21 +6,19 @@ import ps from "./images/ps.png";
 const GetCredentialExternal = () => {
  return (
 
- <GetCredential credentialType="apiKey" className="getCredentialContainer" service="CCEmbedCompanionAPI" >
+ <GetCredential className="getCredentialContainer" templateId="6643f9f3730aae07ce7fb6d6" >
 
  <GetCredential.SignIn title="Get credentials" paragraph="Create unique credentials that you will use to call multiple APIs from your application." buttonText="Sign in to create credentials" />
 
  <GetCredential.Form title="Get credentials" paragraph="Create unique credentials that you will use to call multiple APIs from your application." className="formClass">
 
  <GetCredential.Form.CredentialName label="Credential name" description="Credential name must be unique and between 3 and 45 characters long. A project will be automatically created with the same name in Adobe Developer Console." range="45" />
 
- <GetCredential.Form.AllowedOrigins label="Allowed domains (up to 5)" contextHelp={true} contextHelpHeading="What are allowed domains" placeholder="Example: www.domain-1.com, www.domain-2.com, *.my-domain.com, localhost:5000" contextHelpText="To prevent a third party from using your client ID on their own website, the use of your client ID is restricted to a list of domains that you specifically authorize." contextHelpLink="https://www.adobe.com/" contextHelpLabelForLink="Learn more in our documentation" description="Use wildcards to enter multiple subdomains (*.my-domain.com) or commas to separate multiple domains (www.domain-1.com, www.domain-2.com). During local development, you can include ports greater than 1023 with localhost (e.g. localhost:3000). Standard ports (80, 443) will be used for non-localhost domains." />
+ {/* <GetCredential.Form.AllowedOrigins label="Allowed domains (up to 5)" contextHelp={true} contextHelpHeading="What are allowed domains" placeholder="Example: www.domain-1.com, www.domain-2.com, *.my-domain.com, localhost:5000" contextHelpText="To prevent a third party from using your client ID on their own website, the use of your client ID is restricted to a list of domains that you specifically authorize." contextHelpLink="https://www.adobe.com/" contextHelpLabelForLink="Learn more in our documentation" description="Use wildcards to enter multiple subdomains (*.my-domain.com) or commas to separate multiple domains (www.domain-1.com, www.domain-2.com). During local development, you can include ports greater than 1023 with localhost (e.g. localhost:3000). Standard ports (80, 443) will be used for non-localhost domains." /> */}
 
  <GetCredential.Form.Products label="Included products and services">
- <GetCredential.Form.Product label="Firefly - Firefly and Creative Cloud Automation API" icon={firefly} />
- <GetCredential.Form.Product label="Adobe Photoshop API" icon={ps} />
- <GetCredential.Form.Product label="Adobe Analytics" />
- <GetCredential.Form.Product label="Lughtgroom" />
+ <GetCredential.Form.Product label="Firefly - Firefly Services" icon={firefly} />
+ <GetCredential.Form.Product label="Adobe Photoshop - Firefly Services" icon={ps} />
  </GetCredential.Form.Products>
 
  <GetCredential.Form.Downloads label="Download a personalized code sample" contextHelp={true} contextHelpHeading="Select Language">
@@ -61,10 +59,8 @@ const GetCredentialExternal = () => {
  </GetCredential.Card.Side>
 
  <GetCredential.Card.Products label="Included products and services">
- <GetCredential.Card.Product label="Firefly - Firefly and Creative Cloud Automation API" icon={firefly} />
- <GetCredential.Card.Product label="Adobe Photoshop API" icon={ps} />
- <GetCredential.Card.Product label="Adobe Analytics" />
- <GetCredential.Card.Product label="Lughtgroom" />
+ <GetCredential.Card.Product label="Firefly - Firefly Services" icon={firefly} />
+ <GetCredential.Card.Product label="Photoshop - Firefly Services" icon={ps} />
  </GetCredential.Card.Products>
 
  <GetCredential.Card.ProjectsDropdown label="Projects" subHeading="Only your projects that contain credentials are shown" />
@@ -76,12 +72,11 @@ const GetCredentialExternal = () => {
  <GetCredential.Card.DevConsoleLink heading="Developer Console Project" />
 
  <GetCredential.Card.CredentialDetails heading="Credential details">
- {/* <GetCredential.Card.CredentialDetails.ClientId heading="ClientId" /> */}
- {/* <GetCredential.Card.CredentialDetails.Scopes heading="Scopes" /> */}
+ <GetCredential.Card.CredentialDetails.ClientId heading="ClientId" />
+ <GetCredential.Card.CredentialDetails.Scopes heading="Scopes" />
  <GetCredential.Card.CredentialDetails.ClientSecret heading="Client Secret" buttonLabel="Retrieve and copy client secret" />
- <GetCredential.Card.CredentialDetails.APIKey heading="API Key" />
+ {/* <GetCredential.Card.CredentialDetails.APIKey heading="API Key" /> */}
  <GetCredential.Card.CredentialDetails.OrganizationName heading="Organization" />
- <GetCredential.Card.CredentialDetails.AllowedOrigins heading="Allowed Domains" />
  </GetCredential.Card.CredentialDetails>
 
  </GetCredential.Card>
@@ -116,10 +111,8 @@ const GetCredentialExternal = () => {
  <GetCredential.Return.DevConsoleLink heading="Developer Console Project" />
 
  <GetCredential.Return.Products label="Included products and services">
- <GetCredential.Return.Product label="Firefly - Firefly and Creative Cloud Automation API" icon={firefly} />
- <GetCredential.Return.Product label="Adobe Photoshop API" icon={ps} />
- <GetCredential.Return.Product label="Adobe Analytics" />
- <GetCredential.Return.Product label="Lughtgroom" />
+ <GetCredential.Return.Product label="Firefly - Firefly Services" icon={firefly} />
+ <GetCredential.Return.Product label="Adobe Photoshop - Firefly Services" icon={ps} />
  </GetCredential.Return.Products>
 
  </GetCredential.Return>

packages/gatsby-theme-aio/src/components/GetCredential/CredentialForm.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { css } from "@emotion/react";
 import classNames from "classnames";
 import '@spectrum-css/contextualhelp/dist/index-vars.css';
@@ -15,23 +15,15 @@ import { CreateCredential } from './Form/CreateCredential';
 import { MyCredential } from './MyCredential';
 import { Loading } from "./Loading";
 import { IllustratedMessage } from "./IllustratedMessage";
-import { JoinBetaProgram } from './JoinBetaProgram';
-import { NoDeveloperAccessError } from './NoDeveloperAccessError';
 import { Product, Products } from './Products';
 import { Organization } from './Organization';
+import GetCredentialContext from './GetCredentialContext';
 
 const hostnameRegex = /^(localhost:\d{1,5}|(\*\.|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+(\.[a-zA-Z]{2,})+)|\*|(\*\.[a-zA-Z0-9-]+(\.[a-zA-Z]{2,})+))$/;
 const credentialNameRegex = /^(?=[A-Za-z0-9\s]{6,}$)[A-Za-z0-9\s]*$/;
 
 const CredentialForm = ({
  formProps,
- credentialType,
- service,
- organization,
- setOrganizationValue,
- organizationChange,
- setOrganizationChange,
- allOrganization,
  showCreateForm,
  setShowCreateForm,
  isCreateNewCredential,
@@ -50,18 +42,13 @@ const CredentialForm = ({
  const [isShow, setIsShow] = useState(false);
  const [alertShow, setAlertShow] = useState(false);
 
+ const { selectedOrganization, template } = useContext(GetCredentialContext);
+
 
 
  const credentialForm = formProps?.[CredentialForm];
  const isFormValue = credentialForm?.children?.filter(data => Object.keys(data.props).some(key => key.startsWith('contextHelp')));
 
- const getValueFromLocalStorage = async () => {
- if (!allOrganization) {
- setOrganizationValue({});
- setShowCreateForm(false)
- }
- }
-
  const initialLoad = () => {
  const fields = {};
  const downloadObj = { label: "Language", selectOptions: [] };
@@ -90,7 +77,6 @@ const CredentialForm = ({
  }
 
  setFormField(fields);
- getValueFromLocalStorage();
 
  }
 
@@ -105,12 +91,6 @@ const CredentialForm = ({
  }
  }, [window.adobeIMS?.isSignedInUser()])
 
- useEffect(() => {
- setTimeout(() => {
- setOrganizationChange(false);
- }, 8000);
- }, [organizationChange])
-
  useEffect(() => {
  if (showCreateForm) setIsError(false);
  }, [showCreateForm])
@@ -128,28 +108,6 @@ const CredentialForm = ({
 
  useEffect(() => { initialLoad(); }, []);
 
- useEffect(() => {
- if (!organization) {
- setOrganizationValue(undefined);
- setShowCreateForm(false);
- setLoading(true);
- }
- else if (organization && Object.keys(organization)?.length !== 0) {
- setShowCreateForm(true)
- setIsError(true)
- setTimeout(() => {
- setLoading(false)
- setIsError(false)
- }, 2000)
- }
- else {
- if (Object.keys(organization)?.length === 0) {
- setOrganizationValue(undefined);
- setShowCreateForm(false);
- }
- }
- }, [organization])
-
  useEffect(() => {
  if (isError) {
  const updateForm = { ...formData };
@@ -195,16 +153,26 @@ const CredentialForm = ({
  setLoading(true);
  setShowCreateForm(false);
 
+ const apis = template.apis.map(api => ({
+ code: api.code,
+ credentialType: api.credentialType,
+ flowType: api.flowType,
+ licenseConfigs: Array.isArray(api.licenseConfigs) && api.licenseConfigs.length > 0 ? [{...api.licenseConfigs[0], 'op': 'add'}] : null
+ }));
+
  const data = {
- name: formData["CredentialName"],
- platform: credentialType,
+ projectName: formData["CredentialName"],
  description: 'created for get credential',
- domain: formData["AllowedOrigins"],
- services: [{ sdkCode: service }],
+ metadata: {
+ domain: formData["AllowedOrigins"]
+ },
+ orgId: selectedOrganization.code,
+ apis
  };
 
  try {
- const response = await fetch(`/console/api/organizations/${organization?.id}/integrations/adobeid`, {
+ const url = `/v1/templates/templates-install?templateId=${template.id}`
+ const response = await fetch(url, {
  method: "POST",
  headers: {
  "Content-Type": "application/json",
@@ -216,7 +184,7 @@ const CredentialForm = ({
 
  const resResp = await response.json();
 
- if (response.status === 200) {
+ if (response.ok) {
  setResponse(resResp);
  setShowCredential(true);
  setAlertShow(true);
@@ -244,7 +212,7 @@ const CredentialForm = ({
 
  return (
  <>
- {showCreateForm && !loading && organization &&
+ {showCreateForm && !loading &&
  <div
  className={classNames(credentialForm?.className)}
  css={css`
@@ -287,8 +255,8 @@ const CredentialForm = ({
  css={css`color:var(--spectrum-global-color-gray-800);display : inline-flex;`}
  onClick={() => setIsShow(true)}
  >
- You're creating this credential in {organization?.type === "developer" ? "in your personal developer organization" : <span>[<b>{organization?.name}</b>] </span>}.
- <Organization isShow={isShow} setOrganizationChange={setOrganizationChange} setOrganizationValue={setOrganizationValue} setIsShow={setIsShow} organization={organization} allOrganization={allOrganization} />
+ You're creating this credential in {selectedOrganization?.type === "developer" ? "in your personal developer organization" : <span>[<b>{selectedOrganization?.name}</b>] </span>}.
+ <Organization isShow={isShow} setIsShow={setIsShow}/>
  </p>
  </div>
  </div>
@@ -321,7 +289,6 @@ const CredentialForm = ({
  css={css`
  display:flex;
  gap:32px;
- flex-direction:column;
  width: 100%;
  `}
  >
@@ -338,12 +305,9 @@ const CredentialForm = ({
  </div>
  </div>
  }
-
  {alertShow &&
  <>
- {organizationChange ?
- <Toast message="Organization Changed" variant="success" disable={8000} customDisableFunction={setAlertShow} /> :
- <Toast
+ {<Toast
  customDisableFunction={setAlertShow}
  message={showCreateForm && !showCredential ? errResp : !isError && showCredential && `Your credentials were created successfully.`}
  variant={isError || (showCreateForm && !showCredential) ? "error" : "success"}
@@ -352,10 +316,9 @@ const CredentialForm = ({
  }
  </>
  }
- {loading && !showCredential && !isError && !showCreateForm && organization && <Loading credentials={credentialForm} isCreateCredential downloadStatus={formData['Downloads']} />}
- {(!organization || isError) && loading && <Loading />}
- {isError && !showCreateForm && !showCredential && !organization && <IllustratedMessage errorMessage={formProps?.[IllustratedMessage]} />}
- {showCredential && !showCreateForm && <MyCredential credentialProps={formProps} response={response} setShowCreateForm={setShowCreateForm} setShowCredential={setShowCredential} organizationName={organization?.name} formData={formData} orgID={organization?.id} organization={organization} />}
+ {loading && !showCredential && !isError && !showCreateForm && <Loading credentials={credentialForm} isCreateCredential downloadStatus={formData['Downloads']} />}
+ {isError && !showCreateForm && !showCredential && <IllustratedMessage errorMessage={formProps?.[IllustratedMessage]} />}
+ {showCredential && !showCreateForm && <MyCredential credentialProps={formProps} response={response} setShowCreateForm={setShowCreateForm} setShowCredential={setShowCredential} formData={formData} />}
  </>
  )
 }

packages/gatsby-theme-aio/src/components/GetCredential/FormFields.js

@@ -138,7 +138,7 @@ export const KeyIcon = () => {
  )
 }
 
-export const getOrganization = async (setOrganizationValue) => {
+export const getOrganizations = async () => {
  try {
 
  const token = window.adobeIMS?.getTokenFromStorage()?.token;
@@ -153,34 +153,14 @@ export const getOrganization = async (setOrganizationValue) => {
  }
  });
 
- const organization = await response.json();
- console.log('organization-------', organization)
+ if (!response.ok) {
+ throw new Error('Could not fetch organizations');
+ }
 
- if (setOrganizationValue) {
- setOrganizationValue(organization[0]);
- const orgData = {
- "id": organization[0]?.id,
- "name": organization[0]?.name,
- "orgLen": organization?.length,
- "type": organization[0]?.type
- }
+ const organizations = await response.json();
+ console.log('organization-------', organizations)
 
- const oldOrganization = JSON.parse(localStorage.getItem('OrgInfo'));
- if (!oldOrganization) {
- localStorage.setItem('OrgInfo', JSON.stringify(orgData));
- setOrganizationValue(orgData)
- }
- else {
- const findOrg = organization?.find((data) => data?.id === oldOrganization?.id);
- setOrganizationValue({
- "id": findOrg?.id,
- "name": findOrg?.name,
- "orgLen": organization?.length,
- "type": findOrg.type
- })
- }
- }
- return organization;
+ return organizations;
  }
 
  } catch (error) {

packages/gatsby-theme-aio/src/components/GetCredential/GetCredentialContext.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { createContext } from 'react';
+
+const GetCredentialContext = createContext({});
+
+export {GetCredentialContext as default};

packages/gatsby-theme-aio/src/components/GetCredential/NoDeveloperAccessError.js

@@ -1,13 +1,18 @@
 import React, { useContext, useEffect, useState } from 'react';
 import Context from '../Context';
 import { css } from "@emotion/react";
+import { Organization } from './Organization';
+import GetCredentialContext from './GetCredentialContext';
 
 
 const NoDeveloperAccessError = ({ developerAccessError }) => {
 
  const { ims } = useContext(Context);
 
+ const { selectedOrganization } = useContext(GetCredentialContext);
+
  const [emailID, setEmailID] = useState('');
+ const [isShow, setIsShow] = useState(false);
 
  useEffect(() => {
  (async () => {
@@ -23,7 +28,7 @@ const NoDeveloperAccessError = ({ developerAccessError }) => {
  {developerAccessError?.title && <h3 className="spectrum-Heading spectrum-Heading--sizeL">{developerAccessError?.title}</h3>}
  <p
  className="spectrum-Body spectrum-Body--sizeL">
- To create credentials, you need developer role permissions for the [<b>Adobe Express Embed SDK</b>].
+ To create credentials, you need developer role permissions for the services.
  </p>
 
  {developerAccessError &&
@@ -58,9 +63,9 @@ const NoDeveloperAccessError = ({ developerAccessError }) => {
  >
  <p
  className="spectrum-Body spectrum-Body--sizeS"
- css={css`color:var(--spectrum-global-color-gray-800);`}
+ css={css`color:var(--spectrum-global-color-gray-800);display : inline-flex;`}
  >
- You're currently signed in as [<b>{emailID}</b>]
+ You're currently signed in as [<b>{emailID}</b>] in [<b>{selectedOrganization?.name}</b>]<Organization isShow={isShow} setIsShow={setIsShow}/>
  </p>
  <p
  className="spectrum-Body spectrum-Body--sizeS"